How to use Themeco Pro template colors anywhere on your site

Michael BourneUpdated:

The new pro theme by Themeco has many amazing features. One of which is the colours templates. This allows you to set your branding colours in the Pro editor, and re-use them in header and footer elements.

But what about outside of headers and footers? Well, at the time of this post, we still don’t have access to them in the page builder (Cornerstone) elements. So I went ahead and wrote a script that will help us out.

The basis of this snippet is simple. It will take your colour templates and convert them into two distinct items: a CSS class for the colour, and a CSS variable that you can use to apply the colour to multiple properties and classes. CSS Variables are pretty amazing, but there is one caveat. Here is there current browser support:

Source: http://caniuse.com/#feat=css-variables

Your first step, of course, is to create your colour templates.

Then, add this magical PHP to your child theme’s functions.php file:

/**
 * Get theme colors from Pro and turn them into classes and CSS variables
 * Author: Michael Bourne
 */
$themecolors = get_option('cornerstone_color_items');
if($themecolors) {

  $css = '<style type="text/css" id="themecolours">';
  $colors = json_decode( stripslashes( $themecolors ), true );
  $count = count($colors);

  for($i = 0; $i <= $count-1; $i++){

    $name = 'xtt-' . preg_replace('/[^a-z]/', "", strtolower($colors[$i]['title']));
    $css .= ':root { --' . $name . ': ' . $colors[$i]['value'] . '; } ';
    $css .= '.' . $name . ' { color: ' . $colors[$i]['value'] . '; } ';
    // you may need to add an !important to the rule to override X settings, like so:
    // $css .= '.' . $name . ' { color: ' . $colors[$i]['value'] . '!important; } ';
  }

  $css .= '</style>';

  function colors_css() {
    global $css;
    echo $css;
  }
  add_action('wp_head', 'colors_css');

}

What you will see is that in the head of your document, there is now an inline stylesheet that looks like this:

How do you use these special colour template classes and variables? Anywhere you would with normal CSS, whether that’s in the customizer or even inside Cornerstone element settings!

.my-special-class { 
  background-color: #000; // this is a fallback for IE 11!
  background-color: var(--xtt-brandprimary);
}

Have a question or a comment about this article? Click here!
About the Author

Michael Bourne

Facebook

Hey, I'm Michael, and I've been making websites since the mid 90s! These days I focus on Wordpress and would call myself quite handy in PHP, JS, and CSS. Outside of coding and web design, I'm quite fond of craft beer and backpacking around the world.

Share this Tip!

There are 4 comments

Your email address will not be published. Required fields are marked *