Underline links ONLY in content body (parallax pro)

[donnielaw]

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!

[Brad Dalton]

Use the correct classes http://www.genesisframework.com/markup.php

---

Tutorials for StudioPress Themes.

[donnielaw]

Thanks 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?

[donnielaw]

Does 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?

[Brad Dalton]

Try this

.entry-content a {
	color: #f04848;
	text-decoration: underline;
}

Class selectors use .
I.D selectors use #

---

Tutorials for StudioPress Themes.

[donnielaw]

Yes! 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;
}

[donnielaw]

Thanks 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?

[donnielaw]

Ideally 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/

[donnielaw]

Any 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;
}

[donnielaw]

I'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?

[Zoose Graphics]

To 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.

[donnielaw]

ahhh I see! Thanks so much!

I added !important and it all worked. Thanks again!

[Author]

Posts