Adapt Learning Community: Trouble with classes

Hi all

Previously I've asked about classes, and thanks to Chuck and others, I've started to get a handle on them.

However...what I am struggling with is changing the color on some component heading. Here's what I have so far.

The course is for Australian Olympic & Paralympic athletes, so its primary color is green and secondary of gold

Here are the classes under theme-extras.less

The highlights are ones I've created to try and solve my problem.

Under component.less is this for the title:

What I know is that if I change the color to @title-color-alt, ALL the title change to white from green.

White's contrast against yellow isn't good, so I want the blocks that are yellow to have green headings and blocks that are green to have white headings.

In the Blocks.json I have this class to change the block color to green,

but how do I get the component title to white?

Cheers

Simon

Hello Simon

You need to put the component title code in your custom class rather than changing from component.less which would alter every component that use this global style.

something like this:

&.background-color-gold {

backgournd-color: @gold-color;

color: @secondory-color;

.component-title {

color: @your-title-color;

}

Show parent | Reply

Hi Sam

This has indeed changed the title color to white, thanks. The other thing it has done though is change the background color of the component to yellow. So the background of the block is green and the comp is yellow with white text.

What is causing this?

Simon

Show parent | Reply

Hi Simon

Glad it is of help.

Try set the .component-inner class in your custom class for the component background colour.

&.background-color-gold {

backgournd-color: @gold-color; // this sets the background colour for the custom block class

color: @secondory-color; // this is the block text colour

.component-inner {

background-color: @your-component-background-color;

}