CSS ACK! entry-header, logo, ul & li

[eddie]

Structured programming and I are tight, but when it comes to CSS, I want to pull my hair out.

Example page: http://smri.io/kpdh

If you look at the metadata under the title, you will see that the links are a different color and underlined. However, when I modify the CSS below it changes the nav menus as well. Also, no matter what I do I can't get rid of the text-decoration.

[carasmo]

.entry-header li a {
        text-decoration:none;
        color: #999;
}

Unless you specify a class before and with a space then it will globally affect all links. You just want to affect the .entry-header list item links, then use just the a. Then you want to address the hover and focus.

.entry-header li a:hover, .entry-header li a:focus {
        color: #???; /* some other color */
}

If you are over-riding classes set earlier in the CSS for a:visited for this parent class, then you will need to use the same specificity. CSS is very structured.

---

Genesis Theme Customization and Help

[eddie]

That was very helpful. Still can't get rid of the text decoration, though. Ok, CSS is structured, but my mind just doesn't think this way.

[carasmo]

What theme are you using? My theme doesn't use a list inside the entry-header. If you want all underlines removed from all links inside entry-header, just target all children:

.entry-header a {

}

If there is a list, check to see how the link was added in the CSS, if it's after your css, then your CSS will be over-ridden by CSS following it. If it's before your CSS, your CSS has to have the same or greater specificity.

---

Genesis Theme Customization and Help

[eddie]

I'm using minimum pro. I've massaged the metadata and decided to use an unordered list to display. Also, I've placed this at the end of style.css.

That doesn't seem to remove the text-decoration either. Oddly enough, the nav menus don't have text-decoration. http://smri.io/kpdh

[carasmo]

Your global (all links) CSS is this:

a {
	border-bottom: 1px dotted #333;
	color: #333;
	font-weight: 400;
	text-decoration: none;
}

You're using "text-decoration:none" which won't work because the decoration is set to none, the style is set to border-bottom:...

Use instead:

.entry-header ul {
	font-size: .75em;
	color: #999;
	list-style-type: none;
}

.entry-header li {
	display: inline;
	padding-right: 15px;
	text-decoration: none;
}
.entry-header a:not(:hover) {
        color:#999;
	border-bottom:none; /* semi-colons are optional on the last */
}

The last bit removes the border-bottom on a but not a:hover, so that hover gives some feedback to the user.

Or to just apply it and do something else for hover and the other states:

.entry-header a {
        color:#999;
	border-bottom:none;
}

and then you would style hover differently.

.entry-header a:hover {
  ...
}

Get yourself some free browser developer tools then you can see the styles used and what to over-ride.

---

Genesis Theme Customization and Help

[eddie]

That worked. Even better, I've learned a little more about CSS. Thank you very much for your help and patience.

[Author]

Posts