hi5 Forums

[Andrew]

About-Center




Background Options


Choose Body Background Color:

Code: Select all

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

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



Choose Body Image:

Code: Select all

#about-center {background-image: url(-url?-);}

-url?- = Any image url

Example:

#about-center {background-image: url(http://forums.hi5-world.com/images/BodyBackground.jpg);}



Background Repeat:

Code: Select all

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



Background Position:

Code: Select all

#about-center {background-position: -x-% -y-%; background-attachment: fixed;}

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

Position Values must be between 0 - 100%

Example:

#about-center {background-position: 20% 65%; background-attachment: fixed;}




Text Options

Text Color:

Code: Select all

#about-center {color: [color=#FF0000]-color?-[/color];}

-color?-

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

Example:
#about-center {color: #FF0000;}



Font Type:

Code: Select all

#about-center {font-family: [color=#FF0000]-font-family?-[/color];}

-font-family?- = Any Font name

Example:
#about-center {font-family: Arial;}




Font Size:

Code: Select all

#about-center {font-size: -size?-px;}

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

Example:
#about-center {font-size: 16px;}



Font Style:

Code: Select all

#about-center {font-style: -font-style?-;}

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

Example:
#about-center {font-style: italic;}



Font Weight:

Code: Select all

#about-center {font-weight: -font-weight?-;}

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

normal
bold

Example:
#about-center {font-weight: normal;}



Text-Align:

Code: Select all

#about-center {text-align: -text-align?-;}

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

center
right
center
justify

Example:
#about-center {text-align: center;}



Text-Indent:

Code: Select all

#about-center {text-indent: -text-indent?-%;}

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

Example:
#about-center {text-indent: 25%;}



Text-Decoration:

Code: Select all

#about-center {text-decoration: -text-decoration?-;}

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

none
underline
overline
line-through
blink

Example:
#about-center {text-decoration: underline;}




Text Links


You can use all of the above Text Options codes to alter your link states.

Link
Defines the style for normal unvisited links.

Code: Select all

#about-center a:link {-code?-;}

Visited
Defines the style for visited links.

Code: Select all

#about-center a:visited {-code?-;}

Active
Defines the style for active links.
A link becomes active once you click on it.

Code: Select all

#about-center a:active {-code?-;}

Hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.

Code: Select all

#about-center a:hover {-code?-;}

Examples:
#about-center a:link {color: #0040FF; font-weight: normal; text-decoration: underline;}
#about-center a:visited {color: #FF0000;}
#about-center a:active {font-weight: bold;}
#about-center a:hover {text-decoration: none;}





Visibility Options


Opacity

Code: Select all

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



Hide Body

#about-center {display: none;}




Hover Effects

Code: Select all

#about-center :hover {-Code Here-;}

By substituting,

#about-center
for
#about-center :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 About-Center.

Example:
#about-center :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 About-Center