Joomla Templates Club 406,261 posts

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#204875

How can I change color of hyperlinks on page body only? If I try to modify a {color: #FF0000 } menu links and everything else changes too. I only want to change hyperlink color in main body of a page.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#564012

Hi there
Please provide your site URL for inspect.
In basically you need to update your css selector to focus on your needed elements only.

Thank you,
Viet Vu

1 user says Thank You to jooservices for this useful post

1. suzanna

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#564014

Hi
Please Post your working site url here ,
so i can check and let you know some changes.

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#566170

I sent you PM with login info.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566433

<em>@suzanna 467556 wrote:</em><blockquote>I sent you PM with login info.</blockquote>

Hi i tried to access your site but the user/pass not working again .
By the way if you are running on latest T3 template .
Add the below code in your custom.css file

a{color:#666666!important; }


For menu items colors
add this code

.navbar-default .navbar-nav > li > a {

color: #afafaf!important }

Change the color code as per your need.

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#566487

Changing a { color:#something etc.} will change more than I want — including bootstrap btn styles and more.
I would like to change hyperlinks on page text/ body only. Keep everything the same but if there is <a href=”#”> test </a> like this somewhere on the page I would like that to be blue and underlined.

I’ve tried .article-content a { color: #whatever} but that changes theme’s bootstrap btn styles that are on the page.

Here you can see a default template hyperlink color light gray (on dark gray text), changes red when you mouse over (if you see the hyperlink).

Here is an example of good usability where hyperlinks are clearly visible and stand out.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#566489

Hi there
<blockquote>I would like to change hyperlinks on page text/ body only. Keep everything the same but if there is <a href=”#”> test </a> like this somewhere on the page I would like that to be blue and underlined.</blockquote>

At first you need to get right css selector instead global with a.
You can apply specific class for each element you want to apply custom css.

Thank you,
Viet Vu

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566492

Hi can u remove the server authentication so i can check your site.

[truemaker Friend truemakerJoin date: April 2013Posts: 50Downloads:29Uploads:2 Thanks: 3 Thanked: 1 times in 1 posts]

#566585

Hi

If you want change link color ONLY in Joomla Article (for example red) add that code


div.item-page a { color: red ; }
div.item-page a:hover, div.item-page a:focus { color: green ; }


But add BETWEEN global “a” styles and all typo styles of links.

After it your css will rewrite global styles, but typo styles will rewrite your change.

And “Clear cache” after fix it. 😉

WBR
Igor

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#566601

Hi
I checked your site and found you are already using an anchor color in your custom.css file .
this code

p a {

border-bottom: .08em solid #41b7d8
outline: 0;
-webkit-tap-highlight-color: rgba(229,59,44,.4);
border-bottom: .08em solid rgba(0,0,0,.1);
padding-bottom: .08em;
font-size: 100%;
text-decoration: none;
vertical-align: baseline;
margin: 0;
padding: 0;
background: 0 0;
color: #41b7d8
}

in above code color: #41b7d8 is the color that you have defined for anchor tag in paragraph for your site.

add this code to change hover color


a:hover,
a:focus {
color: #205f93!important

}

change the color code as per your needs .

if you want to make it underline change above code with this code


a:hover,
a:focus {
color: #205f93!important
text-decoration: underline!important;
}

Hope it helps.

[Author]

Posts