Change Link Color WordPress

How to change text link color in Twenty Ten wordpress 3.0.1 theme.

One of my visitors asked how to change the colors of the link text and visited link text color.


It does depend on, do you want to change the whole link color of the whole theme or the content link color only.

However if you want to change the entire link color of Twenty Ten theme, it is not difficult.

Video:

Steps:
1. Open your style.css file and find line 313 which says;

a:link{
color:#0066cc;
}
a:visited {
color: #743399;
}
a:active,
a:hover {
color: #ff4b33;
}

Link, Hover, Visited Color.

2. Modify color above to any colors you like.

If you are satisfied with the result, then you can stop right here, but if you want to change “only” the link color on the content, then we have to specify the div and the class.

3. To change the content link color, add this line of codes in the very bottom of your style.css file:

/*color link of the content*/
.entry-content a{color:#1BC100}

Play with the color, and update file. Refresh your post.

Result image:

(1.) The link on the content will have green color (as we wanted).

(2.) But the “Continue reading” color is also green, probably you don’t want this.

(3.) Sidebar color will stay blue (default).

4. If you want to bring back the continue reading text color back to the previous color, add this code right under the code we added above (step 3).

p a.more-link{color:#0066CC;}

Result: (we have changed only the content link color, the rest will stay)

I hope this can help you modifying your link text color, play around with the color and get what you need. :)

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. Suresh Khanal says

    Nice tutorial. Thank you for the work you have done. Do the css lines are same for all themes or it will vary among different themes? Be whatever, your tutorial can be easily followed.

    • says

      Thank you Suresh,

      Nope, the css line code will only apply to the original TwentyTen theme.

      For another theme, it will have another code mostly, because the creators are also different.

      Best regards,
      Kimi.

    • says

      Hey Imran,

      No, that’s not possible unfortunately, because every themes have different css code.

      Thanks for coming and commenting :)

  2. says

    Hi Kimi
    Such a well laid out and well explained tutorial.
    Nice to be reminded about link colours and how to change them.

    BTW – Good to see that you are using the GASP plugin – looks like spam is a thing of the past.

    • says

      Hey Keith!

      Thanks for stopping by. Yes, this post was made because one of my commenters asked whether we can do it or not.

      You’re right, i am using G.A.S.P, it is an awesome plugin that i recommend to stop spam bots.

      Spams are the past now for me :)

  3. says

    Hello Kimi,
    thanks for your great tutorial.
    How would you change only the link color of the top navigation bar in WP twentyten theme?
    I would really appreciate your opinion on this task.
    Thanks and greetings from snowy Switzerland.
    Robert