MOSS2007, CSS, and you, the Non-Developer – the Quicklaunch

We’ll begin our little journey by changing the background colors of the quicklaunch menu and background column.

1. We’ll start by changing the top, left and right hand borders of the quicklaunch and the border at the bottom of the recycling bin.

   

2. Next we’ll change the color of what I had always called the “separator lines” within the quicklaunch menu. In reality these are borders for the cells of the quicklaunch. If you look at the code block shown below from my copy of the CORE.CSS file you’ll see where I changed the color of “border-top” to #006600. You will also notice that I exaggerated the border weight to make it more visible. Make sure that you leave the weight at 1px if you do this in production.

   

3. Next we’ll change the background colors of the Recycling Bin and the “View All Site Content” cells.

   

4. Next we’ll change the background color of the quicklaunch menu cell headers and the quicklaunch submenu, or item, cell background colors. Note that you can do one of two things in order to change the background color of the submenu, or item areas of the quicklaunch;

   • You can change the background-color of both .ms-navsubmenu1 and .ms-navsubmenu2
   • You can change just the color of .ms-navsubmenu2 and change the margin-bottom to 0px.

   If you change only the background-color of .msnavsubmenu1 and do not change the background-color and leave the margin-bottom at the default 6 px you’ll see a margin at the bottom of the item cells in the quicklaunch.

   

5. Next we’ll change the font color of the headers and submenus. Note that I am not going to change the hover or selected font colors, just font color of the base link.

   

6. Now we need to change the font color of the “View All Site Content” link in the quicklauncheader cell.

   

7. Next we’ll change the color of the vertical pagemargin bar that runs to the right of the quicklaunch menu and the column pagemargin frame that you can see at the bottom of the quicklaunch column.

   

8. Next we’ll change the color of the quicklaunch column background. Note that in order to change the color of the column background you’ll need to remove the image that MS uses here as shown in the code block below. Once we have changed the background color if you look very closely you’ll see a very small cell running vertically to the right of the quicklaunch as well as another directly under it. You can change those cells by making the appropriate changes in the .ms-quicklaunchouter code block.

   

9. Now we’ll go take a look at the final version of our modified quicklaunch.

   

Well, that concludes our little tour of the Quicklaunch menu and its surrounding environs. I hope that someone finds this useful. Next, I think we’ll take a tour of the header area of our SharePoint page.