Community Forums › Forums › Archived Forums › Design Tips and Tricks › Metro theme color options – how to
- This topic has 2 replies, 2 voices, and was last updated 12 years ago by
JC2.
-
AuthorPosts
-
February 12, 2013 at 11:48 am #19849
JC2
Member(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!
February 12, 2013 at 1:41 pm #19880Brad Dalton
ParticipantYou 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' ), ) );
February 12, 2013 at 2:34 pm #19901JC2
MemberMany 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;
} -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.