wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Change Link Color WordPress

Tutorials

Change Link Color WordPress

Last updated on February 18, 2017
Posted on October 11, 2010

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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

code color link twentyten Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Add Image To WordPress
→ WordPress Add Video To Post

Comments

  1. Suresh Khanal says

    October 11, 2010 at 8:02 am

    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.

    • Kimi says

      October 11, 2010 at 8:08 am

      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.

  2. Imran@TechiesBlog says

    October 12, 2010 at 12:30 pm

    Hi Kimi,

    Very excellent Tutorial. Is there any possibilities that we can make it globally

    Thanks for Sharing
    -Imran

    • Kimi says

      October 12, 2010 at 11:11 pm

      Hey Imran,

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

      Thanks for coming and commenting 🙂

  3. Keith Davis says

    October 31, 2010 at 11:43 am

    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.

    • Kimi says

      October 31, 2010 at 5:13 pm

      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 🙂

  4. Robert says

    January 20, 2011 at 1:44 pm

    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

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept