WP SITES

2893

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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?

Reader Interactions

Comments

  1. Brad,

    I’m having a lot of trouble editing my style.css. I’m using Genesis with the “Agency Pro” child theme. I’m editing the child theme style.css.

    I didn’t make any changes to the functions.php file because my theme has a Red color option, and I’m trying to replace the current red color, #d7c603, with the new red color I’d like to use, #920132.

    So, I figure I would just go into the style.css file, “find and replace all” the old color with the new color. When I do this, absolutely nothing changes. Any advice?

    Thank you!

    • Hello Chris

      Use Notepad++ or a similar text editor to search, find and replace the hex color codes.

      You may also need to clear any server side, plugin and/or browser caching.

  2. Hi! I was able to successfully add color options but I am unsure how to display the different options on separate pages to show others (ie for a premade theme). Is there a page template or something I should use? Thanks!

    • Are you referring to setting up a demo of your theme?

      Is this for theme Development or are you referring to the color options settings?

      • Yep – I am referring to setting up a demo. It’s for theme development. I have the color options all set up. I just want to set a link to display the different color options. Does that make sense? Just like you’d click through on any other demo — I am just unsure how to set it up on my own. I’m sure it’s simple… I just don’t know how 🙂

  3. Hi Brad, thanks for the info. However, I created the custom color scheme, but I can’t find where to change the colors to the ones I want. I have Genesis, child theme Lifestyle Pro.

  6. I’m building a site using the Genesis framework and Focus Pro child theme. Please tell me how I can make the site width 960px, and insert a banner below the nav (secondary menu) in the home page.

  7. Hey. I tried this recently and I couldn’t find the code you show in the child themes functions.php file. Maybe they updated the code? I’m trying to edit the color on “Jane” theme by ‘Darn cute design” Thanks.

  8. Hi Brad, thanks for the tutorial. However, I’ve been trying to change the 960 px nav bar color of the associate child theme for the last day. I downloaded the current image into photoshop change the color saved it as nav1.png and used filezilla to place the new png file in the proper associate folder. What am i doing wrong?

  9. How can I make the home – middle widget area of executive theme full width? It is in the structural wrap and it limits it to 1140px. I have header, nav, inner, footer-widgets, and footer 100%. But home middle is still constrained. Please help! I am banging my head!
    Thanks

    • Hi Shannon

      Good question which i don’t have the answer for but want to know myself.

      I would post this on the SP forums as there’s some very good people there that specialize in CSS whereas i’m more of a PHP guy.

  10. Thanks Brad. I’m strong with html & css and new to WordPress. The site I’m working on now is built on a Genesis framework with the Executive child theme. I’d like to do exactly what you’re describing here but I’m worried that if the child theme is ever upgraded, the custom css code will be lost.
    Question 1 – is my worry based in fact?
    Question 2 – if answer to Question 1 is “yes”, then what is an alternative? Other than not ever upgrading the child theme?

    • Hello Tammy.

      Child themes are rarely updated however with the switch to HTML 5, this may change.

      Personally, i think its best to keep all your modifications in your child themes files and keep a local copy.

      This way you can simply copy and paste the custom coding into your files after updating the child theme. Clearly, adding your custom coding to the end of the file makes this far easier than changing the existing coding as you may forget which code you changed and where that code is located.

Leave a Reply