• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2893

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

    July 12, 2014 at 7:19 pm

    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!

    Log in to Reply
    • Brad Dalton says

      July 12, 2014 at 7:43 pm

      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.

      Log in to Reply
  2. Julie says

    May 19, 2014 at 2:48 pm

    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!

    Log in to Reply
    • Brad Dalton says

      May 19, 2014 at 2:57 pm

      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?

      Log in to Reply
      • Julie says

        May 19, 2014 at 3:11 pm

        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 🙂

        Log in to Reply
        • Brad Dalton says

          May 19, 2014 at 3:25 pm

          I have never done that Julie so can’t help on this occasion.

          I suggest you try WordPress Development on the stackexchange network

          Log in to Reply
          • Julie says

            May 19, 2014 at 5:36 pm

            Ok, thanks!

  3. Maaike says

    April 9, 2014 at 2:24 pm

    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.

    Log in to Reply
    • Brad Dalton says

      April 10, 2014 at 10:48 am

      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.

      Log in to Reply
  4. Chad Ritchie says

    January 31, 2014 at 2:26 pm

    Brad,
    Will this custom color function also work on the Sixteen Nine theme and other StudioPress themes?

    Log in to Reply
    • Brad Dalton says

      January 31, 2014 at 2:43 pm

      Yes.

      Log in to Reply
  5. Toyin Afolabi says

    January 14, 2014 at 4:16 pm

    I mean how do I add a banner widget below the secondary menu (nav) on the home page?

    Log in to Reply
  6. Toyin Afolabi says

    January 14, 2014 at 4:06 pm

    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.

    Log in to Reply
  7. Misha Cherniske says

    October 28, 2013 at 3:40 am

    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.

    Log in to Reply
    • Brad Dalton says

      October 28, 2013 at 11:27 am

      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.

      Log in to Reply
  8. Gary says

    August 22, 2013 at 2:44 pm

    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?

    Log in to Reply
    • Brad Dalton says

      August 22, 2013 at 7:11 pm

      Hi Gary

      Should be exactly the same file name, extension type and size as the default.

      Log in to Reply
  9. Shannon says

    June 7, 2013 at 9:16 pm

    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

    Log in to Reply
    • Brad Dalton says

      June 8, 2013 at 5:42 am

      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.

      Log in to Reply
  10. Tammy says

    June 1, 2013 at 11:14 pm

    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?

    Log in to Reply
    • Brad Dalton says

      June 2, 2013 at 3:52 am

      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.

      Log in to Reply
      • Tammy says

        June 9, 2013 at 7:39 pm

        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.

        Log in to Reply
        • Brad Dalton says

          June 10, 2013 at 8:41 am

          Any time Tammy

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce
 

Loading Comments...
 

You must be logged in to post a comment.