hi5 Forums

[Andrew]

Groups (Nav Bar)


Background Options


Choose Nav Bar Background Color:

Code: Select all

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

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



Choose Nav Bar Image:

Code: Select all

#groups h2 {background-image: url(-url?-);}

-url?- = Any image url

Example:

#groups h2 {background-image: url(http://forums.hi5-world.com/images/NavBarBackground.jpg);}



Background Repeat:

Code: Select all

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



Background Position:

Code: Select all

#groups h2 {background-position: -x-% -y-%; background-attachment: fixed;}

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

Position Values must be between 0 - 100%

Example:

#groups h2 {background-position: 20% 65%; background-attachment: fixed;}




Text Options

Text Color:

Code: Select all

#groups h2 {color: #[color=#FF0000]-color?-[/color];}

-color?-

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

Example:
#groups h2 {color: ##FF0000;}



Font Type:

Code: Select all

#groups h2 {font-family: [color=#FF0000]-font-family?-[/color];}

-font-family?- = Any Font name

Example:
#groups h2 {font-family: Arial;}




Font Size:

Code: Select all

#groups h2 {font-size: -size?-px;}

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

Example:
#groups h2 {font-size: 16px;}



Font Style:

Code: Select all

#groups h2 {font-style: -font-style?-;}

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

Example:
#groups h2 {font-style: italic;}



Font Weight:

Code: Select all

#groups h2 {font-weight: -font-weight?-;}

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

normal
bold

Example:
#groups h2 {font-weight: normal;}



Text-Align:

Code: Select all

#groups h2 {text-align: -text-align?-;}

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

left
right
center
justify

Example:
#groups h2 {text-align: center;}



Text-Indent:

Code: Select all

#groups h2 {text-indent: -text-indent?-%;}

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

Example:
#groups h2 {text-indent: 25%;}



Text-Decoration:

Code: Select all

#groups h2 {text-decoration: -text-decoration?-;}

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

none
underline
overline
line-through
blink

Example:
#groups h2 {text-decoration: underline;}




Visibility Options


Opacity

Code: Select all

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



Hide Nav Bar

#groups h2 {display: none;}




Hover Effects

Code: Select all

#groups h2 :hover{-Code Here-;}

By substituting,

#groups h2
for
#groups h2 :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 Groups (Nav Bar).

Example:
#groups h2 :hover {background-image: url(http://forums.hi5-world.com/images/NavBarBackground_Hover.jpg);}

This will give you a different background image when you hover over the Groups (Nav Bar)