Customizing colors in Executive Pro

[captaindigital]

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

[Brad Dalton]

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:

/* 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;
}

Then add the new color to the PHP code in your child themes functions.php file on Line 51 so it looks like this:

//* 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' ),
) );

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

---

Tutorials for StudioPress Themes.

[captaindigital]

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…”

[captaindigital]

<bump>

Could use some help here...<crickets>....

---

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

[adamridgway]

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

[adamridgway]

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.

[jhguynn]

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.

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes.

[jhguynn]

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.

[Brad Dalton]

It is the color for the nav menu text.

---

Tutorials for StudioPress Themes.

[Author]

Posts