Ever found a great theme but don’t like the color.
Its not easy finding a high quality theme which is coded using industry best practice.
Once you do, you might have your mind set on a color scheme which you want to integrate into your child theme.
Its pretty easy if the theme you’ve found is built on a top quality theme framework.
All you need to do is:
- Register the new color in your child themes functions.php file
- Copy existing color code and change the hex codes in your child themes style.css file
Another way would be to simply change the color codes on an existing color which you don’t plan to use.
Register Custom Color
Add another line to the existing colors already included in your child themes functions.php file.
//* Add support for additional color style options
add_theme_support( 'genesis-style-selector', array(
'executive-pro-brown' => __( 'Executive Pro Brown', 'executive' ),
'executive-pro-green' => __( 'Executive Pro Green', 'executive' ),
'executive-pro-orange' => __( 'Executive Pro Orange', 'executive' ),
'executive-pro-purple' => __( 'Executive Pro Purple', 'executive' ),
'executive-pro-red' => __( 'Executive Pro Red', 'executive' ),
'executive-pro-teal' => __( 'Executive Pro Teal', 'executive' ),
'executive-custom' => __( 'Custom', 'executive' ),
) );This will add the new Custom color style to the drop down menu in your Genesis theme settings.
Copy Color Code
Copy the existing code for one of your color styles in your child theme’s style.css file.
You’ll find a heap of CSS code for each color at the end of your child themes style.css file for each color.
Simply copy one of the color code blocks.
Find & Replace Color
The next step is to open you child theme’s style.css file, go to Search > Find > type in the existing color you want to replace (Find what:) and replace all instances of the old color with your new color.(example: executive-custom).
This should match the new color you registered in your child themes functions.php file.
You can now edit the CSS code for your custom color with your own hex color codes.
Here’s an example of part of the code which determines one of the color options for your theme.
You’ll generally find this code near the end of your child themes style.css file.
Conclusion
Pretty easy to change your themes colors when using a Genesis child theme don’t you think?
Leave a Reply
You must be logged in to post a comment.