Tips and Tricks for your Multiply Themes

Replace the usual underline text decoration of links in your multiply themes

I used a small animated gif arrow image as my underline for the links when hover,. (size of image depends on you, just make it sure it is small and will look like a line when on repeat-x)

this is the image i used (the size is 10x5)..

you can do this on all links on your entire site or just a section of your site links only..

this code is for navbar links only

a.topt:hover, a:visited.topt:hover, a:link.topt:hover, a.toptsel:hover, a:visited.toptsel:hover, a:link.toptsel:hover { text-decoration:none; padding-bottom: 2px; background: url(image_url_here) repeat-x bottom ; }


this code is for entire links..


a:hover, a:visited:hover, a:link:hover { text-decoration:none; padding-bottom: 2px; background: url(image_url_here) repeat-x bottom; }


just choose a proper selector where you want to apply this..

you can adjust the padding to place it at the top(as overline), bottom(underline) or midlle(like strike-through)..


value of text-decoration must be none..

NOTE: if you use the second code.. all links will have that underline image ,. including photos
in album, thumbnails (if sets in thumbnails) and all headshot links.. -------------------------------------------------------------------------------------------------
if you want the usual text decoration, here are some you can use,.

Value's of text decoration

text-decoration: underline; text-decoration: overline; text-decoration: linethrough; text-decoration: blink;
text-decoration: underline overline;

See my original article at..Multiply Themes and Layouts site.

You've read the post. What's next?

If you like this post then please consider subscribing to our RSS feed. You can also subscribe by email to receive free updates directly in your inbox.

Submit Article :-)

Related Posts by Categories

Widget by Hoctro | Jack Book