Forums

LESS presets

Permalink
Hi,

i figured out the following:

theme/css/presets/default.less
@preset-name: "Orange";
@preset-icon: concrete-icon(#000000, #FFFFFF, #FF0000);
@header-gradient1-color: rgba(255, 87, 34, 0.64);
@header-gradient2-color: rgba(230, 74, 25, 0.45);
@import "../_colors.less";
@brand-primary: @orange;
@brand-success: @green;
@brand-danger: @red;


and

theme/css/presets/blue.less
@preset-name: "Blue";
@preset-icon: concrete-icon(#000000, #FFFFFF, #1565C0);
@header-gradient1-color: rgba(14, 132, 199, 0.64);
@header-gradient2-color: rgba(11, 92, 162, 0.45);
@import "../_colors.less";
@brand-primary: @blue;
@brand-success: @green;
@brand-danger: @red;


when choosing the blue preset in "Customizing Theme" the header gradient changes correctly, but the @brand-primary is still orange.

bug or feature?
sk01
 
hutman replied on at Permalink Reply
hutman
Did you change the _colors.less file to have a blue defined? It could be that it's not finding @blue and therefore falling back to @orange
sk01 replied on at Permalink Reply
sk01
all colors are defined in _colors.less
sk01 replied on at Permalink Reply
sk01
anyone? core-team?
sk01 replied on at Permalink Reply
sk01
*** BUMP ***
Steevb replied on at Permalink Reply
Steevb
You'll need to revisit all files and double check everything. If the colour is not changing then you must have missed something.

Attach files for us to look at if that would help.
sk01 replied on at Permalink Reply 1 Attachment
sk01
created a small test scenario, see attache theme.
install c5 with sample content, install this theme, put a content block into the Header-Area with some text in it.

it even get worse:
the text color is always white - until I change it in the design customization. the different values in the presets are just ignored.
this is - i guess - because I have to declare (for example) @header-color in the iGotStyle.less because otherwise I get an LESS compiling error.
but just give it a try on your own.
sk01 replied on at Permalink Reply
sk01
in v8b6 it doesn't work in the first place (default) but when changing the presets it works.
Remo replied on at Permalink Reply
Remo
I just had to make one small change. Instead of hard coding the variables in iGotStyle.less I've imported defaults.less

@import "mixins.less";
@import "bootstrap.less";
@import "colors.less";
/** Global Styles *************************************************/
/******************************************************************/
// COMMENT OUT THESE DEFINITIONS AND YOU GET AN LESS COMPILING ERROR IN C5
/*
@header-bg-image: "../img/bg2.jpeg";
@primary: @black;
@body-bg: @white;
@header-color: @white;*/
@import "presets/defaults.less";
// -----
.font-source-sans {
  font-family: 'Source Sans Pro', sans-serif;
Viewing 15 lines of 16 lines. View entire code block.


By default the font color is orange and when I change the preset it's blue.
sk01 replied on at Permalink Reply 1 Attachment
sk01
unfortunately no, that didn't do the trick.

I made a new test. this time the cloneamental theme with _colors.less added and only used in the presets.
and now I think I know what the problem is:

when the variable from the preset file is also set in the styles.xml to be modifiable it doesn't work when it's set to a variable itself.

in the attached example let's take @header-background-color which is set also in styles.xml. you can take any color variable from :colors.less - it will never work. but @header-navigation-type-color works with the color variable because it's not available in styles.xml

BUT in the defaults.less the color variables can be used and are working like expected.

In the attached theme I changed several colors in the preset "Night Road"and "Sunrise"(default) to the color variables.