|
The class names are the same for each navigation header and items. Therefore to customize a header to display an icon or image you will need to start with the ID. The ID is always starts at 0.
Each ID is formatted the same with the TR containing the ID followed by the following: ID is unique, others repeated for every link
<tr id="zz2_QuickLaunchMenun3"><td> <table class="ms-navheader zz2_QuickLaunchMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td style="width:100%;"> <a class="zz2_QuickLaunchMenu_1 ms-navheader zz2_QuickLaunchMenu_3" > Test 1 </a> </td> </tr> </table> </td></tr>
Add the Icons
- Open the site you want to add the icons
- Go to Site Actions click Add a Web Part
- Under Miscellaneous click Content Editor Webpart.
- Open Source Editor and add the following code:
<style>
#zz2_QuickLaunchMenun3 table td { background: url('[IMAGE URL]') no-repeat 3; padding: 8px 8px 8px 50px; } #zz2_QuickLaunchMenun4 table td { background: url('/[IMAGE URL]') no-repeat 3; padding: 8px 8px 8px 50px; }
</style>
- Replace [IMAGE URL] with the link to your image.
Add this page to your favorite Social Bookmarking websites
|