Picture of Christian Lee
component theming
by Christian Lee - Monday, 23 January 2017, 4:38 PM
 

Hi all, I'm trying out colour schemes and would like to have a narrative component colour match.

I've changed the primary colour to dark grey. The narrative strapline is set to @item-color in narrative.less

and colors.less the @item-color is set to @primary-color

So why is the BG of the strapline blue?

 

 

Picture of Ignacio Cinalli
Re: component theming
by Ignacio Cinalli - Monday, 23 January 2017, 6:37 PM
 

Hi Christian, what is the value of your @dark-grey variable?

color.less

@dark-grey: #37474f;

@primary-color: @dark-grey;

 

Picture of Christian Lee
Re: component theming
by Christian Lee - Monday, 23 January 2017, 6:59 PM
 

Ignacio, it's the same as in your reply. #37474f. see image below for what I get. I have a grey bg as you do. but blue for the image description. I guess I've called it the wrong thing, but on preview F12 inspect it's called the narrative strap line title


Picture of Ignacio Cinalli
Re: component theming
by Ignacio Cinalli - Monday, 23 January 2017, 7:53 PM
 

The narrative strapline is the slide's header when viewed on a mobile device.

Picture of Ignacio Cinalli
Re: component theming
by Ignacio Cinalli - Tuesday, 24 January 2017, 9:18 PM
 

Christian, are you using adapt-narrativeStrip or adapt-contrib-narrative?

Picture of Christian Lee
Re: component theming
by Christian Lee - Wednesday, 25 January 2017, 8:45 AM
 

Ignacio, I'm using adapt-narrative strip. Thing is I can't see a blue being used in colors.less? unless it's something inverted.

 

Thanks

Chris

Picture of Ignacio Cinalli
Re: component theming
by Ignacio Cinalli - Wednesday, 25 January 2017, 12:13 PM
 

The blue is @inverted-background-color with opacity:.5

narrativeStrip.less

And @inverted-background-color is in adapt-defaults.less

adapt-defaults.less

 

 

Picture of Christian Lee
Re: component theming
by Christian Lee - Wednesday, 25 January 2017, 3:15 PM
 

Ignacio, many thanks this now makes sense. as soon as I read opacity, I knew what is was.

The @blue in the custom colors was confusing me.

 

Regards

Chris