Outlook Pro Theme – personalize color scheme

[cfish7]

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!

[Tom]

I'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 ]

[cfish7]

ha! Yes, I meant Outreach. Thanks for the help!

[Tom]

Super. 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 ]

[Author]

Posts