Many Genesis Framework themes come with several color options. Others may not have any color options. If you need to add custom color styles in Genesis, you can do so rather easily.
First, we need to list the color options available to your theme. This adds the style selector menu to your Genesis > Theme Settings page.
add_theme_support( 'genesis-style-selector', array( 'theme-name-blue' => __( 'Blue', 'genesis' ), 'theme-name-pink' => __( 'Pink', 'genesis' ), 'theme-name-orange' => __( 'Orange', 'genesis' ), 'theme-name-yellow' => __( 'Yellow', 'genesis' ) ) ); |
If you choose the Blue color style option, your theme will get a .theme-name-blue class applied to the body.
Finally, you will need to target the CSS specific to each custom color style in Genesis.
For example, if you wanted to change the style of any links on the page using the Blue color style option, you could use something like this:
.theme-name-blue a { color: #87CEFA; |
The same could be done for any other existing element on your page.
Customizing an Existing Theme
Many Genesis themes already have much of the code above already in place. If you are editing a child theme, you can simply add your own style selector to the add_theme_support function.
add_theme_support( 'genesis-style-selector', array( 'theme-name-blue' => __( 'Blue', 'genesis' ), 'theme-name-pink' => __( 'Pink', 'genesis' ), 'theme-name-orange' => __( 'Orange', 'genesis' ), 'theme-name-yellow' => __( 'Yellow', 'genesis' ), 'theme-name-custom' => __( 'My Custom Color', 'genesis' ) ) ); |
Then in your Genesis child theme’s style.css file, find the section labeled “Theme Colors”, or something similar.
Chances are the theme author already picked out most of the classes that should be styled with a certain color so the hard work is already done for you. You can copy and paste one of the existing color style sections and modify those colors to fit your own custom style’s needs.
/* Theme Name Blue --------------------------------------------- */ .theme-name-blue .content .entry-title a:hover, .theme-name-blue .content #genesis-responsive-slider a, .theme-name-blue .content #genesis-responsive-slider h2 a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu .current-menu-item > a, .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu a:hover, .theme-name-blue .nav-secondary .genesis-nav-menu li:hover > a, .theme-name-blue .widget-title, .theme-name-blue a { color: #2483d0; } .theme-name-blue a:hover { color: #1e6dad; } .theme-name-blue .content #genesis-responsive-slider a:hover, .theme-name-blue .content #genesis-responsive-slider h2 a, .theme-name-blue .footer-widgets .widget-title, .theme-name-blue .genesis-nav-menu a, .theme-name-blue .site-footer a:hover, .theme-name-blue .site-header .widget-title, .theme-name-blue .site-title a, .theme-name-blue .site-title a:hover { color: #fff; } .theme-name-blue .site-footer a { color: #666; } .theme-name-blue .genesis-nav-menu .sub-menu a, .theme-name-blue .home-bottom .widget-title { color: #333; } .theme-name-blue .genesis-nav-menu a:hover, .theme-name-blue .genesis-nav-menu .current-menu-item > a, .theme-name-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000; } .theme-name-blue .archive-pagination .active a, .theme-name-blue .archive-pagination li a:hover, .theme-name-blue .button, .theme-name-blue .nav-primary, .theme-name-blue button, .theme-name-blue input[type="button"], .theme-name-blue input[type="reset"], .theme-name-blue input[type="submit"] { background-color: #2483d0; color: #fff; } .theme-name-blue .button:hover, .theme-name-blue .site-header, .theme-name-blue button:hover, .theme-name-blue input:hover[type="button"], .theme-name-blue input:hover[type="reset"], .theme-name-blue input:hover[type="submit"] { background-color: #1e6dad; color: #fff; } .theme-name-blue .sub-footer { background-color: #edf3f4; } .theme-name-blue, .theme-name-blue .footer-widgets, .theme-name-blue .site-footer { background-color: #222e37; } .theme-name-blue .author-box, .theme-name-blue .nav-secondary .wrap, .theme-name-blue .sidebar .widget { background-color: #17222b; } .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu, .theme-name-blue .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #17222b; border-color: #2d3b45; color: #fff; } .theme-name-blue .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; } /* Your Custom Style --------------------------------------------- */ .theme-name-custom .content .entry-title a:hover, .theme-name-custom .content #genesis-responsive-slider a, .theme-name-custom .content #genesis-responsive-slider h2 a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu .current-menu-item > a, .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu a:hover, .theme-name-custom .nav-secondary .genesis-nav-menu li:hover > a, .theme-name-custom .widget-title, .theme-name-custom a { color: #006400; } .theme-name-custom a:hover { color: #9acd32; } .theme-name-custom .content #genesis-responsive-slider a:hover, .theme-name-custom .content #genesis-responsive-slider h2 a, .theme-name-custom .footer-widgets .widget-title, .theme-name-custom .genesis-nav-menu a, .theme-name-custom .site-footer a:hover, .theme-name-custom .site-header .widget-title, .theme-name-custom .site-title a, .theme-name-custom .site-title a:hover { color: #fff; } .theme-name-custom .site-footer a { color: #666; } .theme-name-custom .genesis-nav-menu .sub-menu a, .theme-name-custom .home-bottom .widget-title { color: #333; } .theme-name-custom .genesis-nav-menu a:hover, .theme-name-custom .genesis-nav-menu .current-menu-item > a, .theme-name-custom .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000; } .theme-name-custom .archive-pagination .active a, .theme-name-custom .archive-pagination li a:hover, .theme-name-custom .button, .theme-name-custom .nav-primary, .theme-name-custom button, .theme-name-custom input[type="button"], .theme-name-custom input[type="reset"], .theme-name-custom input[type="submit"] { background-color: #006400; color: #fff; } .theme-name-custom .button:hover, .theme-name-custom .site-header, .theme-name-custom button:hover, .theme-name-custom input:hover[type="button"], .theme-name-custom input:hover[type="reset"], .theme-name-custom input:hover[type="submit"] { background-color: #9acd32; color: #fff; } .theme-name-custom .sub-footer { background-color: #edf3f4; } .theme-name-custom, .theme-name-custom .footer-widgets, .theme-name-custom .site-footer { background-color: #223722; } .theme-name-custom .author-box, .theme-name-custom .nav-secondary .wrap, .theme-name-custom .sidebar .widget { background-color: #192b17; } .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu, .theme-name-custom .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #192b17; border-color: #3a452d; color: #fff; } .theme-name-custom .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; } |
Leave a Reply