Log In · Register

 
How do you do this?, Profile 2.0 Custom Links...i.e. Send Msg, etc.
G30M3TRY
post Feb 24 2009, 06:06 AM
Post #1


Member
**

Group: Member
Posts: 13
Joined: Dec 2008
Member No: 704,765



I want my contact buttons to look exactly like this guy's.

 
 
Start new topic
Replies
Mickey
post Feb 24 2009, 04:19 PM
Post #2


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127



You need to design an image with both the original images and the hover images on it like this. You also need to design an image to replace the title with like this. Then place this code in your CSS section:

CODE
div.basicInfoModule span.urlLink { position: relative; width: auto; margin: 26px 8px 0 -40px; }
div.basicInfoModule span.urlLink a
{display: block; text-indent: -10000em; background: url("URL") no-repeat -135px -1px; width: 30px; height: 31px; padding: 0; line-height: 1; text-align: left; }
div.basicInfoModule span.urlLink a:hover { background-position: -135px -31px; }
ul.contactLinks { background: url("URL") no-repeat; width: 174px; height: 43px; margin: -15px 0 17px; padding: 41px 0 0; }
ul.contactLinks li { float: left; }
ul.contactLinks li a { display: block; width: 40px; height: 30px; text-indent: -10000em; padding: 0; text-align: left; background: url(http://i41.tinypic.com/kyhwn.png) no-repeat; }
ul.contactLinks li.message { margin-left: 10px; }
ul.contactLinks li.addToFriends { margin-left: 0px; }
ul.contactLinks li.comment { margin-left: 0px; }
ul.contactLinks li.message a { background-position: 1px 0; }
ul.contactLinks li.addToFriends a { background-position: -37px -1px; }
ul.contactLinks li.comment a { background-position: -82px -1px; }
ul.contactLinks li.message a:hover { background-position: 1px -30px; }
ul.contactLinks li.addToFriends a:hover { background-position: -38px -31px; }
ul.contactLinks li.comment a:hover { background-position: -82px -31px; }

Replace the first "URL" with the url of the image for the contact icons. Replace the second "URL" with the url of the image for the title. If your image isn't positioned quite like the one that user is using, you need to play around with the positioning of the background so you can choose which section of that background you want to show. It should be easy enough to understand once you experiment with the different values of the link and hover properties of each contact button.
 

Posts in this topic


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: