Change Color of Genesis Child Theme

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.

New Color Style

 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.

Theme Colors

 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.

Find and Replace

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.

Custom Theme Color

Conclusion

Pretty easy to change your themes colors when using a Genesis child theme don’t you think?