Hi @danielwadman,
The CSS variables are output on the :root element in the Chaplin style.css file (and overwritten by inline CSS in the head if custom colors are set in the Customizer), so you should be able to use them in your child theme stylesheet. You can see the list of available CSS variables in the code inspector in your browser.
(The stylesheet in Chaplin doesn’t use those variables though, so you won’t be able to modify the theme colors by changing the variables.)
— Anders
Hi Anders,
Thankyou for the speedy reply. Ok I see whats happening now. I thought the colors set in the customizer where being saved to the style sheet but like you say they are outputted as an inline style in the head not in a css file. I’m trying make those colors which are set in the customizer available for use in another app but that looks like it could be tricky. What are the variables in the css file used for? is it just default values for initial site set up?
Many thanks,
Daniel
Hi @danielwadman,
The colors set in the Customizer are also set as CSS variables, so you can use them by using the CSS variables in your child theme stylesheet.
The CSS variables are mostly there to make it easier for child themes to use the colors set in the Customizer in child theme stylesheets. Chaplin itself supports Internet Explorer 11, so its stylesheet doesn’t use the CSS variables.
— Anders
Ok that makes sense, is there anyway that your aware of to be able to get the variables to actually be set in the child theme stylesheet? Going forward I’d like to have multiple sites and as the colours aren’t databased having a child theme for each site could work but would rely on having the variables set in each child stylesheet. Thanks for the help so far.
The colors in the parent theme stylesheet are hard coded, so you can’t change those by setting CSS variables in the child theme. You can filter the values of the get_theme_mod() settings to specify the colors in the functions.php file in your child theme, though – that will change the colors in the parent theme as well.
For example, by adding this code to the functions.php file in the child theme:
add_filter( 'theme_mod_chaplin_accent_color', function() {
return '#FF0000';
} );
…you’ll filter the accent color to be #FF0000 instead of the default accent color in Chaplin (or whatever value it’s set to in the Customizer). Repeat for each Customizer setting for the colors in Chaplin, listed below:
background_color
chaplin_accent_color
chaplin_primary_text_color
chaplin_headings_text_color
chaplin_buttons_background_color
chaplin_buttons_text_color
chaplin_secondary_text_color
chaplin_border_color
chaplin_light_background_color
— Anders
-
This reply was modified 4 years, 9 months ago by
Anders Norén.
Many thanks it’s really helpful, one last question.
So if a custom colour is set in the customizer it prints it out in the head area as an inline style (over writing the css variables), so if a custom colour is set, then it won’t be saved in the css anywhere and be available to use elsewhere?
@danielwadman No problem! The variables I listed in the previous post are updated with the values set in the Customizer (or filtered into use with a PHP function), so those can be used in the CSS.
Ahh awesome, ok thanks for your help
