Adapt Learning Community: Theming my first project with v1.0

Hello all from Kineo US!

It's a pleasure to jump on board as a community member. I've developed a handful of projects with the Adapt Beta and I am starting my first project with version 1. I am really enjoying the improvements made to the development process with the major changes to JSON and CSS.

My current goal is to create a library of several different themes for a client. I've studied the documentation on the community site and forums, but haven't found much direction on custom themes. I'm so used to customizing my pages via bespoke.css! More specifically, I am looking to create a library of several different gradient and image themed backgrounds on a block level for an instructional designer to pick and choose from. I'm assuming in the JSON file I link to a class in a LESS file. Would that be 'theme.less' under 'Bespoke theme styling'? In addition, where would I change the link that to 'adapt-contrib-vanilla'?

Thank you in advance for your help and congratulations to everyone involved with the development of Adapt. I'm hoping you guys are responsible for the big changes to come in the industry!

Hey Joseph,

It's great to see that you're using the v1.0 and enjoying the improvements. We've booked some time this week to do a walk through on styling themes and creating a new one. We feel this is the most important to cover first.

We hope to have this up as soon as. Unfortunately there's not enough documentation on themes for now but it's something we're aware of and will update this very soon.

The walk through will teach you everything you need to know about creating you're own custom theme. With regards to your question -

"I'm assuming in the JSON file I link to a class in a LESS file. Would that be 'theme.less' under 'Bespoke theme styling'?"

- This is how you do bespoke page, article and block styling.

Hope this helps and we'll post something on here once the walk through is up.

Thanks,

Daryl

Show parent | Reply

Thank you Daryl again for your continued help. I just wanted to be sure of what I was doing.

Show parent | Reply

Hi Daryl,

Regarding walk throughs: can you say when they will be up?

Thanks,

Stefan

Show parent | Reply

Hey Stefan,

We had a call today about webinars and in this call we discussed when this webinar would be. The dates for these webinars are here:

https://community.adaptlearning.org/mod/forum/discuss.php?d=134

The "Getting started with the Adapt Framework for developers" webinar will include a look at setting up the development environment and changing a theme based upon an art directed course.

We have thought about a few more and can be viewed here:

https://community.adaptlearning.org/mod/forum/discuss.php?d=142

Please feel free to comment on the ones you feel you would benefit from so we can gain an overview of what people need/what.

Thanks,

Daryl

Show parent | Reply

This doesn't replace a full walk-through but...

To get started with a custom theme:-

1) Make a copy of the Vanilla Theme.
Copy {Adapt framework}/src/theme/adapt-contrib-vanilla
to
{Adapt framework}/src/theme/adapt-my-theme-name
(Where {Adapt framework} is the location you downloaded the Adapt Framework.)

2) Uninstall the Vanilla Theme.

Open an command prompt and go to your adapt framework directory and
run adapt uninstall adapt-contrib-vanilla.

3) Modify the LESS CSS.

Edit {Adapt framework}/src/theme/adapt-my-theme-name/variable.less to start customizing your theme.

4) Build your course.
Open an command prompt and go to your adapt framework directory and run grunt build
then grunt server

You can then continue to edit your LESS files (the server will rebuild automatically on file change) until you are happy with way it looks.

for more information see Styling your course

Show parent | Reply

Great! Thank you so much Chris.

Show parent | Reply