How to rebrand the WSS 3.0 / MOSS Navigation with only CSS Baby!

I had to rebrand some of the OOB WSS 3.0 Navigation last week. Here is how I hacked it out (Based on Beta 2, build 4017)

• Copy the Navigation provider & Navigation Control from the default.master into your own master page
• The styles in the Navigation Control will have styles like ms-topnavselected. I prefixed these with custom so they ended up being Custom-ms-topnavselect.
• Go copy the styles below (topNav) from C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\core.css and prefix them with Custom.

   

  .Custom-ms-topnavContainer{

  border:none;

  border-right:solid 1px #c2dcff;

  background-color: #003366;

  color: #FFFFFF;

  }

   

  .Custom-ms-topnav{

  border-left: 1px solid #FFFFFF;

  border-right: 1px solid #FFFFFF;

  border-bottom:none;

  border-right:none;

  /*background-image:url("/_layouts/images/topnavunselected.gif"); BE SURE TO DISABLE THIS LINE OR YOUR COLOURS WONT APPEAR (or they will flick on and then disappear again) */

  background-repeat:repeat-x;

  font-family:Verdana;

  font-size:8pt;

  background-color: #003366;

  }

   

  .Custom-ms-topnav a{

  display:block;

  white-space:nowrap;

  padding:1px 8px 0px 8px;

  height:18px;

  color: #FFFFFF;

  }

   

  .Custom-ms-topnavselected{

  color:#003399;

  /*background:url("/_layouts/images/topnavselected.gif");*/

  background-repeat:repeat-x;

  font-weight:bold;

  /*border:solid 1px #79a7e3;*/

  border-bottom:none;

  /*background-color:#79a7e3;*/

  }

   

  .Custom-ms-topNavHover{

  /*background-image:url("/_layouts/images/topnavhover.gif");*/

  background-color: Orange;

  color: #003366;

  }

   

  .Custom-ms-topnav img{

  position:relative;

  left:-6px;

  }

   

  .Custom-ms-topNavFlyOutsContainer

  {

  border: solid 1px #003366;

  }

   

  .Custom-ms-topNavFlyOuts{

  background-color: #99ccff;

  font-family:Verdana;

  font-size:8pt;

  }

  .Custom-ms-topNavFlyOuts a{

  display:block;

  *width:120px;

  min-width:120px;

  color:#003366;

  padding:4px 8px 4px 8px;

  }

  .Custom-ms-topNavFlyOutsHover{

  background-color: orange;

  color: #003366;

  }

• Add the styles to your own CSS and change the styles in the master on the navigation.
• You now have sexy new navigation with only changing some styles!