One man's journey into customizing Community Server

I thought I’d write up a thread that contained all the little tweaks and hacks that I've used to set up our Community Server site – hopefully it will be useful to other newbies.

If you're interested in seeing the site (though much is closed off for visitors), check out www.fuquapartners.org.

Customizing Home Page

Overall

• We wanted to customize the look and feel of the home page
• We wanted fewer items, and some specialized items on the page
• Photo slideshow
• List of recent posts to the announcements forum
• Basic HTML content
• Modified menu
• Tag cloud with customized title
• Etc.
• We wanted to modify the behavior of the content areas in the sidebar, because admins kept accidently messing up the rounded-rectangle formatting
  

Steps

• We modified the Basic theme to use our preferred colors, logo, and text
• We modified the Main Menu to change/add entries
• We removed all the main panel content and replaced with a single ContentArea
• We added a Picasa Albums slideshow
• We modified the Recent threads content area so it shows only posts in a single forum (announcements)
• 
  
• We modified the title of the tag cloud content area

Following posts will explain how. In the meantime, this is what the page looks like...

jdc:

We modified the Basic theme to use our preferred colors, logo, and text

Changing the look and feel

 

This one's pretty easy...

• Get started...
• Log in with admin account
• Go to Control Panel | Administration
• Click Settings on the left
• Change the text that appears in header of site pages
• Under Site Name... configure the site name and description - these will appear on page header for your site
• Change color scheme
• Click Theme configuration... on the left
• Surf the various tabs, and change colors as appropriate
• Change the logo
• Still in Theme configuration..., on Header tab, use the Logo URl area
• Upload your logo (size it correctly first)
• Change layout widths
• In Theme configuration..., on Layout and Sidebar tabs you can configure width
• We set body width @ 960px and sidebar widt at 225px
• Make other changes as desired
• Footer content, etc.

Also, since we were going to do a bunch of customization, we didn't want users changing themes. In Theme Options, we set Enable User... to no, and disabled unused themes.

jdc:

We modified the Main Menu to change/add entries

Modifying the menu

This one was a little more work, and I didn't do the cleanest job, but it works. I think you're supposed to use a SiteURLs override file, but I'm not entirely clear how to do it (haven't bothered to figure it out). Perhaps someone can reply with appropriate adjustments to my strategy. Note we were adding new items and renaming existing ones.

 

Adding items to menu (simple version)

The following adds a single entry that points to a calendar page within our CS site...

• Open SiteUrls.config file at root of your Web folder
• Go to end of file
• Find the existing <link name... line that corresponds to the menu item you want on the left of your new menu, and insert a new line after it and enter the following
• <link name="activities" navigateUrl="/blogs/activities/default.aspx" text="Activities" roles="Everyone" />
• Save your SiteUrls.config file and you're ready to go!

A few notes on what's happening here...

• name is an identifier for your meny entry
• navigateUrl is an explicit href to the menu target
• text is the label that will appear in your menu
• roles is who will be able to see the menu

Now, you may notice that the lines that specify the standard CS entries are a bit different. Specifically, they include...

• resourceURL instead of navigateURL
• resourceName instead of text

Essentially, these are indirect methods of specifying the same information. To accomplish the same thing as above, but using the indirect means, you'd do the following...

Adding items to menu (sophisticated version)

• Open SiteUrls.config file at root of your Web folder
• Go to end of file
• Find the existing <link name... line that corresponds to the menu item you want on the left of your new menu, and insert a new line after it and enter the following
• <link name="activities" resourceUrl="calendar" resourceName="calendar" roles="Everyone" />
• Go back up to the beginning of the file, where you'll make your named calendar resource
• Find the <locations type... line and enter the following code right under that
• <location name="calendar" path="/calendar/" themeDir="calendar">
  <url name="calendar"  path="" pattern="default.aspx" physicalPath="##themeDir##" vanity="{2}" page="home.aspx" />
  </location>
