Modern Twist To Standard Link Colors

Today links may be red, green or even orange. There really are no limitations to the color options, so use your imagination and get creative. (Just keep in mind they should be visible to your readers.)

Standard Link Colors Revisited

As TDH uses the Sahifa theme, links are… understated (to put it nicely). You cannot recognize links from text as there is no difference. Instead the plan is to implement the (old-fashioned) idea of blue links with a red hover and purple visited link. However, to help it look more inline with the overall site aesthetics these colors will get an upgrade. The versions of these colors used within the different Sahifa skins will be used instead. You can see our modern twist on the hyperlink colors below.

Side By Side Comparison

As you can see the colors are following the same idea, but with a fresher version of the colors to match the current TDH website design. The reason we are using the traditional idea of hyperlink colors is to not confuse visitors. On one of our other websites we used red as our hyperlinks and when Branndon’s dad checked it out he asked why the links weren’t blue. That reminded us that people newer to the Internet (and computers in general) are used to something and changing it can cause confusion. We are hoping to avoid that confusion with this approach.

Adding Hyperlinks in WordPress

It’s very simple to add a hyperlink within the WordPress posts and pages. First you’ll need to be in the ‘Add/Edit Post’ page where you add content. At the top of text box there are several icons for editing your post/page content. You need to highlight the text you wish to make into a link. Choose the Chain Link Icon

Enter the Link Destination URL (Website Address) The ‘Title’ and ‘Open in a new window/tab’ are optional. Then simply click the ‘Add Link’ button. You just added a hyperlink!

Example: The Digital Hippies

In order to modify the link colors CSS coding will be necessary. The amount of coding you will need depends on whether you are using Sahifa theme, like us, or not. You’ll find the cut and paste code below for both methods.

Sahifa Theme: Styling the Links Within the Post

Please note that even with the Sahifa theme you will be required to make some edits the style.css file for modifying the visited hyperlinks style. This is not required if you prefer to keep the visited links the same as non-visited links. Many websites today choose this as an option, while others do not. It is simply your preference. First you’ll need to head over to the ‘Sahifa Settings’ within your Dashboard of WordPress. Click the ‘Sahifa’ menu option on the left (at the bottom).

Sahifa > Sahifa Settings > Styling > Post Styling

Make the necessary changes to your color choices in the options provided. You can see the colors we used in this example.

You could stop here or continue reading to make them bold and add a style to the visited links.

Non-Sahifa WordPress Themes

Note: Hopefully your theme has the ability to add custom CSS coding without needing to edit the style.css file (found under Appearance > Editor). This will help you avoid possibly breaking your website. If you should break your website, then you will be required to do some troubleshooting. Read this for more information.

Making Links Bold

We used the CSS font-weight property to make our hyperlinks bold. You can see our use in the code snippet below (notice we are only modifying links within a paragraph with the “p”). You can also make links bolder with ‘bolder’ instead of ‘bold’.

Making Links Bold within Paragraphs

1

2

3

pa{

font-weight:bold;

}

Adding Hover Style

When a website visitor hovers over a link it is often helpful to change the color or styling in some way. This makes it more easily distinguishable as a link that is clickable to the user. In this example the hover link color changes to the red color on our site.

Example of Adding Hover Style to Hyperlink

1

2

3

pa:hover{

color:#ef3636

}

Adding Visited Style

We wanted to change the color of links after a user has visited that link. After someone clicks on a link and is taken to that destination, then the link will turn (the modern) purple color on our site. This is beneficial to users wanting to know which links they have clicked on before. Again we are only modifying links found within a paragraph (p).

Changing the Color of Visited Links within Paragraphs

1

2

3

pa:visited{

color:#7b77ff;

}

Final Code Snippet

Example: The Digital Hippies

You can use the following code to stylize your hyperlinks as we have done here on TDH, with the Modern Twist on the traditional hyperlinks. Remember to paste this within your CSS style sheet (style.css), or the custom CSS box your theme provides (better option).

CSS Code Used on TDH for Link Styling

1

2

3

4

5

6

7

8

9

10

11

12

13

pa{

color:#37b8eb

font-weight:bold;

text-decoration:underline;

}

pa:hover{

color:#ef3636

}

pa:visited{

color:#7b77ff;

}

Sahifa Users: See above as you will only need to code the bold setting and hyperlink hover setting into the style.css file. This is provided in the code snippet below.

CSS Coding for Sahifa Users

1

2

3

4

5

6

7

pa{

font-weight:bold;

}

pa:visited{

color:#7b77ff;

}

What color are your hyperlinks? Tell us in the comments below.

SIGN UP TO RECEIVEFREE EMAIL UPDATES

You CAN run a business, raise a family, and travel full time!We’ll show you how with free articles and news.

Stop Waiting. Start Doing.

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.