Community Forums › Forums › Archived Forums › General Discussion › CSS ACK! entry-header, logo, ul & li
Tagged: css entry-header
- This topic has 6 replies, 2 voices, and was last updated 8 years, 5 months ago by eddie.
-
AuthorPosts
-
November 14, 2015 at 8:33 pm #171126eddieParticipant
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.
November 14, 2015 at 10:20 pm #171133carasmoParticipant.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.
November 14, 2015 at 10:32 pm #171136eddieParticipantThat 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.
November 14, 2015 at 11:38 pm #171138carasmoParticipantWhat 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.
November 15, 2015 at 10:41 am #171158eddieParticipantI'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
November 15, 2015 at 11:57 am #171162carasmoParticipantYour 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.
November 15, 2015 at 1:22 pm #171190eddieParticipantThat worked. Even better, I've learned a little more about CSS. Thank you very much for your help and patience.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.