How to change colour of a single link in WordPress ?

[meetdilip]

I have come across on more hurdle before I use the Icy theme. The read more link is kind of faded out and members may find it difficult to recognize it. Is it possible to change only it to red ? If yes, please tell me how. I am adding a screen shot

 

[Schot]

Are you comfortable editing css files? It looks as though it may the the .readmore class. I'm looking at your site now with the old skin so I might be a little off. Here's what I think you need to find/edit in your icy skin's css:

.readmore {
    float: right;
    margin-bottom: 15px;
}
.readmore a {
    background: url("/wp-content/themes/Stylo/images/readmore-bg.png") repeat-x scroll left top #E1E1E1;
    border: 1px solid #E1E1E1;
    border-radius: 5px 5px 5px 5px;
    color: #D34032;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    padding: 10px 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.readmore a:hover {
    background: url("/wp-content/themes/Stylo/images/readmore-bg.png") repeat-x scroll left -130px #CB3629;
    border: 1px solid #BA281B;
    color: #FFFFFF;
    text-decoration: none;
}

I'd be happy to log in and take a look for you if you like Dilip. After I've for about 8 hours, haha.

 

[meetdilip]

Thanks Schot. I am not good at coding. I will update you soon. I need to fix a few more things before I effect theme change.

Have a nice sleep

 

[Korigon]

Are you comfortable editing css files? It looks as though it may the the .readmore class. I'm looking at your site now with the old skin so I might be a little off. Here's what I think you need to find/edit in your icy skin's css:

.readmore {
    float: right;
    margin-bottom: 15px;
}
.readmore a {
    background: url("/wp-content/themes/Stylo/images/readmore-bg.png") repeat-x scroll left top #E1E1E1;
    border: 1px solid #E1E1E1;
    border-radius: 5px 5px 5px 5px;
    color: #D34032;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    padding: 10px 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.readmore a:hover {
    background: url("/wp-content/themes/Stylo/images/readmore-bg.png") repeat-x scroll left -130px #CB3629;
    border: 1px solid #BA281B;
    color: #FFFFFF;
    text-decoration: none;
}

I'd be happy to log in and take a look for you if you like Dilip. After I've for about 8 hours, haha.

Yeah... I guess it's time for me to... *yawn*... go play battle field 3...

 

[meetdilip]

@ Schot

Here is the link to the Icy theme.

http://wordpress.org/themes/icy

I am also looking to make my post/s sticky. Is there any plugin you know of ?

@Korigon

Enjoy Battle Field 3

 

[Schot]

No wait! I wanna play toooooo... But I have to go to bed. But! Before I do... I did happen to find a live demo of the Icy theme. The css that has to be changed is:

.more-link {
    float: right;
    margin-left: 10px;
}
.more-link, .entry-info, .entry-meta, .entry-info a, .entry-meta a {
    color: #A9A9A9;
    text-transform: uppercase;
}
.more-link:hover, .entry-info a:hover, .entry-meta a:hover {
    color: #236688;
}

I'm not sure how you would access your css though. I've not used Wordpress before.

 

[Schot]

Give this a try Dilip: http://en.support.wordpress.com/custom-design/editing-css/ EDIT: Sorry... You have to pay for that function. Ugh! Maybe this? http://www.4-14.org.uk/wordpress-plugins/style-tweaker



See if you can change the css colours I posted above for that button. I'll be back to check your homework!

 

[meetdilip]

So helpful Schot. Thanks.

In my theme, they have warned not to edit style sheet, instead add it in a custom css box they have provided. I installed Mingle and added a CSS for its theme. Now how should I add this while that code exists ?

 

[meetdilip]

Also style tweaker plugin seems to have compatibility issues with WordPress 3.6. Please check this page

http://wordpress.org/plugins/style-tweaker/

I put the code you gave in custom css box, but there was no change. I didn't remove the old though. Here is the screen shot

Edit :

I even tried with only the code you gave and use ctrl + F5, still no changes. Just FYI.

 

[Alex.]

What I've done in the past (And not specific to WP) is I found the particular selector for that and then checked back in the markup and made a new class for that particular portion, then went back to the CSS file and added the new class with what I wanted. I'm not sure if this is even the right way to deal with this issue (Weigh in on this, Brad!) but it's worked every time. Quick and dirty, I suppose.

 

[Schot]

Cheers Arris, Ok! I'm back from my slumber. No no. I didn't just wake up, haha! Though sleeping for 12+ hours does sound rather nice to me.

Also style tweaker plugin seems to have compatibility issues with WordPress 3.6. Please check this page

http://wordpress.org/plugins/style-tweaker/

