Metro theme color options – how to

[JC2]

(for beginners)

I just figured out how to change the color options for the metro theme.  I'm new to this, so hopefully it help others like me.  If you are more experienced, please feel free to correct any of this!

1. go to appearance/themes/editor. select metro themes. go to section 13.

2. choose which color you'd like to overwrite.  I chose red to change to safety orange.

3. change the color in bold to the color of your choice. update file.

4. choose the color that you overwrote in genesis/theme settings/color style

example of the code after I changed it (bold is all I changed):

/* 13d - Metro Red ----------- */

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

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

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

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

.metro-red h2 a,
.metro-red h2 a:visited {
color: #333;
}

.metro-red h2 a:hover {
color: #cc6600;
}

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

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

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

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

 

I also tried to add an additional theme color as shown below so that the name and color would be the same (rather than calling it red, but changing to safety orange.  I thought the options in genesis/theme settings/color style would update to show the new color, but no such luck.  If anyone knows how to show all the options, let me know!

 

[Brad Dalton]

You can copy the existing code for one color and change the values rather than edit an existing color.

On top of this, you can add the new color to your functions so it displays in the drop down for color options.

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

---

Tutorials for StudioPress Themes & WooCommerce.

[JC2]

Many thanks Brad!  Your advice worked great.

For any one else that is also learning - here's the "custom" code to add to your css.  Note - the color in this code is set as safety orange. #cc6600

/* 13e - Metro custom ----------- */

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

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

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

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

.metro-custom h2 a,
.metro-custom h2 a:visited {
color: #333;
}

.metro-custom h2 a:hover {
color: #cc6600;
}

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

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

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

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

[Author]

Posts