Metro theme color options – how to

Community Forums Forums Design Tips and Tricks Metro theme color options – how to

This topic is: not resolved

Tagged: ,

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

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

    JC2
    Participant
    Post count: 8

    (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!

     

    #19880

    braddalton
    Participant
    Post count: 8901

    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.

    [php]
    // 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’ ),
    ) );
    [/php]


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #19901

    JC2
    Participant
    Post count: 8

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

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

You must be logged in to reply to this topic.