Formatting Links in WordPress to Match Your Design in Photoshop

set photoshop links in wordpress

This week we focus on formatting links in WordPress to match what you designed in Photoshop. In the last two posts, we reviewed how to format text and headings in WordPress so that they match what you designed in Photoshop.  Before we review formatting links in WordPress, let’s review how to find the color and font settings we’re using inside Photoshop.

Find Font and Color Settings in Photoshop

set photoshop links in WordPress

After formatting your links in Photoshop, place the text cursor inside a link in Photoshop. Notice the settings at the top of the window in the control panel. The font used, font size and color will be shown. Use these settings to set the corresponding CSS properties and values inside WordPress.

Set Font Color for Links in WordPress

For links within the content of the site, you’ll need to provide CSS to format the anchor (<a>) tag. If you want to do a different color for links, set the color for the ‘a’ tag.

a:link {
   color: #ff0000;
}

If you want to change the background color for links, set the background-color property. This can be a good way to make your links look more like buttons – for a sidebar or navbar link.

a:link {
    background-color: #f00;
}

If the link is within a specific id or class, you may need to specify the id or class in front of the anchor tag.

.widget a:link {
   color: #00f;
}

Format Mouseovers in WordPress

You may or may not include the format for your mouseover links in your Photoshop file, but you will want to include some kind of formatting within WordPress to indicate a hotspot upon mouseover. If you want to your links to be more indicative of a hot spot, consider changing the color of the text and/or background upon rollovers.

If you want to change the color of text upon a mouseover, add the :hover state to the appropriate class or id.

.main-content a:hover {
    color: #f00;
}

Or, to change the background color upon rollover:

.main-content a:hover {
    background-color: #f00;
}

I’ve seen sites (and have done some myself) that will do both: change the color of the text and the color of the background upon rollover.

.main-content a:hover {
    color: #0f0;
    background-color: #f00;
}

Formatting Buttons in WordPress

To make your links look like buttons (common practice for a top navbar, or a sidebar), you’ll use additional formatting options.

Define a class that formats the button. Below is an example:

.myButton {
    background-color:#a12c1d;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    border-radius:14px;
    border:1px solid #999;
    display:inline-block;
    cursor:pointer;
    color:#999;
    font-family:arial;
    font-size:14px;
    padding:2px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #636363;  
}

Add the html code to use this button on a page or post:

<a href="http://onwardstudios.com" target="_blank" class="myButton">New button</a>

This will make a button like this:

design photoshop button in WordPress

If I wanted to change the color of the background and/or text upon rollover, I add the following CSS:

.myButton:hover {
    background-color:#E63F29;
    color: #000;
}

The size of the button is determined by the length of the text via the padding property. If I wanted all buttons to be the same size, I could eliminate the padding property and add the width property. (I would also add and set the text-align to center.)

What other techniques have you used to format your links in WordPress?

Free Webinars for Creative-preneurs

Learn more about WordPress and Photoshop by joining our Free Webinars. Sign up and we'll let you know about our next webinar...Plus, you will get our newsletter filled with relevant articles and how-to tutorials.

We hate spam as much as you do. Un Powered by ConvertKit
Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *