Community Forums › Forums › Archived Forums › General Discussion › Outlook Pro Theme – personalize color scheme
Tagged: color scheme, Outreach Pro
- This topic has 3 replies, 2 voices, and was last updated 8 years, 8 months ago by Tom.
-
AuthorPosts
-
July 11, 2015 at 3:33 pm #159120cfish7Member
Is there a way to change the Outlook Pro theme color scheme to an option NOT listed (orange, green/default, red, blue, purple)? If so, can you help me with how to do this? Thanks!
July 12, 2015 at 12:13 am #159144TomParticipantI'm assuming you mean Outreach Pro, but either method should work for any StudioPress theme with colour selection options.
1. Commandeer an existing colour: You're customizing the site for *your* colour palette, so you won't (ever) need that option for .... purple, for example. You can simply leave the colour selected as "purple" in Genesis theme options, but change the actual "purple" CSS section in the child theme stylesheet from the purple specifics to use your colours instead.
2. (a) Add a custom selector for your new colour. See functions.php for this code and add a new line for, say, "yellow"...
//* Add support for additional color style options add_theme_support( 'genesis-style-selector', array( 'outreach-pro-blue' => __( 'Outreach Pro Blue', 'outreach' ), 'outreach-pro-orange' => __( 'Outreach Pro Orange', 'outreach' ), 'outreach-pro-purple' => __( 'Outreach Pro Purple', 'outreach' ), 'outreach-pro-red' => __( 'Outreach Pro Red', 'outreach' ), 'outreach-pro-yellow' => __( 'Outreach Pro Yellow', 'outreach' ), ) );
and 2(b) duplicate an existing colour section, changing the selectors to reflect your new colour choice, something like this:
(be sure to match the CSS selectors below with the term "outreach-pro-yellow" from 2(a) above)/* Outreach Pro YELLOW --------------------------------------------- */ .outreach-pro-yellow .content .entry-title a:hover, .outreach-pro-yellow .content #genesis-responsive-slider a, .outreach-pro-yellow .content #genesis-responsive-slider h2 a:hover, .outreach-pro-yellow .nav-secondary .genesis-nav-menu .current-menu-item > a, .outreach-pro-yellow .nav-secondary .genesis-nav-menu .sub-menu a:hover, .outreach-pro-yellow .nav-secondary .genesis-nav-menu a:hover, .outreach-pro-yellow .nav-secondary .genesis-nav-menu li:hover > a, .outreach-pro-yellow .widget-title, .outreach-pro-yellow a { color: #fdee00; } .outreach-pro-yellow a:hover { color: #1e6dad; } .outreach-pro-yellow .content #genesis-responsive-slider a:hover, .outreach-pro-yellow .content #genesis-responsive-slider h2 a, .outreach-pro-yellow .footer-widgets .widget-title, .outreach-pro-yellow .genesis-nav-menu a, .outreach-pro-yellow .site-footer a:hover, .outreach-pro-yellow .site-header .widget-title, .outreach-pro-yellow .site-title a, .outreach-pro-yellow .site-title a:hover { color: #fff; } .outreach-pro-yellow .site-footer a { color: #666; } .outreach-pro-yellow .genesis-nav-menu .sub-menu a, .outreach-pro-yellow .home-bottom .widget-title { color: #333; } .outreach-pro-yellow .genesis-nav-menu a:hover, .outreach-pro-yellow .genesis-nav-menu .current-menu-item > a, .outreach-pro-yellow .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #000; } .outreach-pro-yellow .archive-pagination .active a, .outreach-pro-yellow .archive-pagination li a:hover, .outreach-pro-yellow .button, .outreach-pro-yellow .nav-primary, .outreach-pro-yellow button, .outreach-pro-yellow input[type="button"], .outreach-pro-yellow input[type="reset"], .outreach-pro-yellow input[type="submit"] { background-color: #fdee00; color: #fff; } .outreach-pro-yellow .button:hover, .outreach-pro-yellow .site-header, .outreach-pro-yellow button:hover, .outreach-pro-yellow input:hover[type="button"], .outreach-pro-yellow input:hover[type="reset"], .outreach-pro-yellow input:hover[type="submit"] { background-color: #fdee00; color: #fff; } .outreach-pro-yellow .sub-footer { background-color: #edf3f4; } .outreach-pro-yellow, .outreach-pro-yellow .footer-widgets, .outreach-pro-yellow .site-footer { background-color: #222e37; } .outreach-pro-yellow .author-box, .outreach-pro-yellow .content .slide-excerpt, .outreach-pro-yellow .nav-secondary .wrap, .outreach-pro-yellow .sidebar .widget { background-color: #17222b; } .outreach-pro-yellow .nav-secondary .genesis-nav-menu .sub-menu, .outreach-pro-yellow .nav-secondary .genesis-nav-menu .sub-menu a { background-color: #17222b; border-color: #fdee00; color: #fff; } .outreach-pro-yellow .enews-widget input:hover[type="submit"] { background-color: #eee; color: #333; }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 13, 2015 at 5:04 am #159250cfish7Memberha! Yes, I meant Outreach. Thanks for the help!
July 13, 2015 at 8:44 am #159277TomParticipantSuper. If this worked for you please mark this thread as resolved.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The topic ‘Outlook Pro Theme – personalize color scheme’ is closed to new replies.