Community Forums › Forums › Archived Forums › Design Tips and Tricks › Outreach Pro Custom Colors
- This topic has 2 replies, 3 voices, and was last updated 8 years, 1 month ago by
earthatoz.
-
AuthorPosts
-
May 7, 2016 at 11:44 am #185158
Giuljo
MemberI 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.
May 7, 2016 at 12:53 pm #185165Susan
ModeratorThanks for sharing 🙂
December 31, 2016 at 1:33 pm #198535earthatoz
MemberYou can change your color. Kindly find color changing program.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.