User LinksImage OptionsChange Symbol Images:This changes those small images on your user Links all to one image of your choice. (The image is repeated on each button)
- Code: Select all
#user-links a {display:list-item}
#user-links a {list-style:url(-url?-) inside;}
#user-links img {visibility:hidden}
Example:#user-links a {display:list-item}
#user-links a {list-style:url(
http://forums.hi5-world.com/images/user-links.gif) inside;}
#user-links img {visibility:hidden}
Your image size should be around
20x
20px for best results.
Add a Button Background:This will give you a button effect background for each of your user-links
- Code: Select all
#user-links a {padding-left:4px; padding-top:4px;}
#user-links a {display:list-item}
#user-links a {background:url(-url?-;}
You image should be exatcly:
163px (width) ×
27px (height)
Example:This is a full example with hover effects included that you can test:
#user-links a {padding-left:4px; padding-top:4px;}
#user-links a {display:list-item}
#user-links img {filter:alpha(opacity=50); opacity: 0.5;}
#user-links a:hover img {filter:alpha(opacity=80); opacity: 0.8;}
#user-links a {background:url(http://www.hi5-world.com/UserLink-Off.gif); background-repeat:no-repeat;}
#user-links a:hover{background:url(http://www.hi5-world.com/UserLink-ON.gif); background-repeat:no-repeat;}
#user-links a{color: #b8d2b8; font-family: Arial Black;
font-size: 11px;
text-decoration:none;}
#user-links a:hover{color: #e6f7e6;}
Text OptionsText Color: - Code: Select all
#user-links a {color: #[color=#FF0000]-color?-[/color];}
-color?- -color?- = Any Hex code, RGB value or HTML name Color Code
Formats:(1) Hex code (
#FF0000)
(2) RGB value (
rgb(255,0,0))
(3) HTML name (
red)
Examples:#profile-name{background-color:
#FF0000;}
#profile-name{background-color:
rgb(255,0,0);}
#profile-name{background-color:
red;}
[Click Here to view list of Color Codes]http://www.hi5-world.com/ColorCodes.htmExample:#user-links a {color: #
#FF0000;}
Font Type: - Code: Select all
#user-links a {font-family: [color=#FF0000]-font-family?-[/color];}
-font-family?- = Any Font name
Example:#user-links a {font-family:
Arial;}
Font Size: - Code: Select all
#user-links a {font-size: -size?-px;}
-size?- = Any numeric positive value
(or at size: 0px text is not visible)Example:
#user-links a {font-size:
16px;}
Font Style: - Code: Select all
#user-links a {font-style: -font-style?-;}
-font-style?- = Any of the below options:
normal
italic
obliqueExample:#user-links a {font-style:
italic;}
Font Weight: - Code: Select all
#user-links a {font-weight: -font-weight?-;}
-font-weight?- = Any of the below options:
normal
boldExample:#user-links a {font-weight:
normal;}
Text-Align: - Code: Select all
#user-links a {text-align: -text-align?-;}
-text-align?- = Any of the below options:
left
right
center
justifyExample:#user-links a {text-align:
center;}
Text-Indent: - Code: Select all
#user-links a {text-indent: -text-indent?-%;}
-text-indent?- = Any number from 0 - 100
Example:#user-links a {text-indent:
25%;}
Text-Decoration: - Code: Select all
#user-links a {text-decoration: -text-decoration?-;}
-text-decoration?- = Any of the below options:
none
underline
overline
line-through
blinkExample:#user-links a {text-decoration:
underline;}
Visibility OptionsOpacity- Code: Select all
#user-links {filter:alpha(opacity=IE??); opacity: FF??;}
IE?? = any integer value from 0 - 100
FF?? = Must be 1/100th of the previous IE?? value.
(or IE?? X 0.01)Example:#user-links {filter:alpha(opacity=
70); opacity:
0.7;}
Hide User Links Section:- Code: Select all
#user-links {display: none;}
Hide User Link Icons:- Code: Select all
#user-links img {display: none;}
Hide Individual User Links:Hide
Add as a Friend 
- Code: Select all
a[name="&lid=OtherProfile_AddAsFriend"] {display: none !important;}
Hide
Send Message 
- Code: Select all
a[name="&lid=OtherProfile_SendMessage"] {display: none !important;}
Hide
Leave Comment 
- Code: Select all
a[name="&lid=OtherProfile_AddComments"] {display: none !important;}
Hide
Add to Favorites 
- Code: Select all
a[name="&lid=OtherProfile_AddToFavorites"] {display: none !important;}
Hide
Edit My Basic Info 
- Code: Select all
a[name="&lid=MyProfile_EditProfileBasic"] {display: none !important;}
Hide
View As Another 
- Code: Select all
a[name="&lid=MyProfile_EditCustomize"] {display: none !important;}
Hide
Skin my Profile 
- Code: Select all
a[name="&lid=MyProfile_ChooseSkin"] {display: none !important;}
Hide
Customize Profile 
- Code: Select all
a[name="&lid=MyProfile_EditNewProfileBasic"] {display: none !important;}
Hides both
Invite Friends &
Add Applications

- Code: Select all
a[name="&lid=MyProfile_AddWidget"] {display: none !important;}
Background OptionsThese options affect the "invisible" box area the user-links are encased in.
These options are not usually used, but it can be useful if you have a good imagination.
Choose Background Color: - Code: Select all
#user-links {background-color: -color?-;}
-color?- = Any Hex code, RGB value or HTML name Color Code
Formats:(1) Hex code (
#FF0000)
(2) RGB value (
rgb(255,0,0))
(3) HTML name (
red)
Examples:#user-links {background-color:
#FF0000;}
#user-links {background-color:
rgb(255,0,0);}
#user-links {background-color:
red;}
[Click Here to view list of Color Codes]http://www.hi5-world.com/ColorCodes.htmChoose Background Image:- Code: Select all
#user-links {background-image: url(-url?-);}
-url?- = Any image url
Example:#user-links {background-image: url(
http://forums.hi5-world.com/images/Background.jpg);}
Background Repeat: - Code: Select all
#user-links {background-repeat: -repeat?-;}
[?]
-repeat?- = Any of the below options
[1]
repeat : The background image will be repeated vertically and horizontally.
[2]
repeat-x : The background image will be repeated horizontally.
[3]
repeat-y : The background image will be repeated vertically
[4]
no-repeat : The background-image will be displayed only once
Example:
#user-links {background-repeat:
no-repeat;}
Background Position:- Code: Select all
#user-links {background-position: -x-% -y-%; background-attachment: fixed;}
Horizontal Position:
-x-%
Vertical Position:
-y-%
Position Values must be between
0 - 100%Example:
#user-links {background-position:
20% 65%; background-attachment: fixed;}
Hover Effects- Code: Select all
#user-links:hover {-Code Here-;}
By substituting,
#user-links
for
#user-links
:hover .content
All of the above codes, (Background Options, Text Options, Visibility Options), can be used to give a different effect on the target, when the Mouse Pointer is hovered over the object in the User Links Section.Example:##user-links
:hover {
background-image: url(http://forums.hi5-world.com/images/BodyBackground_Hover.jpg);}
This will give you a different background image when you hover over the User Links Section.