Adapt Learning Community: Authoring Tool Classes

Hi,

What I want to do is to be able to change each block's background color as I see fit using the AT Classes input.

eg; background-color:red; i have a pretty good understanding of how the classes/less are structured in the FW.

I cannot seem to figure out what to add to this box to get results? The only thing I have been able to change is the block background color by typing background-color-inverted in the block setting rollout. I then tried the same in the componant roll-out with no results.

I figure there is more to this than meets the eye but can't seem to crack it. Any help would be great.

OK I think I have figured it out now;

The key seems to be in the Theme-extras.less. In here you can view and adjust the different classes / attributes to be applied to the JSON via _classes

Show parent | Reply

Nigel, I'm more of a I.D. than a programmer so bear with me

1. Do I have to download the course to access the Theme-extras.less?

2. How do I find the blocks I want to change

This seems overly long winded just to change a look/ colour. I'm hoping I'm wrong.

Chris

Show parent | Reply

you can "change each block's background color as you see fit" by adding a class in the settings input and a style in the custom CSS/LESS code. but first, you will need to know the class name of the element you want to style.

the colors in the image below are overriding the vanilla theme. the first block is the only red one. all text component backgrounds are tan, except for the first one, it's black.

colors

the class i added to the settings in the first text component

component class

the class i added to settings in the first block

block class

the css/less code that i added to the project settings

css/less code

as a bonus, this seems like a great way to experiment with styles once you start creating your own themes.

Show parent | Reply

Aaron, that now makes a lot more sense and now seems a fun way to customize my courses.

Thanks

Show parent | Reply