Change Metro Theme Colors

[SiegerVinnare]

Hi there,

I am currently using the orange color scheme for the metro theme but I find the orange almost looks more of a pink. I would like to make it a tad darker. Where would I go to change the link colors and button colors? I already know which color I want it to be so I'm hoping I can just plug that color into a few places on the style sheet and be done with it. Just wondering where those places are?

Any help is much appreciated!

Here is a link to my test site incase it is needed: http://bit.ly/VCDQm7

[Brad Dalton]

You can change an existing color or copy the CSS code for an existing color and change the values for the color properties in the style.css file:

/* 13c - Metro Pink ----------- */

.metro-pink a,
.metro-pink .genesis-nav-menu li.right a:hover,
.metro-pink #footer a:hover,
.metro-pink #subnav .subnav-left a:hover {
	color: #d1548e;
}

.metro-pink a:hover,
.metro-pink .post-info a:hover,
.metro-pink .post-meta a:hover {
	color: #222;
}

.metro-pink .post-info a,
.metro-pink .post-meta a {
	color: #999;
}

.metro-pink a.social-buttons,
.metro-pink .genesis-nav-menu a,
.metro-pink .post-comments a {
	color: #fff;
}

.metro-pink h2 a,
.metro-pink h2 a:visited {
	color: #464646;
}

.metro-pink h2 a:hover {
	color: #d1548e;
}

.metro-pink a.social-buttons:hover,
.metro-pink button:hover,
.metro-pink input:hover[type="button"],
.metro-pink input:hover[type="submit"],
.metro-pink .btn:hover,
.metro-pink .genesis-nav-menu .current-menu-item a,
.metro-pink .genesis-nav-menu li a:hover,
.metro-pink .genesis-nav-menu li:hover a,
.metro-pink .navigation li a:hover,
.metro-pink .navigation li.active a,
.metro-pink .post-comments a,
.metro-pink .sidebar .enews-widget input[type="submit"],
.metro-pink #title a {
	background-color: #d1548e;
}

.metro-pink .genesis-nav-menu li li a,
.metro-pink .genesis-nav-menu li li a:link,
.metro-pink .genesis-nav-menu li li a:visited,
.metro-pink .post-comments a:hover {
	background-color: #464646;
}

.metro-pink .genesis-nav-menu li li a:hover {
	background-color: #d1548e;
}

.metro-pink .sidebar .enews-widget input:hover[type="submit"] {
	background-color: #fff;
}

Then add another color to the functions.php file:

// Create additional color style options
add_theme_support( 'genesis-style-selector', array(
	'metro-blue'	=>	__( 'Blue', 'metro' ),
	'metro-green'	=>	__( 'Green', 'metro' ),
	'metro-orange'	=>	__( 'Orange', 'metro' ),
	'metro-pink'	=>	__( 'Pink', 'metro' ),
	'metro-red'		=>	__( 'Red', 'metro' ),
	'metro-custom'		=>	__( 'Custom', 'metro' ),
) );

Like i've done here with Custom. This will add another color to the dropdown in the Genesis > Theme Settings

---

Tutorials for StudioPress Themes.

[SiegerVinnare]

Thanks Brad! That's awesome. I made a custom class like you have shown above but the only problem I am having is that for some reason my header image is being covered by a large rectangle that is the color of the custom theme I am using. You will be able to see what I mean on my site here: http://bit.ly/VCDQm7

[RoastedBeanz]

I've added the new custom color in both places - worked great. However I'm having the same problem w/ the custom color box over my header. I've made sure the image was selected and the other default header was unchecked. Honestly, the box covers the entire header in any color that I select except the default color option. For now, I'm going to alter the default color to fix the issue but I'd rather code it correctly.

Can you tell me how to fix it please? Thanks!

---

http://www.roastedbeanz.com

[Author]

Posts