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.

/** Create additional color style options */
add_theme_support( 'genesis-style-selector', array(
'executive-brown'     =>    __( 'Brown', 'executive' ),
'executive-green'     =>    __( 'Green', 'executive' ),
'executive-orange'     =>    __( 'Orange', 'executive' ),
'executive-purple'     =>    __( 'Purple', 'executive' ),
'executive-red'     =>    __( 'Red', 'executive' ),
'executive-teal'     =>    __( '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?

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Chris says

    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!

    • Brad Dalton says

      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. Julie says

    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!

    • Brad Dalton says

      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?

      • Julie says

        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. Maaike says

    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.

    • Brad Dalton says

      style.css file
      Theme Colors
      Line 1434

      Copy one color and change the names and color codes to match you you have in your PHP function.

  4. Toyin Afolabi says

    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.

  5. Misha Cherniske says

    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.

    • Brad Dalton says

      I don’t have a copy of that theme because its not a StudioPress theme.

      I would ask the developer who should provide support for their themes.

  6. Gary says

    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?

  7. Shannon says

    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

    • Brad Dalton says

      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.

  8. Tammy says

    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?

    • Brad Dalton says

      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.

      • Tammy says

        Okay Brad, I’m sold. I’ve copied the child theme style.css and saved it locally, added my custom code field to the php file and made the changes to the style sheet. Thanks again for the great post and instructions. Easy peasy.

Ask a Question