Daily Dish: Sidebar black bar type not white

[nazz]

In the first widget on the primary sidebar, the white type has gone to the link/accent color (purple). If I move down the widget (featured page) then the next one goes to the color. It only affects the first widget.

This is not what you see in the demo. How do I fix?

I've seen this before but can't recall how I fixed it.

http://bit.ly/1CTE9ga

[Porter]

Easy fix! Your "a" (links) are the purple color, so it's overriding your .widget-title color.

In your style.css, search for "widget-title". Below it, add:

widget-title a {
color: #ffffff;
}

Note, if you want to change the color from white to something else, for all of them, change both the above, and the normal .widget-title color property.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nazz]

Thanks, Porter. Unfortunately, that didn't do anything.

Please note that only the top widget title in the primary sidebar has this issue. The others are all white.

[Porter]

I see the issue, and as I said, it's because the top one is a link. If you made any other widget title a link, they would turn purple as well, because that's your link text color. I had a typo in my code, I forgot a "." at the beginning, did you add that?

.widget-title a {
color: #ffffff;
}

I changed it in the inspector, and it worked perfectly - I'm 99% sure that's the issue. The only other fix needed, is to change the a:hover value to something you can see better, as it's black on black right now. I have no idea how your css knowledge is, but just so you understand what's going on, this is how it's going down:

Your .widget-title class is setting the color to white, your a (all links) are set to purple. The fact that your widget title is both a widget title, and a link, is causing the "issue". The browser has determined that your link color is of higher importance than your widget-title color. To override this, you simply specify that all widget titles that are also links, get a value, which is what my code above is. If there was already code to target widget title links, and it was also an h4 tag, you could then target a widget title, link, h4, and specify that color. Each .something is called an identifier, and the more you have, the more specific you be, the less chance of any other css overriding it.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[nazz]

Thanks, Porter, that did the trick.

Appreciate the explanation as well. Terrific.

[Porter]

You're welcome, not a problem. Remember to mark your thread as "resolved" at the top of the page!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts