Adapt Learning Community: Theming in adapt authoring

Hi Adapt community

I had a quick question regarding theming. I watched the following video and would like to start theming whilst also using the authoring tool: https://www.youtube.com/watch?v=RT-KmgAgxuo

Where would I find the variables.less file for to adjust in the adapt_authoring directory?

Any advice would be highly appreciated.

Thank you very much.

Mike

Hi Mike

You'll find the file in dev/src/theme/adapt-contrib-vanilla/less

Kind regards

Show parent | Reply

Hi John-Paul Thank you for your great response. I looked at the file and for some reason the changes I am making are not translating.

I am currently working of the following path.

/Users/mnedelko/my-adapt-course/adapt_authoring/adapt_framework/src/theme/adapt-contrib-vanilla/less/variables.less

Alternatively there is another path:

/Users/mnedelko/my-adapt-course/src/theme/adapt-contrib-vanilla/less/variables.less

I also noticed that the authoring tool has generated a temp folder in the adapt_authoring folder, which also features another instance of the theme here:

/Users/mnedelko/my-adapt-course/adapt_authoring/temp/5496962bdd3e6f250afefb25/adapt_framework/src/theme/adapt-contrib-vanilla/less/variables.less

I tried to change all 3 files - without success.

I know that the solution to this is probably really easy, but for some reason I can't get my head around it.

I am also letting 'grunt watch' run in any of the aforementioned cases, with exception of the last as grunt watch doesn't seem to pick up any changes here. Any advice would be highly appreciated.

Mike

Show parent | Reply

Just to make sure I also wanted to include that I hope to theme out of the authoring tool and hope to see the theme changes in the preview view.

Show parent | Reply

Hi Mike,

I've responded to a similar post by Greg here: https://community.adaptlearning.org/mod/forum/discuss.php?d=502#p2435 - it might help clarify your issues.

NB: Editing the files in the third location you mention ( ../adapt_authoring/temp/5496962bdd3e6f250afefb25/ [etc]) will work if you return to the builder, edit your course and reselect the theme, but it's not the recommended way to customise a theme.

Dennis

Show parent | Reply

Hi guys

So, I watched that theme video in the first post, and a one point, the guys opens up a terminal window (or cmd prompt for windows) and runs [grunt watch] and [grunt server].

I tried this in both the windows cmd prompt & in git bash. It returned 'grunt' is not recognised as an internal or external command, operable program or batch file.

Same for Grunt server...

How can I make the changes to the theme as per the video if I can't get the system to run the updates?

Show parent | Reply

Have you set up your development environment as documented in Setting up your development environment?

Show parent | Reply

Hi Simon,

You could be mixing up processes for the authoring tool and for the framework here. I never have to run grunt when I make changes to the theme.

My recommendation :

What I did :

Open "{yourfilelocation}\adapt_authoring\temp\{randomidhere}\adapt_framework\src\theme" folder
Make a copy of adapt-contrib-vanilla
Call the new folder adapt-contrib-{yourthemename}
Two files inside must be updated: bower.json and package.json. At a minimum, the 'displayName' (bower.json) and the 'name' (package.json) must be changed to reflect your theme. However, it is a good time to update as much of these files as you can (e.g., "version": "0.0.1")
make a zip file of your theme folder
Go to the Upload plugin button in the authoring tool and upload it
Go back to that folder in step 3 and make all your changes within that - mainly within variables.less. You no longer need to keep the zip
Whenever you make a change to your new theme you may need to go and apply it to your course again in Theme Picker before you click Preview.

Let me know if you get stuck!

Helen

Show parent | Reply

Hi Helen

Thanks for the assistance. I guess I'm trying to make heads or tails of the instructions already in existence for the framework and see how it applies to the tool, as there seems to be very little instruction on how to use the new tool.

I've followed your instructions, but can't seem to get the project to update to the changes. I should mention that I am new to editing/playing in code...I'm a quick learner, but am doing so on the fly.

I am watching the webinar tonight (morning UK time) by Learning Pool, so I'm hoping to pick up the answers then.

Show parent | Reply

Hi Simon,

You're right, documentation is slim about theming; but I want to be sure that you and other readers are aware of these instructions from the authoring tool wiki: https://github.com/adaptlearning/adapt_authoring/wiki/Modifying-the-Vanilla-Theme

Cheers.
Chuck

Show parent | Reply

I'm watching a webinar at the moment by the Learning Pool, and they have menu options that I don't have, for example, Theme Customisation...which does everything I want to do!

Is this something I should have or is it only available to Learning pool customers?

Show parent | Reply

I was in the webinar too :) That's definitely a Learning Pool customer only thing.

If you want to connect through Skype you can share your screen and I can help you? hmaffin if you want to add me, or if you don't use skype give me your email and i can set up a webinar room.

Helen

Show parent | Reply

Good morning Helen

Thanks for that offer...The trick will be the timing, as I'm in Australia and need to be at work to do this, which means an early start or late night for you, which I'm not keen to force upon you. :(

I hope the menu options we saw in the webinar becomes part of the wider build, as it would make the tool very user friendly.

Can I ask, what tool do you use to edit the CSS/LESS files? I'm using Adobe Edge Code CC, which I believe is similar to Brackets...

I have looked at Chuck's link and it is the same as what you posted, which I followed, so I'm not sure what is happening.

Simon

Show parent | Reply

Hey Simon,

That's a shame. It's odd that following the instructions doesn't seem to achieve the desired result.

Yes I use Brackets as i find it very easy to use, and it has the colour swatch which I found helpful.

I'll try and do a screencast of the process for you to follow and post it here. If it doesn't work I can only think there's a difference in your installation which would need investigating. Greg Pell is on your timezone and others are US timezone which might make it easier.

Good luck!

Helen

Show parent | Reply