Metro Pro Change Global Colors

Community Forums Forums Design Tips and Tricks Metro Pro Change Global Colors

This topic is: not resolved

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  jalodico 1 year, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #92166


    I am trying to change the color scheme of Metro pro so that the nav bar and other elements show a color other than the default. I have been able to change the nav bar colors individually but I’d also like it so that plugins such as the Genesis Enews Extended or the “social buttons” class pick up the colors.

    I’m using the Blue color scheme if that makes a difference.

    Thanks in advance for any help.


    To Change default colors of ‘blue color scheme”, make changes in the following code found in style.css file

    Theme Colors
    ---------------------------------------------------------------------------------------------------- */
    /* Metro Pro Blue
    --------------------------------------------- */
    .metro-pro-blue .entry-title a:hover,
    .metro-pro-blue .genesis-nav-menu > .right > a:hover,
    .metro-pro-blue .site-footer a:hover,
    .metro-pro-blue a,
    .metro-pro-blue h2 a:hover {
    	color: #5bb1f9;
    .metro-pro-blue .entry-title a,
    .metro-pro-blue .entry-meta a:hover,
    .metro-pro-blue a:hover {
    	color: #222;
    .metro-pro-blue .entry-meta a {
    	color: #999;
    .metro-pro-blue .archive-pagination li a:hover,
    .metro-pro-blue .entry-comments-link a,
    .metro-pro-blue .entry-comments-link a:hover,
    .metro-pro-blue .genesis-nav-menu a,
    .metro-pro-blue .site-footer a,
    .metro-pro-blue .site-title a,
    .metro-pro-blue .site-title a:hover,
    .metro-pro-blue {
    	color: #fff;
    .metro-pro-blue h2 a,
    .metro-pro-blue h2 a:visited {
    	color: #333;
    .metro-pro-blue .archive-pagination li a:hover,
    .metro-pro-blue .archive-pagination a,
    .metro-pro-blue .btn:hover,
    .metro-pro-blue .content .entry-comments-link a,
    .metro-pro-blue .enews-widget input:hover[type="submit"],
    .metro-pro-blue .genesis-nav-menu .current-menu-item > a,
    .metro-pro-blue .genesis-nav-menu a:hover,
    .metro-pro-blue .sidebar .enews-widget input[type="submit"],
    .metro-pro-blue .site-title a,
    .metro-pro-blue button:hover,
    .metro-pro-blue input:hover[type="button"],
    .metro-pro-blue input:hover[type="reset"],
    .metro-pro-blue input:hover[type="submit"] {
    	background-color: #5bb1f9;
    .metro-pro-blue .entry-comments-link a:hover {
    	background-color: #333;
    .metro-pro-blue .sidebar .enews-widget input:hover[type="submit"] {
    	background-color: #fff;
    .metro-pro-blue .genesis-nav-menu > .right > a,
    .metro-pro-blue.header-image .site-title a {
    	background: none;




    I was thinking that there was a setting that would impact elements such as plugins that pick up the theme style (i.e. Genesis eNews Extender) but it looks like those are set individually.

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

You must be logged in to reply to this topic.