DRAFT: This module has unpublished changes.

The ePortfolio's navigation bar is where the ePortfolio's Sections are located. You can change the CSS code so the navigation bar appears as a list of buttons with colors and different properties.

 

For example, below is Michael Matza's  header and navigation bar. He created a centered navigation bar with 3D buttons with a gray shadow underneath the text. If you hover over any of his sections, you will notice that a a black border appears wrapped around that text. This notifies the viewers which section they are hovering over. If you click one of the sections, you will notice that the black rectangle will be wrapped around the section you clicked on. This makes the viewers aware of which section they are currently visiting.

 

We're not suggesting you exactly copy his buttons/fonts/borders, we're just giving you an idea of where you can go with your ePortfolio design.

 

 

Center your Navigation Bar

 

In the box titled Custom CSS, paste the following bolded blue code within the

.navigation_topnav  { }   brackets  

 

.navigation_topnav {

text-align: center;

background-color:#FFFFFF;
}

________________________________________________________________

 

Create a Button Box Shadow

 

In the box titled Custom CSS, paste the following bolded blue code underneath the

.navigation_topnav a { }  section. You may adjust the number of px (pixels) of your box shadow to make the shadow bigger/wider.

  

.navigation_topnav a {

 

text-align:center;
box-shadow: 12px 12px 7px #inserthtmlcolorcodeofyourchoice;
color:#222222;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

 

________________________________________________________________

 

Create a Button Border

 

In the box titled Custom CSS, paste the following bolded blue code underneath the

.navigation_topnav a { } section. You may adjust the number of px for border and padding to make your buttons thicker.

  

.navigation_topnav a {

 

text-align:center;
box-shadow: 12px 12px 7px #inserthtmlcolorcodeofyourchoice;
border: 2px outset #inserthtmlcolorcodeofyourchoice;
padding: 2px;
color:#222222;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

 

Next to border, you will notice the text Outset. According to Stackoverflow.com, an Outset border "makes the box look as though it were coming out of the canvas."

 

Outset Examples:

 

 

The opposite of outset is "inset", which Stackoverflow.com explains as "the border makes the box look as though it were embedded in the canvas."

 

Inset Examples:

 

 

Padding according to Stackoverflow.com is "the space between the content and the border". 

 

Padding is illustrated in the below image, courtesy of Stackoverflow.com 

 

 

 

________________________________________________________________

 

Change the Button Font

 

To change the button font, paste the following bolded blue code underneath the .navigation_topnav a {} section.

  

.navigation_topnav a {

text-align:center;

box-shadow: 12px 12px 7px #inserthtmlcolorcodeofyourchoice;

border: 2px outset #inserthtmlcolorcodeofyourchoice;

padding: 2px;

color:#222222;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

 

You may search what different Font-families look like on the link provided below:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

 

________________________________________________________________

 

Hovering Over Buttons

 

In the box titled Custom CSS, paste the following code underneath the

.navigation_topnav a { } section.

  

.navigation_topnav a {

 

text-align:center;
box-shadow: 12px 12px 7px #inserthtmlcolorcodeofyourchoice;
background-color: #inserthtmlcolorcodeofyourchoice;
border: 2px outset #inserthtmlcolorcodeofyourchoice;
padding: 2px;
color:#222222;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navigation_topnav a:hover {
text-align:center;
background-color: #inserthtmlcolorcodeofyourchoice;
border: 2px outset #inserthtmlcolorcodeofyourchoice;
padding: 2px;
color:#inserthtmlcolorcodeofyourchoice;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

 

There is a lot of trial and error with creating buttons and using colors that work. Try it out until you find a color scheme that works for your ePortfolio.

 

Once you are done editing your Custom CSS, scroll down to the bottom left of the page and click save. You should now see a centered, colored navigation bar.

DRAFT: This module has unpublished changes.