How do you do this?, Profile 2.0 Custom Links...i.e. Send Msg, etc. |
How do you do this?, Profile 2.0 Custom Links...i.e. Send Msg, etc. |
![]()
Post
#1
|
|
Member ![]() ![]() Group: Member Posts: 13 Joined: Dec 2008 Member No: 704,765 ![]() |
|
|
|
![]() |
![]()
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. |
|
|
![]() ![]() |