CSS – Outreach Pro – Help, again!

[JohnBeatty]

OK, so I know there are different sections to these quick color change themes and I get that. But for the life of me, I cannot get the very bottom footer with the site information in "black" to change to "white" and the container/background color it's in to change also??? I contacted support and they gave me a piece of code, which didn't do anything I saw, so here is 'my' CSS for the "pro-blue" and the edits I've made:

/* Outreach Pro Blue
--------------------------------------------- */

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

.outreach-pro-blue a:hover {
color: #1e90ff;
}

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

.outreach-pro-blue .site-footer a {
color: #666;
}

.outreach-pro-blue .genesis-nav-menu .sub-menu a,
.outreach-pro-blue .home-bottom .widget-title {
color: #333;
}

.outreach-pro-blue .genesis-nav-menu a:hover,
.outreach-pro-blue .genesis-nav-menu .current-menu-item > a,
.outreach-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #000;
}

.outreach-pro-blue .archive-pagination .active a,
.outreach-pro-blue .archive-pagination li a:hover,
.outreach-pro-blue .button,
.outreach-pro-blue .nav-primary,
.outreach-pro-blue button,
.outreach-pro-blue input[type="button"],
.outreach-pro-blue input[type="reset"],
.outreach-pro-blue input[type="submit"] {
background-color: #2483d0;
color: #fff;
}

.outreach-pro-blue .button:hover,
.outreach-pro-blue .site-header,
.outreach-pro-blue button:hover,
.outreach-pro-blue input:hover[type="button"],
.outreach-pro-blue input:hover[type="reset"],
.outreach-pro-blue input:hover[type="submit"] {
background-color: #1e6dad;
color: #fff;
}

.outreach-pro-blue .sub-footer {
background-color: #edf3f4;
}

.outreach-pro-blue,
.outreach-pro-blue .footer-widgets,
.outreach-pro-blue .site-footer {
background-color: #1E6DAD;
}

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

.outreach-pro-blue .nav-secondary .genesis-nav-menu .sub-menu,
.outreach-pro-blue .nav-secondary .genesis-nav-menu .sub-menu a {
background-color: #17222b;
border-color: #2d3b45;
color: #fff;
}

.outreach-pro-blue .enews-widget input:hover[type="submit"] {
background-color: #eee;
color: #333;
}

Can anyone please look at my site which is live now and offer some help? I would like the text to be white and the bottom footer to be the darker blue of the overall site!

I'm very happy with the site but am at the point where I'm making small changes to give it an extra bit of love!

Thank you!
- John

http://crossroads4christ.org

[Genesis Developer]

Go to line no 1691 of your style.css file and replace the current css by this new one

.outreach-pro-blue, .outreach-pro-blue .footer-widgets {
    background-color: #1e6dad;
}

.outreach-pro-blue .site-footer{
    background-color: #2483d0;
}

Go to line no 1612 of your style.css file and replace the current css by this new one

.site-footer p {
    color: #fff;
    margin-bottom: 0;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[andystitt829]

Hi John,

I looked through your CSS, and I didn't see any property set for .site-footer p. When I set that property in Firebug, it turned the bottom text white. So, you can add this bit of CSS in:

.outreach-pro-blue .site-footer p {
color: #fff;
}

The footer background color is set in this cluster of CSS that you provided:

.outreach-pro-blue,
.outreach-pro-blue .footer-widgets,
.outreach-pro-blue .site-footer {
background-color: #1E6DAD;
}

The .outreach-pro-blue .site-footer element sets your background color.

If you want a different color than the #1E6DAD, you can remove .outreach-pro-blue .site-footer from that cluster and set its color separately. Try this:

outreach-pro-blue,
.outreach-pro-blue .footer-widgets {
background-color: #1E6DAD;
}

.outreach-pro-blue .site-footer {
background-color: #000;
}

I set the background color to #000 just as an example. Once you know the hex value of the color that you want to use, plug it in there.

Did this work for you?

Andy

---

Andy Stitt
Website | Twitter

[andystitt829]

genwrock, you figured out how to say that way more succinctly than I did!

---

Andy Stitt
Website | Twitter

[JohnBeatty]

I've got close but not yet! I've been able to get the text white but not only the footer a darker blue, it still goes into the footer-widgets as well?

Genwrock is giving me some extra help! 🙂

It's the little things that sometimes are the biggest pain! LOL!

[Author]

Posts