Agency Pro – where is this specific text color in CSS?

[mike]

Hello, I've made several tweaks to the color scheme to match this company branding. It's offline right now, so I am providing screenshots below.

As of now, there is no backstretch image and they prefer a clean white background. Obviously this presents an issue with the default white text. I've got most of it fixed, but here are two specific areas I can't seem to figure out.

1. The text color for both the button in home middle and default text color for the footer (not site footer) title - you can see the issue in the footer with a dark green background and then the dark grey text which isn't readable:
Home button example (where is this dark grey code for this specific text area in button)

Footer title text color:

2. The text color for the home middle and home bottom that introduces the featured posts - since the white on white can't be seen on my page, here's example from agency demo - where do I change this "our work" and "recent articles" text color in the code?

[cwalsh]

Here is the CSS that you need to look for to make the changes you want (it would be easier to see your site to double check and make sure but these should work)

Button text color, change color: #333;

.home-top .button {
background-color: #fff;
border-radius: 50px;
color: #333;
text-transform: uppercase;
}

Footer widget titles

.widget-title {
color: #333;
font-size: 16px;
margin-bottom: 16px;
text-transform: uppercase;
}

But this will change the color for the widget titles in your sidebars on internal pages as well so you will probably want to make a new class.

.footer-widgets .widget-title {
color: #fff;
}

Our Work and Recent Articles, 2 styles, one for the text and one for the lines

.agency-pro-home .content .featured-content .widget-title, .agency-pro-home .content .widget_text .widget-title {
color: #fff;
text-align: center;
margin: -40px 0 0;
padding-bottom: 20px;
}

.agency-pro-home .content .featured-content .widget-title::after, .agency-pro-home .content .featured-content .widget-title::before, .agency-pro-home .content .widget_text .widget-title:after, .agency-pro-home .content .widget_text .widget-title:before {
content: " ";
display: inline-block;
border-top: 2px solid #fff;
padding-bottom: 4px;
width: 15%;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[mike]

Thanks Caley - all of that worked except that stubborn button in the home middle area.

I tweaked the button color to be the same dark green as desired and replaced the #333 with #fff to produce white text, but I am still seeing the dark grey. Here's what it looks like:

Here is that specific piece of code:

.home-top .button {
	background-color: #004530;
	border-radius: 50px;
	color: #fff;
	text-transform: uppercase;
}

Any more ideas? Thanks!!

[cwalsh]

Any chance you could send me a link or is the site not live somewhere?

You might need to add this
.home-top .button a {
color: #fff;
}

OR use !important after the color on the style you already have.

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[mike]

Thanks - the site is not live yet.

The extra button code did not seem to work, but using !important got it. Thanks again for your help.

[mike]

Last one - how can I change the color of the hyperlinks just for the featured posts in home middle area when "hovering" over the picture. So, an example from the demo is here. Looking to change the color of "MORE" - I assume all links will be affected if you change that in the stylesheet so hoping for code that just affects specific area here.

[cwalsh]

Actually there is a declaration for that

.agency-pro-home .content .featured-content a:hover {
color: #d7c603;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[mike]

Ok great, thanks again for all your help. Caley, if I want the home bottom to display a different color "MORE" on hover than what the home middle area does, is there a specific piece of code I can add to the home bottom to override the declaration? So, on hover at top, I've got a light color and it's fine, but at home bottom, it's a dark background and the dark green "MORE" text doesn't work on hover.

[Author]

Posts