Adapt Learning Community: Instructional material

Hi all

Not sure if this post should be here or in the Tech section.

Basically, I'm an "Instructional Designer" or "eLearning Developer" or whatever, and I came into this career path by chance, like a lot of us did. I started out learning on Articulate Studio 09 then Storyline, dabbled a bit in Captivate, etc...

At no point have I had formal training in HTML or CSS coding, nor have I ever really been a programer, so I have no experience in using platforms like Git, Node etc...

While I think you guys have done a magnificent job of building and deploying Adapt (I can't go back to Articulate anymore...I just can't!), I am struggling with the technical aspects. You're probably noticing a shift in your forums, from users who understand coding to an increasing number of folk like me who are eLearning dev's who don't necessarily code. I would really love it if someone could do a course/video on:

How to install the Adapt Framework properly (I know there are multiple variations, but most of these could be covered)
What each of the bits do and how to set them up and use them properly...eg what is git hub and how do you use it?
How to create a course from scratch. Most of the how-to videos have been about the framework, not the tool...and have started with a course already created.

I have learnt a lot just by playing with it, but I am struggling to work out things like:

How do I get a different picture between sections of a page?
How can I change the background colour for different sections of a page?
How can I put background images in that slide under text?
How can I make the menu boxes the same size?

I know most of this is in the LESS files, but as I said, I'm not a coder (although I am teaching myself).

I'm sure the companies like C&G Kineo, Learning Pool & Sponge UK have assistance and tools available to their customers in Europe, but I'm in Australia and as far as I know (I'm checking), Kineo Pacific don't have that support or build tool available like I've seen in the Webinar from Learning Pool last week.

Sorry, it's a bit of a long rant (?) but I'm a the stage of being a bit frustrated...

CHeers

Simon

I've got some simple answers here

How do I get a different picture between sections of a page?
Put a graphic component in the right place

How can I change the background colour for different sections of a page?
You can have different background colours for different articles on a page , use 'Classes' under 'Settings' in Article>Edit and add "background-colour4"

How can I put background images in that slide under text?
Similar technique to background colours above. Go to "Theme customisation" and "Backgrounds", find the background image section, add an asset (image), note (or copy) the classname (background-image1).
Now use that in an element in "Classes". There are some Theme customisation>Advanced settings that allow you to fix or scroll the background, but I'm not sure how they work yet.

How can I make the menu boxes the same size?
They always seem the same size to me, how did you change them?

Geoff

Show parent | Reply

Hi Geoff

Thanks for your reply, but I don't have any of those menu items in my build of Adapt, which you can see below.

Show parent | Reply

Well I did try :-)

This raises the issue of where we non-techie people go for help.
I'm given access to the builder through LearningPool but it seemed better to come here for help.
I like community over commodity!

However if we're using different builds it gets much harder.

Is there a builder elsewhere that is accessible and current?

Show parent | Reply

Hi Geoff

Yor reply was appreciated, believe me. It's a bit frustrating that there are different builds of the tool available, one of which would solve most of my issues quickly and easily, like the Learning Pool one.

There isn't a company in Australia that offers the same service, which is a pain.

Hopefully the next wide release will fix many things!

Show parent | Reply

Simon,

Did you figure out which build contains the Theme Customisation?

Thanks,

Alex

Show parent | Reply

Hi Alex

The build that subscribers to Learning Pool get the theme customisation button, which makes life much easier for them. Hopefully this will be available to the rest of us soon...

Simon

Show parent | Reply

Simon have sent you a PM - I'd be happy to give you a free coaching session in using Adapt via Skype or similar.

Let me know!

Helen

Show parent | Reply

Hi Simon

Unless you have a customised builder tool like the Learning Pool's, you have to add the style manually in your theme file and use it in the builder's class filed.

For example, if I want to add a background picture for an article:

1) I add the following css styles in the theme.less file which you can find in the theme's less directory

.article-image {
background-color: @grey;
background-position: center center;
background-repeat: no-repeat;
color:@white;
background-size: cover;
background-attachment: fixed;
}

.article-image-co-15-hero {
background-image: url(assets/co-15-hero.jpg)
}

2) then in the builder add the two class in the class field: article-image article-image-co-15-hero

Later on if you want to add background image to another article, you can just simply add another piece of code like the following in the theme.less

.article-image-co-20-hero { background-image: url(assets/co-20-hero.jpg)}

then add the same "article-image" class and the new "article-image-co-20-hero" class in the class field.

Hope this helps.

Sam

Show parent | Reply

I'm interested in adding a background image but I can't find my theme.less file. Has that been removed in the latest version?

Show parent | Reply

theme.less doesn't exist in v2. File and folder structure is explained in the Vanilla wiki. It'll look complex, but I think it works better. Just remember that most Less variables are assigned in colors.less, fonts.less, paddings.less, and generic.less. Then these variables are used in all the files in the src folder.

Show parent | Reply

Hi all,

It is actually possible to add custom CSS/LESS directly to your courses from the Project Settings menu option while editing a project. This requires some technical knowledge, either of CSS or LESS. If adding LESS code, be aware that entering the wrong thing here could break the build, i.e. Publish and Preview.

Regards,

Brian

Show parent | Reply