Outreach Pro Custom Colors

[Giuljo]

I just wanted to help anyone who might be finding it difficult to figure out which sections to change when adjusting the colors in Outreach Pro. Being a visual learner, I found it easier to create a new color scheme to use for testing purposes so I could see where each color appeared on the actual website. It basically replaces every hex color code with a bright color, making it easier to make adjustments in exactly the right sections. (It looks pretty horrible but this is only for testing/adjustment purposes.)

The color scheme is appropriately named "Rainbow." Add the following line to your functions.php file in the color styles option section - somewhere around line 50:
'outreach-pro-rainbow' => __( 'Outreach Pro Rainbow', 'outreach' ),

Then paste the following into your style.css file in the Theme Colors section - approx. at line 1676:

/* Outreach Pro rainbow
--------------------------------------------- */

.outreach-pro-rainbow .content .entry-title a:hover,
.outreach-pro-rainbow .content #genesis-responsive-slider a,
.outreach-pro-rainbow .content #genesis-responsive-slider h2 a:hover,
.outreach-pro-rainbow .nav-secondary .genesis-nav-menu .current-menu-item > a,
.outreach-pro-rainbow .nav-secondary .genesis-nav-menu .sub-menu a:hover,
.outreach-pro-rainbow .nav-secondary .genesis-nav-menu a:hover,
.outreach-pro-rainbow .nav-secondary .genesis-nav-menu li:hover > a,
.outreach-pro-rainbow .widget-title,
.outreach-pro-rainbow a {
	color: brown;  
}

.outreach-pro-rainbow a:hover {
	color: aqua;  
}

.outreach-pro-rainbow .content #genesis-responsive-slider a:hover,
.outreach-pro-rainbow .content #genesis-responsive-slider h2 a,
.outreach-pro-rainbow .footer-widgets .widget-title,
.outreach-pro-rainbow .genesis-nav-menu a,
.outreach-pro-rainbow .site-footer a:hover,
.outreach-pro-rainbow .site-header .widget-title,
.outreach-pro-rainbow .site-title a,
.outreach-pro-rainbow .site-title a:hover {
	color: pink;  
}

.outreach-pro-rainbow .site-footer a {
	color: brown1;  /* more like a maroon than brown */
}

.outreach-pro-rainbow .genesis-nav-menu .sub-menu a,
.outreach-pro-rainbow .home-bottom .widget-title {
	color: burlywood1;  /* beige color */
}

.outreach-pro-rainbow .genesis-nav-menu a:hover,
.outreach-pro-rainbow .genesis-nav-menu .current-menu-item > a,
.outreach-pro-rainbow .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: aquamarine1;  
}

.outreach-pro-rainbow .archive-pagination .active a,
.outreach-pro-rainbow .archive-pagination li a:hover,
.outreach-pro-rainbow .button,
.outreach-pro-rainbow .nav-primary,
.outreach-pro-rainbow button,
.outreach-pro-rainbow input[type="button"],
.outreach-pro-rainbow input[type="reset"],
.outreach-pro-rainbow input[type="submit"] {
	background-color: red;  
	color: CornflowerBlue; 
}

.outreach-pro-rainbow .button:hover,
.outreach-pro-rainbow .site-header,
.outreach-pro-rainbow button:hover,
.outreach-pro-rainbow input:hover[type="button"],
.outreach-pro-rainbow input:hover[type="reset"],
.outreach-pro-rainbow input:hover[type="submit"] {
	background-color: orange; 
	color: DarkGoldenrod1;  
}

.outreach-pro-rainbow .sub-footer {
	background-color: yellow; 
}

.outreach-pro-rainbow,
.outreach-pro-rainbow .footer-widgets,
.outreach-pro-rainbow .site-footer {
	background-color: green;  
}

.outreach-pro-rainbow .author-box,
.outreach-pro-rainbow .nav-secondary .wrap,
.outreach-pro-rainbow .sidebar .widget  {
	background-color: blue;  
}

.outreach-pro-rainbow .nav-secondary .genesis-nav-menu .sub-menu,
.outreach-pro-rainbow .nav-secondary .genesis-nav-menu .sub-menu a {
	background-color: purple; 
	border-color: DarkOliveGreen2;  
	color: DarkOrchid1;  
}

.outreach-pro-rainbow .enews-widget input:hover[type="submit"] {
	background-color: DarkSeaGreen;  
	color: khaki;  
}
 

I used color names rather than hex so it's easier to find the colors you want to switch out. Once you have all the colors adjusted the way you want, rename the "rainbow" scheme to an appropriate name and you're done.

Hope this helps someone.

[Susan]

Thanks for sharing 🙂

[earthatoz]

You can change your color. Kindly find color changing program.

[Author]

Posts