• Save your SiteUrls.config file and you're ready to go!

A few notes on what's happening here...

Now, to be honest I don't exactly know what all of that line does (I copied and tweaked on of the exsting entries). However, as I understand it, it does the following...

• Creates a named location resource called calendar
• Specifies that the location corresponds to the /calendar/ path within theme
• Creates a named url for this location called calendar
• Says that the default.aspx path within this url should actually go to home.aspx
• So, www.fakesite.com/calendar/ (which is the same as  www.fakesite.com/calendar/default.aspx)--> www.fakesite.com/themes/default/calendar/home.aspx (though it shows the nice URL in the address bar of your browser)

Controlling Access

You may want to control who can visit the sections noted by your new meny entries. One option is to use the role attribute, which will hide the menu option from certain folks. I don't think this really secures the area, just hides it (still might be appropriate for your use). In our case, we wanted the menus to show (so people who know what's on the site), but not allow visitors to see the calendar page.

To secure this area, we did the following:

• Open Web.config in the root of your Web folder
• Scroll down until you see the <location path... entries
• Enter the following code
•   <location path="calendar">
      <system.web>
        <authorization>
          <deny users="?" />
        </authorization>
      </system.web>
    </location>

This denies calendar access to the anonymous user - the user can see the menu and click on it, but is then presented a logon dialog.

Next post - modifying the main content area...

jdc:

We removed all the main panel content and replaced with a single ContentArea

We wanted a relatively simple home page, with some static text. Not too difficult...

• Open Web/Themes/Default/Common/home.aspx
• Remove the default text in the welcome-default contentpart
• Scoll down untiil you see
• <div style="line-height: 140%;"> Thanks for trying Community Server 2007!
• Delete "thanks for trying..." and all the other text until the closing </div>
• Alternatively, replace the standard CS stuff with your own text
• Remove the list of posts
• Delete the entire <CSControl:IndexPostList... </CSControl:IndexPostList> block 
• Remove the list of online users
  
• Delete the entire <CSControl:CallbackPager runat="server" ID="UsersOnlinePager"> </CSControl:CallbackPager> block
  

next post, embedding Picasa slideshow

jdc:

We added a Picasa Albums slideshow

So, we have a Picasa web account, with lots of photos stored in a variety of albums. We wanted visitors to see a bunch of these pictures on our home page.

Setup

