Join my tribe!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions

Comments

  1. Added to Pocket for future reference – good stuff! And YAY re: the new theme! I’d love to get one done eventually… (adds to list of things I’ll never have time for)

  2. Carrie, can you take a look and see what I might have done wrong. I followed your instructions but it does not work.

    //*Add color switcher to menu bar
    add_filter(‘body_class’, ‘string_body_class’);
    function string_body_class( $classes ) {
    if ( isset( $_GET[‘color’] ) ) :
    $classes[] = ‘outreach-pro-blue’ . sanitize_html_class( $_GET[‘color’] );
    $classes[] = ‘outreach-pro-green’ . sanitize_html_class( $_GET[‘color’] );
    $classes[] = ‘outreach-pro-purple’ . sanitize_html_class( $_GET[‘color’] );
    $classes[] = ‘outreach-pro-orange’ . sanitize_html_class( $_GET[‘color’] );
    $classes[] = ‘outreach-pro-red’ . sanitize_html_class( $_GET[‘color’] );
    endif;

    return $classes;
    }

  3. Awesome Carrie. This is something I’ve been meaning to investigate for some time now but never got around to doing for one reason or another. Thanks to your clear and concise instructions I’ve finally incorporated it into my own theme demos. 🙂

  4. Hi Carrie, I’m working on my first child theme and want it to add this amazing option for a demo. I have my css colors done.

    On STEP 1 I get confuse, Where should this code go functions.php?
    This is what I have and it show on the theme settings.

    ============
    /** Add support for color options */
    add_theme_support( ‘genesis-style-selector’, array( ‘kassity-pink’ => ‘Pink’,’kassity-black’ => ‘Black’,’kassity-teal’ => ‘Teal’, ‘kassity-green’ => ‘Green’, ‘kassity-orange’ => ‘Orange’,’theme-customexample’ => ‘Custom Example’ ) );
    ==========

    Any help, tip is very much appreciated.
    Best Regards!

  5. Hello – I apply the code but is not working for me, please advise what I’m doing wrong. here is what I add to the Funtions.php:
    ====================
    //*Add color switcher to menu bar
    add_filter(‘body_class’, ‘string_body_class’);
    function string_body_class( $classes ) {
    if ( isset( $_GET[‘color’] ) ) :
    $classes[] = ‘kassity-pink’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-orange’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-green’ . sanitize_html_class( $_GET[‘color’]);
    $classes[] = ‘kassity-black’ . sanitize_html_class( $_GET[‘color’]);
    endif;

    return $classes;
    }
    ===============================
    Thank you!

  6. Carrie, this is an OMG-Epic moment for me! after 5 days without sleep, I finally got it, just a minor adjustment to my link colors but over all is working perfectly. Thank you for you direction, I’m following you on twitter and bookmark your page. You are on my top 5!

    Best Regards- Lisa

  7. Hi Carrie

    Love your posts and tips’n’tricks. Just as a variation on this post. I recently created a theme called ENVY (http://envy.krolyn.com) and used this jQuery code which can simply be added to the wp_head() or wp_footer() in the Genesis Theme Settings. The menu is treated the same way. However, the code is extended to include media that you might want changed with the alternative styles.

    In the sample below, the slider images change between color styles. I’ve named the default images slider1-default.jpg, slider2-default.jpg and other images slider1-[color].jpg and slider2-[color].jpg – of course, you could alter the sample code below to accommodate any kind of image or media.

    jQuery(document).ready(function($) {
    function getUrlVar(key) {
    var result = new RegExp(key + “=([^&]*)”, “i”).exec(window.location.search);
    return result && unescape(result[1]) || “”;
    }
    var color = getUrlVar(‘color’);
    if(window.location.search) {
    $(‘.slide-image img’).each(function(){
    var $this = $(this)
    $this.attr(‘src’,$this.attr(‘src’).replace(‘default’,color));
    });
    $(“body”).addClass(“envy-” + color);
    }
    });

  8. First, curiosity got the best of me and I did ‘enjoy these pictures.’ 😉 So funny!
    Second, I attempted to implement this code in my functions.php of the Outreach Pro theme and could not make it work. Thought I’d better jot you a not before I gave up and went to attempt my own ‘Sleep-Fu.’

    I copied the code as it was and my functions.php file complained of an extra “<" then I tried just the lines beneath the "<?php…" and that didn't work either.

    Oh, and I did change the theme-prefix to outreach- and outreach-pro-. Neither worked.

    I know it's going to be something simple. Always is.

    Thanks for your time.

  9. Hello Carrie, I notice you did not state were to place the PHP filter. Thanks so much for any help with this.

    <?php //remove opening tag

    add_filter('body_class', 'string_body_class');
    function string_body_class( $classes ) {
    if ( isset( $_GET['color'] ) ) :
    $classes[] = 'theme-prefix-' . sanitize_html_class( $_GET['color'] );
    endif;

    return $classes;
    }

      • Hello Carrie thanks so much for the responce, I’m having a problem getting it to work correctly.

        Here is what I’ve added to my function also to make this work. Please let me know what I’m doing wrong. I try to change the color options from my demo menu but no go. I’m using the Parallax-Pro

        //*Add color switcher to menu bar
        add_filter(‘body_class’, ‘string_body_class’);
        function string_body_class( $classes ) {
        if ( isset( $_GET[‘color’] ) ) :
        $classes[] = ‘parallax-pro-blue’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-green’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-orange’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘parallax-pro-pink’ . sanitize_html_class( $_GET[‘color’] );
        endif;

        return $classes;
        }

        Thanks so much Rob

      • Hello Carrie thanks for the share and I hope I can get this to work for my demo.

        Here’s what I’ve added to my function. Maybe I’m missing something or leaving a bracket out for the prefix to get it to work

        add_filter(‘body_class’, ‘string_body_class’);
        function string_body_class( $classes ) {
        if ( isset( $_GET[‘color’] ) ) :
        $classes[] = ‘theme-prefix-blue’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-green’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-orange’ . sanitize_html_class( $_GET[‘color’] );
        $classes[] = ‘theme-prefix-pink’ . sanitize_html_class( $_GET[‘color’] );
        endif;

        return $classes;
        }

        I have tryed changing things around to get it working but no luck.

        I added the URL for each color option in the menu as follow

        Blue
        http://mydomain,com/demosite/?color=blue

        Orange
        http://mydomain,com/demosite/?color=orange

        Pink
        http://mydomain,com/demosite/?color=pink

        Green
        http://mydomain,com/demosite/?color=green

        Thank for any help on this matter.

  10. Carrie! Works like a charm on Centric Pro and Parallax Pro so far. Hey! I also tried it in links to pages, where for instance, I wanted a particular page to be blue, I added the ?color=blue to the end of the URL referring to that page. Fun! Changes the whole look of the site depending on the Category, topic or whatever I’ve linked to in the URL. Thank you very much!

  11. I placed just this part of Carrie’s instruction in my functions.php file:

    add_filter(‘body_class’, ‘string_body_class’);
    function string_body_class( $classes ) {
    if ( isset( $_GET[‘color’] ) ) :
    $classes[] = ‘parallax-pro-‘ . sanitize_html_class( $_GET[‘color’] );
    endif;

    return $classes;
    }

    Then, I created menu items via the Appearance > Menus > Links section of the Dashboard, concluding each link with whatever color I wanted. Essentially, whenever someone clicks a menu item, it changes the whole site. I’m going to work on inserting images via the ‘color’ sections of the style.css menu and see if they will change per menu item also.

    Carrie, you created a monster. 😉 Fun, so far.

      • Hey Carrie,

        Finally in front of computer again and getting to play a bit with the code you supplied. I found some creative ways to utilize the code to affect the entire site. Thought you might like it, too.

        Applying this code to the bottom of the StudioPress Parallax Pro style.css, I was able to affect the entire site when users clicked a link that ended in a ?color=… effectively customizing their ministry, department, category, or whatever page.

        I keep a copy of my changes in a private post just in case I have to update the theme. Then, I can reapply the code to the bottom of the updated style.css.

        Thank you again, for the code. Lots of fun!

        /* Added to customize the look of the theme */

        /* Decrease padding from 200px to 100px */
        .home-even,
        .home-odd {
        padding: 100px 0 100px !important;
        }

        /* Change default appearance of a few settings */
        #genesis-responsive-slider {
        background-color: #000 !important;
        border: 0 !important;
        }

        .site-header {
        background: rgba(0, 0, 0, 0.85) !important;
        }

        .genesis-nav-menu .sub-menu a {
        background: rgba(0, 0, 0, 0.85) !important;
        }

        /* Change blue appearance of a few settings */

        .parallax-pro-blue .site-header {
        background: rgba(68, 172, 232, 0.85) !important;
        }
        .parallax-pro-blue .genesis-nav-menu .sub-menu a {
        background: rgba(68, 172, 232, 0.85) !important;
        }
        .parallax-pro-blue #genesis-responsive-slider {
        background-color: #44ace8 !important;
        border: 0 !important;
        }

        /* Change green appearance of a few settings */

        .parallax-pro-green .site-header {
        background: rgba(53, 195, 121, 0.85) !important;
        }
        .parallax-pro-green .genesis-nav-menu .sub-menu a {
        background: rgba(53, 195, 121, 0.85) !important;
        }
        .parallax-pro-green #genesis-responsive-slider {
        background-color: #35c379 !important;
        border: 0 !important;
        }

        /* Change green appearance of a few settings */

        .parallax-pro-orange .site-header {
        background: rgba(229, 140, 41, 0.85) !important;
        }
        .parallax-pro-orange .genesis-nav-menu .sub-menu a {
        background: rgba(229, 140, 41, 0.85) !important;
        }
        .parallax-pro-orange #genesis-responsive-slider {
        background-color: #e58c29 !important;
        border: 0 !important;
        }

        /* Change pink appearance of a few settings */

        .parallax-pro-pink .site-header {
        background: rgba(203, 64, 130, 0.85) !important;
        }

        .parallax-pro-pink .genesis-nav-menu .sub-menu a {
        background: rgba(203, 64, 130, 0.85) !important;
        }
        .parallax-pro-pink #genesis-responsive-slider {
        background-color: #cb4082 !important;
        border: 0 !important;
        }

        Oh! I have not found the piece to affect the text color yet so it blends with the background in the header and nav menu. Will play again later tonight I hope and figure that out, unless you know which one it might be.

        Thanks again. I really think this will benefit the user experience on the site.

  12. Hi Carrie,

    Currently building my very first website (using studiopress parallal-pro) where I have a menu located in my .site-header ( right header widget) and have finalized the creation to have one of its menu items receive “button” status. This is done with padding and radius border using a different color. All is done, button is in place, except color scheme offered by this child theme prevents me from changing the hover font color whenever the cursor is pointed over this .css button.

    My request for help is to remove the whole color scheme from my style.css and thereby allowing me to continue with my vetted code to customize the hover font color for this lone button.

    Up to this point, I have been using my custom.css stylesheet which overrides the theme’s style.css stylesheet allowing me not to taint the theme’s .css file.

    Carrie, do you know how to disable the color scheme in parallax-pro to allow me to finalize .css to this button’s hover font?

    Many thanks,
    jh

  13. Thank you so much for this! It works perfectly. Do you have a code like this but one that showcases the Page Layouts instead of colors? Thanks.

    • That’s a really interesting thought. You could certainly pass in the body class Genesis uses for each page layout (i.e. full-width-content for Full Width), but then there’s the issue of what happens if you set a page display full-width with that body class hijack, but there’s a sidebar on the page? You’d need to hide that.

      Anyhow, it could be done, but probably 100x easier just to create pages with those three or four layouts and link to those.

  14. Your post is still getting traction! Thanks for sharing this info! I have incorporated it into a demo site that I am using to let clients see how things work. Awesome!

    I do see that the color goes back to the default any time you change the page. Any way to set it and forget it? That is, set a color to RED via the menu, change pages, and still be using the RED color palette.

    Thanks again! You Rock!
    Paul.

Trackbacks

Leave a Reply