DRAFT: This module has unpublished changes.
Top-Navigation

The tob tabs (or top-nav or top-navigation bar) must have a prominent visual place for your ePortfolio, since this is the area that allows your audience to visit the various spaces of your site.  Here is what the default code looks like:

}

#module_topnav{
border: 1px solid #ccc
}
.navigation_topnav {
background-color:#f7f7f7;
}
.navigation_topnav a {
color:#222222;
font-family: Verdana,Helvetica,Arial,sans-serif;

}

There are many things that you can do to visually accentuate this area.  "Border" allows you to thicken the line and change the color of that bordered line.  You should certainly consider working with the thickness of this line (1px, 2px, 3px, etc).  A thicker line will draw attention to the top-nav.  The color of this line is also important.  It should work with your color-package and work to accentuate what you have in the top-nav. You can also remove the border.  Instead of solid, you would simply write: none.

 

"Background-color" does exactly as it sounds.  It changes the color of the background of your top-nav bar.  The color here is also important.  It should work with your color-package and work to accentuate what you have in the top-nav.

 

Once you have changed the border and background color, you will notice that you may need to change the color of the font.  You do this in the section labeled ".navigation_topnav a".  In that section, "color" works to change the font color.  You can also decide your own font family.  You can use the same font as the rest of your site or change it to something more dramatic.

DRAFT: This module has unpublished changes.

Additional Changes (Inserting Code)

The words in your top-navigation should have additional prominence.  Make the font style bold and/or increase the size of the words.  Feel free to play around and experiment until you reach the desired result.  Here is a sample that has a bold, larger font, rounded corners, and a drop shadow:

 

Notice that the header image, border color, font color, and bar color are all working together.  Here is the code for this site (the highlighted parts show the code that was inserted to make the font bold and larger):

}
.navigation_topnav a {
font-family:Georgia,Helvetica,Arial,sans-serif;
font-size:14px;
font-weight:bold;
color:#222222;
}

 

Here is the part of the code that rounds the yellow border and gives it the maroon shadow (the highted parts in green show the code that is inserted to round the yellow border; the highlighted part in yellow shows the part of the code that was added to make the maroon shadow):

}
#module_topnav{
border: 2px solid #FCE804;
border-radius:10px;
-moz-border-radius:10px;
box-shadow: 10px 10px 5px 0px #580000;
-moz-box-shadow: 10px 10px 5 px 0px #580000;
}

 

You can also round the entire top-navigation bar. Here is the part of the code that rounds the burgundy top-nav bar (the highlighted parts show the code that is inserted to round the bar):

}
.navigation_topnav {
background-color:#800000;
border-radius:10px;
-moz-border-radius:10px;
}

 

 

If you want to do more advanced code for the top navigation, like add buttons like this site does, please go to the page that shows you the CSS for this website.  Please note that a button-style top-nav requires that you widen the main body.

DRAFT: This module has unpublished changes.