• Set up album and slideshow
• Go to your Picasa pages (http://picasaweb.google.com/home)
  
• Create an album that has all the photos you want to show on your home page
• Click on your album, and on the left side of window click Embed Slideshow
• Set the parameters as you like them, the copy the HTML provided (you can manually edit to get different sizes and such)
• Embed on your home page
• Log into your site as admin
• double-click on main content area to open editor
• Click on HTML button to see raw HTML
• Move cursor to the position in the code where you want to insert the slideshow
• Paste the HTML
  
• Click Update, then Save Changes - you're done!

Positioning - we wanted the slideshow centered above the main body text, so we wrapped the Google-provided HTML in a <div align="center"> </div> block.

Timing - Google doesn't provide an obvious way to change the slideshow timing, but it can be done. You need to add an additional flashvars entry. So change

...flashvars="host=picasaweb.google.com&amp;interval=4&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2FFuquaPartners%2Falbumid%2F5103184194409824033%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="192" width="288">

to

...flashvars="host=picasaweb.google.com&amp;interval=4&amp;interval=4&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2FFuquaPartners%2Falbumid%2F5103184194409824033%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="192" width="288">

with interval indicating the number of seconds between slides.

Repeat - I haven't been able to find a way to force the slideshow to repeat. We just put enough photos in that no normal person would actually sit through the whole thing!

jdc:

We modified the Recent threads content area so it shows only posts in a single forum (announcements)

We modified the title of the tag cloud content area

Organizing the sidebar - conceptual overview

We wanted to accomplish the following with our sidebar

• Remove the default, out-of-box content (docs, vendors, etc.)
• Have several rounded-rectangle areas of our own content
• A welcome message that is only seen by visitors
• A featured item
•  A list of posts made only to our Announcements forum
• A tag cloud
• We wanted to adjust the way that content part formatting was done
• Decrease heading font size and increase text font size
• Avoid accidental removal of rounded rectangle formatting
• When admins edited the welcome-featured content part, they’d often accidentally remove the rounded-rectangle formatting
• We decided it would be better if each content part in the sidebar had the rounded-rect formatting OUTSIDE the editable content area (so admins couldn’t hurt it).

Removing the default verbiage

• Open the /themes/default/common/home.aspx file
• Find <CSControl:ContentPart ContentName="featured-default" runat="server" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn">
• This is the code that starts the one big sidebar content part in the sidebar
• Note that the first major <div class="CommonSidebarArea"></div> area contains the “Sign-in with your Admin…” text – this is fine, leave it.
• There are several other major <div class="CommonSidebarArea"> sections which follow
• First has documentation link
• Second has vendor links
• Third has books
•  Fourth has hosts
•  We deleted them all!!
• Save your file…this leaves you with a single rounded rectangle for featured item in the sidebar

 

Adding rounded rectangle content areas

Rather than include multiple areas within a single content part (as CS does out of the box), we decided to use separate content parts for each (makes sense given the changes in rounded-rect formatting we implement below).

• Still working in the /themes/default/common/home.aspx
• Find <CSControl:ContentPart ContentName="featured-welcome" runat="server" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn">
• Copy the entire <CSControl:ContentPart ContentName="featured-test" runat="server" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn"></CSControl:ContentPart> block, and paste a copy right below
• Change the ContentName (e.g.  ContentName="featured-visitor" )
• Save your file…now when you load the page your have multiple contentparts that are easily editable by the administrator

 

Showing a contentpart for only certain users

• Still working in the /themes/default/common/home.aspx
• Find the beginning of the contentpart you wish to show only to a particular role (e.g. <CSControl:ContentPart ID="ContentPart2" ContentName="visitor-default" runat="server" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn"> )
• On the next line, enter the following code…

<DisplayConditions><CSControl:UserInRoleCondition UseAccessingUser="true" Role="Visitor" runat="server" /></DisplayConditions>

• This “filters” the contentpart, showing it only to people in the Visitor role

Showing a list of posts from a single forum

We didn’t want to show all recent posts, just those made to our Announcements forum. Also, we wanted to have them show only for registered users. To do this, we did the following…

• Still working in the /themes/default/common/home.aspx
• After the featured-default contentpart, we entered the following code (forgive the lack of indenting – can’t quite figure out how to post code here easily)…

<CSForum:ThreadList ID="ThreadList-homepage" runat="server">
<DisplayConditions>
<CSControl:UserInRoleCondition UseAccessingUser="true" Role="Registered Users" runat="server" />
</DisplayConditions>
 
<QueryOverrides  GroupID="6" ForumID="7" PageSize="5" />
 
<HeaderTemplate>
<div class="CommonSidebarArea">
<div class="CommonSidebarRoundTop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="CommonSidebarInnerArea">
<CSControl:SiteUrl ID="SiteUrl1" UrlName="post_Active" Parameter1="-1" ResourceName="Utility_ForumAnchorType_ActiveAnnouncements" Tag="H4" CssClass="CommonSidebarHeader" runat="server" />
<div class="CommonSidebarContent">
<ul class="CommonSidebarList">
</HeaderTemplate>
 
<ItemTemplate>
<CSForum:ThreadData ID="ThreadData-homepage" runat="server" LinkTo="Thread" Property="Subject" TruncateAt="35" Tag="Li" />
</ItemTemplate>
 
<FooterTemplate>
</ul>
</div>
</div>
<div class="CommonSidebarRoundBottom"><div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div></div>
</FooterTemplate>
 
</CSForum:ThreadList>

Note we’re using DisplayConditions again to control who see’s the list – this time only registered users. The query override controls which posts get shown – here we’re specifying the group and forum ids for our announcements forum.

 

Adding the tag cloud

 

We wanted a tag cloud with a customized title and tags from all forum and blog posts, so here’s what we did…

 

• Still working in the /themes/default/common/home.aspx
• Somewhere in the sidebar (we did it after the threadlist) enter the following code (which we copied/adapted from code in the themes/forums/forums.master page) …

 

<CSControl:TagCloud ID="TagCloud-homepage" runat="server" TagCssClasses="CommonTag6,CommonTag5,CommonTag4,CommonTag3,CommonTag2,CommonTag1" MaximumNumberOfTags="25" ShowTagCounts="false" IgnoreFilterTags="true" TagCloudCssClass="CommonSidebarTagCloud">
 
<LeaderTemplate>
<div class="CommonSidebarArea">
<div class="CommonSidebarRoundTop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<div class="CommonSidebarInnerArea">
<CSControl:ResourceControl ID="ResourceControl1" runat="server" ResourceName="PopularSiteTags" Tag="H4" CssClass="CommonSidebarHeader" />
<div class="CommonSidebarContent">
</LeaderTemplate>
 
<TrailerTemplate>
</div>
<CSControl:SiteUrl ID="SiteUrl2" UrlName="tags_home" ResourceName="ViewAllTags" runat="server" Tag="Div" CssClass="CommonSidebarFooter" />
</div>
<div class="CommonSidebarRoundBottom">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div></div>
</TrailerTemplate>
</CSControl:TagCloud>   

 

We made a couple slight modifications to the code we copied/pasted.

• We removed an attribute from <CSControl:TagCloud…
• We removed ApplicationType="Forum" , which would normally limit the Tag cloud to tags from the forum posts (I think)
• Our users might not understand what tags are, so we changed the title to Popular Site Topics.  To do so takes several steps...
• Change <CSControl:ResourceControl ID="ResourceControl1" runat="server" ResourceName="PopularTags" to <CSControl:ResourceControl ID="ResourceControl1" runat="server" ResourceName="PopularSiteTags"
• Create a new resource object in Web/languages/en-us/resources.xml
• Open the file
• Find <root>
• Directly under that line, enter the following:  <resource name = "PopularSiteTags">Popular Site Topics</resource>

 

 Whew - I'm tired. I'll stop here for now, and discuss the changes to the sidebar contenpart formatting in an upcoming post.

Back from a short trip...let's finish up our discussion of the home page modifications by looking at the formatting in the sidebar.

Overview

• We thought the contentpart headers were too big and the body text too small
• We had problems with admins editing the content in a contentpart, and blowing away the rounded rectangle formatting

Changing header and body font size

• Log into site as admin
• Go to control panel/administration/settings/theme configuration/custom styles
• Enter the following code...

.CommonSidebarHeader
{
font-size: 140%;
}

.CommonSidebarContent
{
    font-size: 95%;
}

That's it!

Fixing the rounded rectangle formatting

Again, this is intended to keep unsophisticated admins from accidentally blowing away the nice rounded rectangle that contains the contentpart content. You're no longer able to easily put multiple rounded rectangle areas within a single contentpart (as CS does with the default home page), but it works best for us.

The original code in web/themes/default/common/home.aspx looks like this...

<CSControl:ContentPart ContentName="featured-default" runat="server" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn">

<DefaultContentTemplate>

<div class="CommonSidebarArea">

<div class="CommonSidebarRoundTop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>

<div class="CommonSidebarInnerArea">

<h4 class="CommonSidebarHeader">Featured Item</h4>

<div class="CommonSidebarContent">

<CSControl:ThemeImage runat="server" ImageUrl="~/images/contentpart.gif" ImageAlign="left" style="margin: 0 8px 8px 0;" />

Content Management is easy in Community Server!<p>
Sign-in with your Admin account and double-click to edit me!</p>