hi5 Forums

[Andrew]

Main Nav Header


Background Options


Choose Background Color:

The background image must be hidden first:

Code: Select all

#p_nav_header {background-image: url();}

Then a color can be selected:

Code: Select all

#p_nav_header {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:
#p_nav_header {background-color: #FF0000;}
#p_nav_header {background-image: url();}

#p_nav_header {background-color: rgb(255,0,0);}
#p_nav_header {background-image: url();}

#p_nav_header {background-color: red;}
#p_nav_header {background-image: url();}

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



Color Search Bar:

Code: Select all

#search_text {background-color: -color?-;}

Example:
#search_text {background-color: #FF0000;}



Change Background Image:

Code: Select all

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

-url?- = Any image url
Default Image size is 975px (width) x 50px (height)
The image width should retain a constant 975px dimension.
The height image should be 50px, but it will still look good with height above 50px once done well.

If it is a repeated image, Then the image should be preferably repeated Horizontally (repeat-x) and should have a height of 50px.

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



Background Repeat:

Code: Select all

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



Background Position:

Code: Select all

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

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

Position Values must be between 0 - 100%

Example:

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




Image Options

Hi5 Logo
This replaces the "hi5" Logo to the left of the Main Nav Header

Code: Select all

#new_header {background:url(-url?-); background-repeat:no-repeat; border:none; background-position: 1% 100%;}

-url?- = Any image url

Example:
#new_header {background:url(http://www.epsilonx5.com/hi5-world/images/Group-logo.gif); background-repeat:no-repeat; border:none; background-position: 1% 100%;}


Menu Buttons

#primenu li {background-image: url(-url?-);}


Active Menu Button

#primenu li.on {background-image: url(-url?-);}





Text Options
These 'direct' text options only affects Welcome, "Username"

Text Color:

Code: Select all

#p_nav_header {color: -color?-;}

-color?-

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

Example:
#p_nav_header {color: #FF0000;}



Font Type:

Code: Select all

#p_nav_header {font-family: -font-family?-;}

-font-family?- = Any Font name

Example:
#p_nav_header {font-family: Arial;}




Font Size:

Code: Select all

#p_nav_header {font-size: -size?-px;}

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

Example:
#p_nav_header {font-size: 16px;}



Font Style:

Code: Select all

#p_nav_header {font-style: -font-style?-;}

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

Example:
#p_nav_header {font-style: italic;}



Font Weight:

Code: Select all

#p_nav_header {font-weight: -font-weight?-;}

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

normal
bold

Example:
#p_nav_header {font-weight: normal;}



Text-Align:

Code: Select all

#p_nav_header {text-align: -text-align?-;}

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

left
right
center
justify

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



Text-Indent:

Code: Select all

#p_nav_header {text-indent: -text-indent?-%;}

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

Example:
#p_nav_header {text-indent: 25%;}



Text-Decoration:

Code: Select all

#p_nav_header {text-decoration: -text-decoration?-;}

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

none
underline
overline
line-through
blink

Example:
#p_nav_header {text-decoration: underline;}




Other Text Sections
The above codes can also be used in other specific sections of the Main Nav Header.
Substitute
#p_nav_header
for any of the below:

#primenu li a = All text links to the left of the Nav Header (Button Links and Search Links).

#userstuff = All text to the right of the Nav Header.

#userstuff a = All text links to the left of the Nav Header.

And use the relevant codes as given above.





Visibility Options


Opacity

Code: Select all

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



Hide Entire Nav Header

Code: Select all

#p_nav_header {display: none;}

Hide 'hi5 Logo'

Code: Select all

#new_header {background-image: url();}

Hide All 'Left' Nav Buttons

Code: Select all

#primenu {display:none;}

Hide all 'Right' Nav Links

Code: Select all

#userstuff {display:none;}

Hide Search Section only

Code: Select all

#glsearch {display:none;}

Hide Search Box only

Code: Select all

#search_text {display:none;}

Hide Search Button only

Code: Select all

#search_button {display:none;}

Hide Welcome 'User' & Account Links

Code: Select all

.loggedin {display:none;}

Hide Account Links only

Code: Select all

#acclinks {display:none;}

Hide All Language Buttons

Code: Select all

#langdrop {display:none;}

Hide Dropdown Language Menu

Code: Select all

#language-more {display:none;}

Hover Effects

Code: Select all

#p_nav_header :hover {-Code Here-;}

By substituting,

#p_nav_header
for
#p_nav_header :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 Main Nav Header.

Example:
#p_nav_header :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 Main Nav Header

[Angelica666]

i dont know why but i cant use all codes....
i do exactly what u r saying to me but nothing happens....is there a way where u can help me?????explain it to me better????
i would apprieciate your reply!!!!!!=]

<3333

[Andrew]

Hi Angelica666!

Place all of your code within style tags:

Code: Select all

<style type="text/css">   </style>

You just need to use these tags once each.
One before all the codes, and on after.

Then paste everything in your About Me or Interests section.
Or Customize Profile Section without the tags.

Let me know if this helps.

Good luck!

[Angelica666]

thank u very much!!!!
omg!! i feel like an idiot....what a shame!!!!

thank u again!!!!<3

[Andrew]

Don't worry about it Angelica666!

We all learn over time. Nothing to feel ashamed about! :)

[lily03]

what is the code for hiding the section writen ' Home-My Profile-Friends-Photos-Message-Games-Groups-Application' ?

please help me

[dmx3]

Those codes don't work anymore....even in your "hi5 profile generator" when we take off and put a big header image it work in preview but after in the hi5 doesn't work anymore...