I put the code you gave in custom css box, but there was no change. I didn't remove the old though. Here is the screen shot

Edit :

I even tried with only the code you gave and use ctrl + F5, still no changes. Just FYI.

Now then Dilip. Let's see. The CSS editor that you posted a picture of like above. Is that something that is built into Wordpress or a plugin? Sorry about my link to that old plugin. I just checked your link to it and it looks like it hasn't been updated in 2 years. So as you probably decided, it wouldn't be wise to use. But if you have a built in editor then that will certainly be enough. I just don't want you to have to use ftp and file editors. Easier to use whatever tools built in.

Regarding the code I posted for you; I'm afraid I didn't change it in any way. I was only posting it for reference, haha. But! I'll post something that you can test with. Can you tell me how you'd like the button to look. I understand that you want it to be more visible and I understand why you're wanting this. It's quite faded. But if you're wanting certain colours then now is the time to get those creative thoughts flowing so we can try some ideas out.

Here's a little test you can try:

in the list of CSS you will need to find:

.more-link, .entry-info, .entry-meta, .entry-info a, .entry-meta a {
    color: [COLOR="Green"]#A9A9A9[/COLOR];
    text-transform: uppercase;
}

In the code above it is the green coloured bit that we want to change so that the colour of your READ MORE link is more visible. Here's the tricky part though. You ICY skin is designed in a way that if we change the look of the READ MORE link then many other things will be changed too. Specifically targeting the READ MORE link would require editing the HTML or PHP of the theme. It can be done but let's see how you like this test first.

For this test you'll want to make the above code look like the below. All that will change is the text below marked in orange. So you can copy this whole text below and paste it over the version in your wordress or you could just copy that little bit of code that is coloured in orange and paste it over into your wordpress css. Something you can do to protect your work is to first copy aaaaall the code from your wordpress CSS into a text file on your computer and call the file style.css. That way you always have a copy of an untouched version of your theme's CSS.

.more-link, .entry-info, .entry-meta, .entry-info a, .entry-meta a {
    color: [COLOR="#EE4000"]#EE4000[/COLOR];
    text-transform: uppercase;
}

Questions?

 

[meetdilip]

Thanks Brad, I will give it a try. That custom css box was built in on the theme. So kind of you to help.

 

[meetdilip]

Worked like a charm. But all links in the post are of same colour now. Is it possible to get only READ MORE in that colour. I have kept it as such for you to check.

 

[Schot]

Yup! Very possible. I needed to break up your CSS into more specific segments but this should do it. Be sure to backup your CSS before following my instructions. I did test this on your site several times but I'm a little sleepy so... Don't trust me!


Find this chunk of code in your CSS:

.entry-meta {
     border-top: 1px solid #EFEFEF;
     font-size: 0.8em;
     line-height: 1.3;
     padding-top: 20px;
}

.entry-date, .author.vcard, .entry-tags, .entry-categories, .full-size-link {
     margin-right: 10px;
}

.comments-link {
     float: right;
}

.more-link {
     float: right;
     margin-left: 10px;
}

.more-link, .entry-info, .entry-meta, .entry-info a, .entry-meta a {
     color: #A9A9A9;
     text-transform: uppercase;
}

.more-link:hover, .entry-info a:hover, .entry-meta a:hover {
     color: #236688;
}

And replace that whole chunk of code above with the below chunk of code. Keep in mind that our admin zone code boxes have scroll bars. You'll need to scroll to copy the whole chunk of code. In addition I have coloured the bits of the code below that make the READ MORE link the colour that it is. The first one is the default colour the link appears as and the second coloured bit is the colour it changes into when your cursor is on top of the link. The hover colour as it's called:

.entry-meta {
    border-top: 1px solid #EFEFEF;
    font-size: 0.8em;
    line-height: 1.3em;
    padding-top: 10px;
}

.entry-date, .author.vcard, .entry-tags, .full-size-link {
    margin-right: 10px;
}

.entry-categories, .entry-categories a {
    color: #A9A9A9;
    margin-right: 10px;
    padding-top: 10px;
}

.entry-categories a:hover {
    color: #236688;
}

.comments-link {
    float: right;
}

.entry-meta, .entry-meta a {
    text-transform: uppercase;
}

.entry-info, .entry-info a {
    color: #A9A9A9;
    text-transform: uppercase;
}

.entry-info a:hover {
    color: #236688;
    text-transform: uppercase;
}

.more-link, more-link a {
    color: [COLOR="#2185C5"][B]#2185C5[/B][/COLOR];
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    padding-top: 0px;
    margin-left: 10px;
}

