Saturday, July 11, 2009

Testing post .

Most of you have probably seen link icons such as this one . They are designed to make a link more prominent. I have created a small arrow icon that you can use to emphasize a specific link and it is a little more subtle than the page icon.
To create this type of link, you apply a unique CSS class to the link's anchor tag. This code defines the arrow image as the links background. It is then positioned so that it displays to the right of the link text and the color is set to match that of the arrow.
Below is the CSS used for creating and positioning these background images. You will need to add this into the style sheet section of your template. If your not familiar with this part of the template, it is towards the top and comprises a large portion of the code. It begins with this opening tag: <style type="text/css"> and ends with </style> You can add the following CSS anywhere in this section as long as it's after a closing bracket }.


a.special:link{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}
a.special:visited{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px;
padding: 0 12px 0 0;
}
a.special:hover{
color: #000000;
text-decoration: underline
background: url(image address) no-repeat 100% 3px ;
padding: 0 12px 0 0;
}

Notice we have added three different CSS elements. The first defines how the link looks when it has not been clicked and the cursor's pointer is not hovering over the link. The second element defines how the link looks after it has been clicked upon or visited. The last element defines our links look when the cursor's pointer is hovering above it.
Now you will need to enter into the above code the address of the image you want to display during each elements action. For example, if you want the link text and arrow to be red when it has not been clicked, you will enter the #FF000 color code in the place where it says color in our first element above. Then you will add the address of the red arrow icon from the list below. This will be entered between the brackets where it says "image address". You will have to do this for each of the three different elements.

blue-sky1

No comments:

Post a Comment