The paths navigation menu bar is situated just below the header and just above the main content area. It contains the title, page number and links to the previous and subsequent pages of the current path. It's spatial boundaries on Scalar pages are represented by the highlighted area in the image to the left.

Background Color for the Paths Navigation Bar

CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the paths navigation bar one needs to begin by declaring the selector for the bar (.pathnavs), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the paths navigation bar to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
 

To change the background color of the paths navigation bar black using hexadecimal colors, one would insert:


And to change the background color of the paths navigation bar to bright blue using RGB colors, one would insert:


Learn more about CSS background colors here.

Paths Title and Pages Numbers

Font Style
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style of the title and page number in the paths navigation bar one needs to begin by declaring its selector (.path_left), the property they wish to modify  (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style of the the title and page number in the paths navigation bar to “Georgia” with a fallback of a generic “serif” one would insert:
 

Learn more about the font-family property here.

Font Size
To change the font size of the title and page number in the paths navigation bar, one needs to designate the selector .path_left, select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of of the title and page number in the paths navigation bar to 20 pixels, one would insert:

Learn more about the font-size property here.

Path Links

Every link has four separate "states" which can be individually stylized. These four states are as follows:

• a:link - a normal link that has not been visited yet
• a:visited - a link which the user has already visited
• a:hover - a link when the user moves the mouse cursor over it
• a:active - a link at the moment it is clicked

Thus to change the color of the links to previous and subsequent pages in the paths navigation bar which have not yet been visited to red using a predefined color value, one would start by declaring the selector for unvisited links in the paths navigation bar (.path_right .wrapper a:link), the property they wish to modify (color) and then declare the value red: 

To change the color of the links to previous and subsequent pages in the paths navigation bar which have been visited to bright black using a a hexadecimal value, one would start by declaring the selector for visited links in the paths navigation bar (.path_right .wrapper a:visited), the property they wish to modify (color) and then declare the value #000000: 

Comment on this page