How to Customize the Left Navigation Bar of SPPS Home Page

Description:
The navigation bar on the left section on the default SPPS home page is the Topic area’s category; if you delete the Topics area, the navigation bar will change as the category of Home area, say, we just established two sub areas under Home area such as sub areas of News and Site Map.

So the left navigation bar looks like below: (Pls see the attached screen shot) The category only shows the two sub areas, not including the second layers of the sub areas, e.g., under the Site Map, we actually established a number of sub areas for each dept. We expect this navigation bar looks like below: (Pls see the attached screen shot)

So how to change this left navigation bar? I used FrontPgae 2003 to implement this requirement.

The detailed steps are:

A. Use FrontPage 2003 to open the default.aspx on the server root;

B. Remove the original Category web part on the left column;

C. Insert a TOC web part in the that place;

D. Change the TOC web part’s properties to show the area icon and list in the one column vertical way ;

E. Then a vertical TOC navigation bar shows on the left column of the Home Page. BUT the first layer sub area’s title shows in a small Font Size.

F. So open the sps.css and find the

.ms-toccattitle a { color:#003399; font-size: .7em; text-decoration: none; } ……

G. Change the above as follows to enlarge the font size of navigation bar title

.ms-catindent { PADDING-RIGHT: 0px; padding-left: 0px; PADDING-BOTTOM: 1px }

.ms-toc { margin-left:0px; margin-right:0px; }

.ms-toccat { PADDING-RIGHT: 0px; padding-left: 0px; PADDING-BOTTOM:10px; }

.ms-toccattitle { font-family: tahoma; font-style: normal; font-weight: bold; text-decoration: underline; }

.ms-toccattitle a { color:#003399; font-size: 8pt; /*.7em;*/ font-weight: bold; text-decoration: none; }

.ms-toccattitle a:hover { color:red; /*#003399;*/ font-size: 8pt; /*.7em;*/ text-decoration: underline; }

.ms-tocitems { PADDING-TOP: 2px; font-family: Tahoma; font-style: normal; font-weight: normal; text-decoration: none; PADDING-BOTTOM:2px; }

.ms-catlsts, .ms-catlsts a { padding-top:3px; padding-bottom:3px; }

.ms-catsubcats, .ms-catsubcats a { padding-top:3px; padding-bottom:3px; }

.ms-catlsts { margin-top:0px; margin-bottom:0px; }

.ms-toccatitem { color:#666666; vertical-align:middle; }

.IconBrowse { margin-right:1px; margin-left:1px; }

Finally a good navigation bar done.


P.S.(added on Dec 25, 2003)

David asked on microsoft comunity about how to get TOC webpart. here is some simple way to do it: if u have front page 2003, it would be eay for u to insert the TOC webpart. open the area page, Under "Folder List" pane on the left of the FP window, u will find _catalogs folder, then go down into wp(Web Part Gallery) --> TOC.dwp. then drag it into the left navigation place to replace the orginal navigation web part.
--------------------------------
Source: MSD2D.COM
Author: ted teng
--------------------------------