Community Forums › Forums › Archived Forums › Design Tips and Tricks › Underline links ONLY in content body (parallax pro)
- This topic has 11 replies, 3 voices, and was last updated 10 years ago by donnielaw.
-
AuthorPosts
-
March 29, 2014 at 5:45 pm #97348donnielawMember
I'm experimenting with some changes to the style.css file. Keep in mind I hardly know what I'm doing but I'm having fun trying new things.
I wanted to make links underlined so I added the following under the "typographical elements" section.
a { color: #f04848; text-decoration: underline; }
The links are now underlined but so are the links in the header menu, title, and post titles. How do I limit the underlines to links in the body of posts?
Thanks!
March 29, 2014 at 7:39 pm #97356Brad DaltonParticipantUse the correct classes http://www.genesisframework.com/markup.php
March 29, 2014 at 8:03 pm #97358donnielawMemberThanks Brad!
So if I want to change the links in just the body I would use the
<div class="entry-content">
class?Would I put that before my changes in the style.css?
March 29, 2014 at 8:07 pm #97359donnielawMemberDoes this make any sense?
#entry-content a { color: #f04848; text-decoration: underline; }
Would that make the underline just show up on links in the body of posts?
March 29, 2014 at 8:27 pm #97362Brad DaltonParticipantTry this
.entry-content a { color: #f04848; text-decoration: underline; }
Class selectors use .
I.D selectors use #
March 29, 2014 at 8:29 pm #97363donnielawMemberYes! I did this and it worked:
.entry-content a { color: #f04848; text-decoration: underline; } .entry-content a:hover { color: #1f1f1e; -webkit-transition: .6s ease; -moz-transition: .6s ease; -ms-transition: .6s ease; -o-transition: .6s ease; transition: .6s ease; }
March 29, 2014 at 8:33 pm #97364donnielawMemberThanks Brad.
For whatever reason, when I hover the transition works fine but it transitions to #000000 instead of #1f1f1e
Do you see anything wrong with my code above?
March 29, 2014 at 8:37 pm #97365donnielawMemberIdeally I'm trying to get my links to have an orange underline #f04848 with black #1f1f1e text. When hovered, the text will fade to orange and match the underline. It can be seen in action on http://justinjackson.ca/validate-your-startup-idea/
March 30, 2014 at 4:12 pm #97534donnielawMemberAny thoughts on what to add to this to make the underline one color and the text link another color:
.entry-content a { color: #f04848; text-decoration: underline; } .entry-content a:hover { color: #1f1f1e; -webkit-transition: .6s ease; -moz-transition: .6s ease; -ms-transition: .6s ease; -o-transition: .6s ease; transition: .6s ease; }
March 31, 2014 at 11:02 am #97694donnielawMemberI've been searching around online but I still can't figure out the css to make the link text one color, and the tex-decoration (underline) a separate color. Any idea how to accomplish this?
March 31, 2014 at 11:12 am #97696Zoose GraphicsMemberTo make an orange line with black text use this
.entry-content a { color: #1f1f1e border-bottom: 1px solid #f04848 ; }
To change the the text color to match the line color upon hovering, use this
.entry-content a:hover { color: #f04848 ; -webkit-transition: .6s ease; -moz-transition: .6s ease; -ms-transition: .6s ease; -o-transition: .6s ease; transition: .6s ease; }
Hope it helps.
March 31, 2014 at 1:20 pm #97731donnielawMemberahhh I see! Thanks so much!
I added
!important
and it all worked. Thanks again! -
AuthorPosts
- The topic ‘Underline links ONLY in content body (parallax pro)’ is closed to new replies.