If you don’t like the link color of your themes, there is a really simple solution to customize the default color with a few lines of code. In this tutorial we will show you how you can use simple CSS commands to customize the hover, active and visited link color of your web page links.
Video Tutorial – You don’t have to watch the video if you don’t want to. All information can be found in this post as well. If you are not familiar with custom CSS, we recommend you to visit our Tutorial on embedding custom CSS with WordPress.
Change default link color
a:link { color: red; }The a:link command addresses all links of a website. The “red” serves as an example and can be adapted to your wishes. If you haven’t found a suitable color for your website links yet, it’s worth browsing through an appropriate color table.
Visited Change link color
a:visited { color: green; }The a:visited command defines the color of visited links. As soon as a visitor clicks on a link, it will appear permanently in green. Of course, the colour can be individually adjusted here as well.
Change active link color
a:active { color: yellow; }The a:active command determines the color of a link at the moment of click and therefore appears only very briefly. Whether this is really necessary remains to be seen. For the sake of completeness we have included it in this article.
Hover Change link color
a:hover { color: purple; }The a:hover command defines the color of a link at the moment it is hovered by the mouse pointer.
e.g;
Change the link color with WordPress – Conclusion
It certainly makes sense to use design elements to stand out from other websites. However, user-friendliness should always be in the foreground. This is especially important for the font and font color. Be fancy, but always pay attention to good readability and pleasant contrasts. Good ones succeed!
Comments