Less / preset customization with Elemental instance
Permalink
Hi all,
There is a mystery that i cant figure out myself about adding custom variables to a preset Less file.
For example i wish to add a set of color variables (my 'custom theme' main colors, primary/secondary/.../quaternary) in my custom_preset.less file that i could inject in Less files of the css/build directory or directly in the preset file to use them as value of existing variables from default-preset and dont need to edit each /build/*.less files.
Custom preset file is already set up correctly with an associated custom-preset-font.less, and all the first tweakings are working as i expect if i use my new variables in place of default-preset variables in each /build/*.less.
When i use my new color variables (@mp-primary-color: #FFF;) as a value of existing default variables in my preset file, the values of my custom variables are not taken into account, and the default-preset colors override it.
Here is a piece of code of my custom preset less file :
Ofcourse all caches are Off.
I also disabled editable variables of styles.xml corresponding lines of the replaced color values by my @mp-xx-color, and added my custom colors values to make them accessible from Custom design functions of the dashboard. Here is how it looks :
And here is a working fine example of what i try to achieve, from Anitya theme (i know this theme is a bit outdated, but it is working fine with last 8.3.2, at least this part of the code...):
Anybody can spot what i m doing wrong please ?
There is a mystery that i cant figure out myself about adding custom variables to a preset Less file.
For example i wish to add a set of color variables (my 'custom theme' main colors, primary/secondary/.../quaternary) in my custom_preset.less file that i could inject in Less files of the css/build directory or directly in the preset file to use them as value of existing variables from default-preset and dont need to edit each /build/*.less files.
Custom preset file is already set up correctly with an associated custom-preset-font.less, and all the first tweakings are working as i expect if i use my new variables in place of default-preset variables in each /build/*.less.
When i use my new color variables (@mp-primary-color: #FFF;) as a value of existing default variables in my preset file, the values of my custom variables are not taken into account, and the default-preset colors override it.
Here is a piece of code of my custom preset less file :
@preset-name: "MP Default"; @preset-icon: concrete-icon(#11A2C6, #93DFBE, #E05B31); @preset-fonts-file: "build/fonts/mp-defaults.less"; /* * The sections in this document roughly correspond to our theme style guide. */ // MP Theme Colors @mp-primary-color: #93DFBE; @mp-secondary-color: #aa93df; @mp-tertiary-color: #dfb693; @mp-quaternary-color: #93cbdf; // Global body background @page-background-color: #fff; // Top Header - Website Title */ @header-background-color: @mp-secondary-color; //rgba(218, 236, 241, 0.92); */
Viewing 15 lines of 16 lines. View entire code block.
Ofcourse all caches are Off.
I also disabled editable variables of styles.xml corresponding lines of the replaced color values by my @mp-xx-color, and added my custom colors values to make them accessible from Custom design functions of the dashboard. Here is how it looks :
<?xml version="1.0"?> <styles version="1.0"> <set name="MP Theme Colors"> <style name="Primary color" variable="mp-primary" type="color" /> <style name="Secondary color" variable="mp-secondary" type="color" /> <style name="Tertiary color" variable="mp-tertiary" type="color" /> <style name="Quaternary color" variable="mp-quaternary" type="color" /> </set> <set name="Full Page"> <style name="Page Background" variable="page-background" type="color" /> <style name="Text" variable="body" type="type" /> <style name="Link" variable="body-link" type="color" /> <style name="Link Hover" variable="body-link-hover" type="color" /> <style name="Page Titles" variable="page-title" type="type" /> </set>
Viewing 15 lines of 19 lines. View entire code block.
And here is a working fine example of what i try to achieve, from Anitya theme (i know this theme is a bit outdated, but it is working fine with last 8.3.2, at least this part of the code...):
<?xml version="1.0"?> <styles version="1.0"> <set name="MP Theme Colors"> <style name="Primary color" variable="mp-primary" type="color" /> <style name="Secondary color" variable="mp-secondary" type="color" /> <style name="Tertiary color" variable="mp-tertiary" type="color" /> <style name="Quaternary color" variable="mp-quaternary" type="color" /> </set> <set name="Full Page"> <style name="Page Background" variable="page-background" type="color" /> <style name="Text" variable="body" type="type" /> <style name="Link" variable="body-link" type="color" /> <style name="Link Hover" variable="body-link-hover" type="color" /> <style name="Page Titles" variable="page-title" type="type" /> </set>
Viewing 15 lines of 34 lines. View entire code block.
Anybody can spot what i m doing wrong please ?
The solution is to edit main.less to import the custom-preset.less directly by default (it was setup to import the default preset), instead of only applying the custom preset to entire site from custom design section of the dashboard.
I guess copy/add new variables to default preset file (as in custom-preset.less) do the job too, and work even we dont edit main.less (keeping the default preset imported) and just select custom preset from dashboard custom design.