HowTo: Customize Community Server navigation

By Eric Hartwell - last updated March 19, 2006

Community Server 2.0 was designed to be customized and extended, so it's extremely easy to add links to other site components to the navigation tab bar.

Tab Bar

The site's addresses are specified in SiteUrls.config, and XML text file at the root of the Community Server installation. The navigation links are specified in the <navigation> section, or the format:

<link name="name" resourceUrl="url" resourceName="text" roles="roles" />
<link name="name" navigateUrl="url" text="tabtext" />

name

look up value (identifier)

resourceUrl

maps to url name in SiteUrls/Urls

navigateUrl

fixed, absolute URL

resourceName

Text for link/tab. Maps to the language resource files

text

Text for link/tab, single language

roles

Which users can view this link. If no roles attribute is given, it will assume it is for Everyone. You can specify multiple roles by separating them with a comma

The Siteurls.config for my site looks like this (with changes highlighted):

<navigation>
<!--
name: look up value
resourceUrl: maps to url name in SiteUrls/Urls
resourceName: text for link. Maps to the language resource files
roles: Which users can view this link. 
If no roles attribute is given, it will assume it is for Everyone. You can
specify multiple roles by separating them with a comma (,). 
 
You can also specify actual links here like the following:
link name="mylink" navigateUrl="http://www.mysite.com/" text="My Link" 
-->
<!-- link name="home" resourceUrl="home" resourceName="home" roles="Everyone" / -->
<link name="home"  navigateUrl="http://www.ehartwell.com/" resourceName="home" roles="Everyone" />
<link name="mywiki" navigateUrl="http://www.ehartwell.com/wiki" text="Wiki" />
<link name="blog" navigateUrl="http://ehartwell.com/cs2/blogs/infodabble/default.aspx" text="Blog" />
<link name="myarchive" navigateUrl="http://www.ehartwell.com/BlogArchive/index.htm" text="Archive" /> 
<link name="blogs" resourceUrl="webloghome" resourceName="weblogs" roles="Everyone" applicationType = "Weblog" /> 
<link name="forums" resourceUrl="forumshome" resourceName="forums" roles="Everyone" applicationType = "Forum" />
<link name="gallery" resourceUrl="galleryhome" resourceName="photos" roles="Everyone" applicationType = "Gallery" />
<link name="files" resourceUrl="fileshome" resourceName="files" roles="Everyone" applicationType = "FileGallery" />
<link name="reader" resourceUrl="readerhome" resourceName="reader" applicationType = "FeedReader" 
    type ="CommunityServer.Reader.Controls.ReaderMenuValidator, CommunityServer.Reader" />
<link name="roller" resourceUrl="rollerhome" resourceName="roller" applicationType = "BlogRoller" />
<link name="controlpanel" resourceUrl="controlpanel" resourceName="controlpanel"
    roles="SystemAdministrator,BlogAdministrator,ForumsAdministrator,Moderator,GalleryAdministrator,
    FileAdministrator,ReaderAdministrator,MembershipAdministrator" />
<link name="mytechnotes" navigateUrl="http://www.ehartwell.com/TechNotes/index.htm" text="Tech Notes" />
<link name="myapollo17" navigateUrl="http://www.ehartwell.com/Apollo17/index.htm" text="Apollo 17" />
<link name="myabout" navigateUrl="http://www.ehartwell.com/About/index.htm" text="About me" /> 
</navigation>

Footer

Unlike most other parts of the application, the Community Server footer is not designed to be easily customized. This is largely a licensing issue:

The Express Edition of Community Server is recommended for organizations or individuals that want to quickly and easily (on a budget) create a community site. It includes fully functional blogs, forums, and photo gallery tools. However, it is limited in that add-ons cannot be used and it has a required “Power By” advertisement in the footer of every page.

However, provided you don't violate the license agreement, you can customize the footer by editing the theme's Master.ascx file. Comment out Community Server's <CS:Footer> code, and replace it with the HTML from the shared border we already built for the FrontPage part of the site - plus the "Powered By Community Server" advertisement, of course. The Master.ascx looks like this (with changes highlighted):

<div id="CommonBody">
   <table cellspacing="0" cellpadding="0" border="0" width="100%" id="CommonBodyTable">
      ...
      ...
   </table>
</div>
<!-- 
<div id="CommonFooter">
    <CS:MPRegion id="BodyFooterRegion" runat="server" >
        <CS:Footer runat="server" id="Footer1"/>
    </CS:MPRegion>
</div>
--> 
<div id="CommonFooter" style="font-size: 9px">
   <table border="0" cellspacing="0" cellpadding="0" width="100%">
   <tr>
     <td nowrap width="108">
        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/">
        <img alt="Creative Commons License" border="0" src="/images/somerights20.png" hspace="10" width="88" height="31"></a>
     </td>
     <td nowrap align="left">
        Unless otherwise noted, all material by <a href="http://www.ehartwell.com/">Eric Hartwell</a> is licensed under <br>
        the <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/"> Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>
     </td>
     <td width="90%">
        &nbsp;
     </td>
     <td>
         <a href="http://communityserver.org/r.ashx?1"><img border=0 hspace="10" width="114" height="40" src="/cs2/images/EULA.gif" /></a>
     </td>
   </tr>
   </table>
</div> 
</div>
</CS:MPRegion>
</CS:MPForm>
</body>
</html>

Next Step: Customize FrontPage Navigation and Skin

Revision History

• 20060319 - Added footer
• 20060316 - Initial version