Customizing colors in Executive Pro

Community Forums Forums Design Tips and Tricks Customizing colors in Executive Pro

This topic is: not resolved

This topic contains 9 replies, has 4 voices, and was last updated by  braddalton 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #63423

    captaindigital
    Participant
    Post count: 6

    While there are a nice selection of color styles pre-configured in Executive Pro, none of them work with the corporate color palette for the site I’m designing. I’ve copied the CSS code for the Executive Pro brown, and tried modifying it – but no luck. What do I need to do to get the color styles customized?

    Brad


    Brad Kozak
    “it seemed like a good idea at the time…”

    http://www.firstshreveport.org
    #63429

    braddalton
    Participant
    Post count: 10217

    Change the color values in this code and add it before the Responsive Design CSS near the end of your child themes style.css file:
    [css]
    /* Executive Pro Custom
    ——————————————— */

    .executive-pro-custom a,
    .executive-pro-custom .entry-title a:hover,
    .executive-pro-custom .footer-widgets .entry-title a:hover {
    color: #a68064;
    }

    .executive-pro-custom .genesis-nav-menu a {
    color: #666;
    }

    .executive-pro-custom .entry-title a,
    .executive-pro-custom .site-title a,
    .executive-pro-custom .site-title a:hover,
    .executive-pro-custom .site-footer a {
    color: #222;
    }

    .executive-pro-custom .content .entry-header .entry-meta .entry-comments-link a,
    .executive-pro-custom .footer-widgets .entry-title a,
    .executive-pro-custom .genesis-nav-menu .current-menu-item > a,
    .executive-pro-custom .genesis-nav-menu a:active,
    .executive-pro-custom a.button {
    color: #fff;
    }

    .executive-pro-custom .comment-header .comment-meta a,
    .executive-pro-custom .comment-metadata a {
    color: #bbb;
    }

    .executive-pro-custom .enews-widget input[type="submit"],
    .executive-pro-custom .content .entry-header .entry-meta .entry-comments-link,
    .executive-pro-custom .genesis-nav-menu .current-menu-item > a,
    .executive-pro-custom .archive-pagination li a,
    .executive-pro-custom a.button,
    .executive-pro-custom button,
    .executive-pro-custom input[type="button"],
    .executive-pro-custom input[type="reset"],
    .executive-pro-custom input[type="submit"] {
    background-color: #a68064;
    }

    .executive-pro-custom .archive-pagination li a:hover,
    .executive-pro-custom .archive-pagination li.active a,
    .executive-pro-custom a:hover.button,
    .executive-pro-custom button:hover,
    .executive-pro-custom input:hover[type="button"],
    .executive-pro-custom input:hover[type="reset"],
    .executive-pro-custom input:hover[type="submit"] {
    background-color: #b2886b;
    }
    [/css]

    Then add the new color to the PHP code in your child themes functions.php file on Line 51 so it looks like this:
    [php]
    //* 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-pro-custom’ => __( ‘Executive Pro Custom’, ‘executive’ ),
    ) );
    [/php]

    Then go to Genesis > Theme Settings > Color Style and select Custom from the drop down menu and save the changes.


    #63520

    captaindigital
    Participant
    Post count: 6

    Seems logical. However, the devil’s in the details. I’ve modified both files. Uploaded them. Even cleared the cache. Several times. No joy. In fact, No matter what values I add in the custom section, it would seem all that will display is the default colors – unless I pick one of the other stock sets.

    I know it must be something I’ve overlooked, but I’m stumped.

    Brad


    Brad Kozak
    “it seemed like a good idea at the time…”

    #63913

    captaindigital
    Participant
    Post count: 6

    <bump>

    Could use some help here…<crickets>….


    Brad Kozak
    “it seemed like a good idea at the time…”

    #64042

    adamridgway
    Participant
    Post count: 4

    I have had the same issue making these same changes in my Metro Pro theme. Any help on this would be appreciated.

    #64048

    adamridgway
    Participant
    Post count: 4

    I initially had problems with the above instructions, but you just need to make sure that you make all the appropriate changes. Mine did not work at first because I did not rename the color as well as change the color codes.

    #65639

    jhguynn
    Participant
    Post count: 223

    Brad:

    Thanks for this tip, it saved me some time. After adding the code you suggest, I found I still needed to modify the following items directly in the css:

    .genesis-nav-menu {
    background-color: #f2f2f2;
    clear: both;
    color: #666;

    Since I had changed my entire site’s background color to white, it made sense to change the navigation background-color to white, and change the hover color to gray. Looks much better that way.

    But what effect does the css value ‘color: #666;’ have? Color of what? Text? I don’t see where it’s effect is seen.

    • This reply was modified 1 year ago by  jhguynn.
    • This reply was modified 1 year ago by  jhguynn.
    #65640

    braddalton
    Participant
    Post count: 10217

    You could use a tool Like Firebug or Chrome Dev tools on the front end to find the classes you want to style and add them at the end of your child themes style.css file.

    You can change any code you like but its best to make the changes at the end of the file you you know what has been changed.

    The above code adds another color option which you can do with any theme.


    #65642

    jhguynn
    Participant
    Post count: 223

    Brad, wow you’re fast! While you were replying, I was editing my question. Read the modification above, or here it is again:

    Thanks for this tip, it saved me some time. After adding the code you suggest, I found I still needed to modify the following items directly in the css:

    .genesis-nav-menu {
    background-color: #f2f2f2;
    clear: both;
    color: #666;

    Since I had changed my entire site’s background color to white, it made sense to change the navigation background-color to white, and change the hover color to gray. Looks much better that way.

    But what effect does the css value ‘color: #666;’ have? Color of what? Text? I don’t see where it’s effect is seen.

    #65646

    braddalton
    Participant
    Post count: 10217

    It is the color for the nav menu text.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.