Add a Quick Links Navigation Bar

Create a dummy topic

To edit your Quick Links list, you'll first create a dummy topic that you will not publish.

1. Add a new topic at the bottom of your collection (as the last child of the home topic);
2. Uncheck the publish, menu and map check boxes;

Edit the selected links

Edit the topic as nested unordered lists, just like you would do in any other topic.

Copy the xml source

Once your list is completed, follow these steps:

1. Click on the XML button in the editor toolbar;
2. Copy the whole xml content of the topic;
3. Return to the editing mode by clicking on the XML button in the editor toolbar.

Add the xml markup to the template

Now that the markup text in on the clipboard, you'll add it to the template.

1. Navigate to the Collection tab;
2. Click on the small e button and select the template file;
3. Paste the markup inside the <div id="navleft"></div> element;
4. Save the template file;

Your collection is now ready to be published with your selected links menu.

<xsl:apply-templates select="document('../../xml/left_menu.en.xml')//xhtml:body"/>

Edit the stylesheet

Once you've published your collection, it's time to tweak the stylesheet for your particular publication.

To edit the associated stylesheet selectors, follow these steps:

1. Click on the small e button at the left of the Stylesheet drop down list;
2. From the popup menu, select the stylesheet that's shown in the drop down list;
3. If prompted for a program to open the file, choose Notepad;
4. Find the selector group below and edit as needed;
5. Save the file and refresh your browser window.

/*left navigation*/
div#selected_links {position:absolute; left:4px; top:28px; width:178px; margin:0px; padding:0px; 
            color:#004400; font-family:Tahoma, Helvetica, sans-serif; font-size:1.1em; 
            font-weight:bold; text-decoration:underline;}
div#navleft {position:absolute; left:4px; top:51px; width:178px;}
div#navleft ul {margin:0px; list-style: none;}
div#navleft ul li{color:#004400; font-weight:bold;}
div#navleft ul li ul{list-style: none;}
div#navleft ul li ul li{margin-top:0px; margin-bottom:0px; padding:0px;
            font-weight:normal; font-size:0.9em;}