.more-link:hover {
    color: [COLOR="#009EFF"][B]#009EFF[/B][/COLOR];
}

Let me know how it goes!

 

[meetdilip]

he he. Still sleepy ?

Will try and update soon.

 

[meetdilip]

This is what I got in WAMP. The READ MORE became more thick and an increase in size. But no colour change

 

[meetdilip]

Brad, fixed it with help from a friend. Used

.more-link {
color: #EE4000 !important;
}

Many thanks for spending your time helping me

 

[Alex.]

Just curious, but wouldn't inline CSS have overridden main stylesheet CSS?

 

[meetdilip]

I am not pro enough to explain that. I just copy pasted as he said.

 

[Schot]

Just curious, but wouldn't inline CSS have overridden main stylesheet CSS?

Yup! Inline seems to trump all. At least in the case of external css vs embedded css with !important vs inline css with !important. From what I've read, inline CSS is at the top of CSS hierarchy. However that would be an HTML edit but it's preferred from a design logic sense to use external CSS before other methods of applying CSS.

Brad, fixed it with help from a friend. Used

.more-link {
color: #EE4000 !important;
}

Many thanks for spending your time helping me

Awesome! However... I was actually trying to avoid using !important lol. Using !important in CSS is in practice reserved for only the most difficult of situations. In your case it was just a bit of tidying up of the CSS. However I missed a couple things when I posted last night. Oops! I don't have CSS 1337 skillz yet so I have to do some research sometimes when editing. And quite a bit of testing, heh. There's nothing seriously wrong with what you're freind has done but it's a quick bandaid solution in place of a more thorough solution. It also means that there are two different locations of CSS that are trying to control how your READ MORE link looks which could create complications in the future for an inexperienced person wanting to make CSS design changes.
The reason why your friend needed to use !important and that I had some difficulty is because of a hierarchy system that CSS uses. And also because the CSS in your ICY theme was designed so that all your header and footer links would look the same. Making the READ MORE link look different means rewriting the selectors of CSS so that instead of having one rule that applied to all those different links we needed several rules to control how they appeared to allow specific control of how READ MORE looks and acts.

So! Keep things the way you have it now if you like but should you change your mind you can add my edit to your CSS.

You'll need to delete the change your friend made before applying my edit. It's difficult to be sure where he placed his edit because I don't have access to your wordpress but it appears to be embedded in the head of your html. To locate it you could ask him or edit your html in wordpress and look for:

<style type="text/css" id="custom-css">.more-link {
color: #EE4000 !important;
}

If you find it then delete it and continue below. I did test this several times on your site but on your side you may need to "hard refresh" your browser to see the results properly. If you apply the below changes then push CTRL and F5 at the same time to hard refresh your browser. It will clear your cache. In mac computers it might be CMD and F5.

Find this in your CSS:

.entry-meta {
    border-top: 1px solid #EFEFEF;
    font-size: 0.8em;
    line-height: 1.3;
    padding-top: 20px;
}
.entry-date, .author.vcard, .entry-tags, .entry-categories, .full-size-link {
    margin-right: 10px;
}
.comments-link {
    float: right;
}
.more-link {
    float: right;
    margin-left: 10px;
}
.more-link, .entry-info, .entry-meta, .entry-info a, .entry-meta a {
    color: #A9A9A9;
    text-transform: uppercase;
}
.more-link:hover, .entry-info a:hover, .entry-meta a:hover {
    color: #236688;
}

...And replace the above code with this code below.

.entry-meta {
     border-top: 1px solid #EFEFEF;
     font-size: 0.8em;
     line-height: 1.3em;
     padding-top: 10px;
}

.entry-date, .author.vcard, .entry-tags, .full-size-link {
     margin-right: 10px;
}

.comments-link {
     float: right;
}

.more-link, .more-link a {
     float: right;
     margin-left: 10px;
     color: #EE4000 ;
}

.more-link:hover {
     color: #FF7200;
}

.entry-categories, .entry-categories a {
     margin-right: 10px;
     padding-top: 10px;
}

.entry-meta, .entry-meta a, .entry-info, .entry-info a {
     text-transform: uppercase;
}

.entry-tags, .entry-tags a, .entry-info, .entry-info a, .entry-categories, .entry-categories a {
     color: #A9A9A9;
}

.entry-info a:hover, .entry-tags a:hover, .entry-categories a:hover {
     color: #236688;
}

P.s.
Don't feel bad if you decide not to use my solution and worry that I may be hurt. I just love puzzles and for me this was a puzzle that I wanted to complete. No need to use this solution in order to reward me. I learned a bit about Wordpress, which I've never used. That's reward enough.