Tutorial
How To: Change Link And Highlight Colors
Note: Most of our themes contain options for changing link and highlight colors within the Appearance > Theme Options. This tutorial is for older versions of our themes that require changing the colors within the stylesheet.
In this tutorial I will explain how to replace the current theme link and highlight colors with a color of your choosing. This can be accomplished using a “Find and Replace” method, which is available in most text editors and web development software.
Organic Themes are designed with a single link and highlight color. This makes changing the link and highlight colors within our themes a relatively simple customization. However, you will need to edit the stylesheet and have a basic understanding of web colors to accomplish this tutorial.
Colors are applied within a stylesheet as Hex Codes — a combination of 6 letters and numbers that make up the color, such as #FF3300. The Hex Code of your desired color can be found using most image editing and design software. If you do not have any image editing software, you can use an online color generator to select your color.
With this basic understanding of web colors, we can begin the tutorial:
- Open your stylesheet by navigating to the Appearance > Editor within the WordPress admin.
- Copy all the code from your stylesheet.
- Paste the code in to a text editor or program such as TextEdit, Word or DreamWeaver.
- Save the unedited stylesheet to your computer as a backup, in case something goes wrong.
- Find the current link color within the theme. This can be accomplished by scrolling through the stylesheet until you see a style similar to this (The Hex Code will vary depending on the theme):
a { color: #FF3300; text-decoration: none; } - Highlight the Hex Code within your editing program.
- Choose the Find and Replace option, and replace all instances of the existing Hex Code, with your desired color.
- When all color codes have been replaced, copy and paste the updated stylesheet back in to WordPress.
- Save the changes.
- Refresh your site.
Note: Some of our themes may require the editing of a couple image files within the images folder of the theme to ensure that all colors have been changed.
