hi5 Forums

[Andrew]

User Info

Text Options

Text Color:

Code: Select all

#user-info {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-info {background-color: #FF0000;}
#user-info {background-color: rgb(255,0,0);}
#user-info {background-color: red;}

[Click Here to view list of Color Codes]
http://www.hi5-world.com/ColorCodes.htm




Font Type:

Code: Select all

#user-info {font-family: -font-family?-;}

-font-family?- = Any Font name

Example:
#user-info {font-family: Arial;}




Font Size:

Code: Select all

#user-info {font-size: -size?-px;}

-size?- = Any numeric positive value (or at size: 0px text is not visible)

Example:
#user-info {font-size: 16px;}



Font Style:

Code: Select all

#user-info {font-style: -font-style?-;}

-font-style?- = Any of the below options:
normal
italic
oblique

Example:
#user-info {font-style: italic;}



Font Weight:

Code: Select all

#user-info {font-weight: -font-weight?-;}

-font-weight?- = Any of the below options:

normal
bold

Example:
#user-info {font-weight: normal;}



Text-Align:

Code: Select all

#user-info {text-align: -text-align?-;}

-text-align?- = Any of the below options:

left
right
center
justify

Example:
#user-info {text-align: center;}



Text-Indent:

Code: Select all

#user-info {text-indent: -text-indent?-%;}

-text-indent?- = Any number from 0 - 100

Example:
#user-info {text-indent: 25%;}



Text-Decoration:

Code: Select all

#user-info {text-decoration: -text-decoration?-;}

-text-decoration?- = Any of the below options:

none
underline
overline
line-through
blink

Example:
#user-info {text-decoration: underline;}




Link Options

Link Color:

Code: Select all

#user-info a {color: #[color=#FF0000]-color?-[/color];}

-color?- = Any Hex code, RGB value or HTML name Color Code
(As described earlier in this page)

Example:
#user-info a {color: ##FF0000;}



Font Type:

Code: Select all

#user-info a {font-family: [color=#FF0000]-font-family?-[/color];}

-font-family?- = Any Font name

Example:
#user-info a {font-family: Arial;}




Font Size:

Code: Select all

#user-info a {font-size: -size?-px;}

-size?- = Any numeric positive value (or at size: 0px text is not visible)

Example:
#user-info a {font-size: 16px;}



Font Style:

Code: Select all

#user-info a {font-style: -font-style?-;}

-font-style?- = Any of the below options:
normal
italic
oblique

Example:
#user-info a {font-style: italic;}



Font Weight:

Code: Select all

#user-info a {font-weight: -font-weight?-;}

-font-weight?- = Any of the below options:

normal
bold

Example:
#user-info a {font-weight: normal;}



Text-Align:

Code: Select all

#user-info a {text-align: -text-align?-;}

-text-align?- = Any of the below options:

left
right
center
justify

Example:
#user-info a {text-align: center;}



Text-Indent:

Code: Select all

#user-info a {text-indent: -text-indent?-%;}

-text-indent?- = Any number from 0 - 100

Example:
#user-info a {text-indent: 25%;}



Text-Decoration:

Code: Select all

#user-info a {text-decoration: -text-decoration?-;}

-text-decoration?- = Any of the below options:

none
underline
overline
line-through
blink

Example:
#user-info a {text-decoration: underline;}





Visibility Options


Opacity

Code: Select all

#user-info {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-info {filter:alpha(opacity=70); opacity: 0.7;}



Hide entire User Info section

Code: Select all

#user-info {display: none;}

Hide all "Bold Headings" in this section:

#user-info .box_profile_info_small_heading {display: none;}


Hide all "Normal Text" in this section:

#user-info .box_profile_info_small_content {display: none;}




Background Options
These options affect the "invisible" box area the User Info section is 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-info {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-info {background-color: #FF0000;}
#user-info {background-color: rgb(255,0,0);}
#user-info {background-color: red;}

[Click Here to view list of Color Codes]
http://www.hi5-world.com/ColorCodes.htm



Choose Background Image:

Code: Select all

#user-info {background-image: url(-url?-);}

-url?- = Any image url

Example:

#user-info {background-image: url(http://forums.hi5-world.com/images/Background.jpg);}



Background Repeat:

Code: Select all

#user-info {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-info {background-repeat: no-repeat;}



Background Position:

Code: Select all

#user-info {background-position: -x-% -y-%; background-attachment: fixed;}

Horizontal Position: -x-%
Vertical Position: -y-%

Position Values must be between 0 - 100%

Example:

#user-info {background-position: 20% 65%; background-attachment: fixed;}




Hover Effects

Code: Select all

#user-info:hover {-Code Here-;}

By substituting,

#user-info
for
#user-info:hover

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 Info.

Example:
#user-info:hover {background-image: url(http://forums.hi5-world.com/images/Background_Hover.jpg);}

This will give you a different background image when you hover over the User Info




Targeted Text Editing

All of the above "Text", "Visibility" and "Hover" options can be used to alter the Headings and Normal text individually.


Edit all "Bold Headings" in User Info:

Code: Select all

#user-info .box_profile_info_small_heading {-code?-;}

Replace

#user-info
for
#user-info .box_profile_info_small_heading

Example:
#user-info .box_profile_info_small_heading {font-weight: normal;}



Edit all "Normal Text" in User Info:

Code: Select all

#user-info .box_profile_info_small_content {-code?-;}

Replace

#user-info
for
#user-info .box_profile_info_small_content

Example:
#user-info .box_profile_info_small_content {font-size: 16px;}