Berwick•Heights•Software

I just set up this weblog using Community Server 2.0, a great product that can be downloaded free from www.communityserver.org. One of the major gripes with Community Server (CS) is that customization of the look&feel is rather arcane to the uninitiated; although CS is extremely flexible, it is cumbersome to get your hands around the power of the interface. Telligent plans to address this shortcoming in a future release, but I was faced with coming up with a solution in the current release.

Being a practical sort who didn't want to make a career out of setting up the weblog, I looked for ways to quickly hone the interface to match my existing website so that the l&f of my corporate website matched the CS website. As it ends up, I only had to change a few files within CS to get what I wanted. This post explains what I did in the hopes that it will save someone else the time that I put in to figure this out. All the files listed below are relative to the Web subdirectory in the release. This information pertains to release 2.0.60217.2664 of Community Server.

SiteURLs.config

This XML config file determines URLs that are used throughout the CS website. What was relevant for me was to change the URLs used in the menu that appears at the top of the page. I wanted to change the menu so that it matched the menu of the Berwick Heights (BHS) corporate website so that the CS blog looks like it is just part of the BHS website. This is pretty easy to do. Near the top of the SiteURLs.config, the navigation element determines which items appear in the menu. Simply take out the link subelements within the navigation element for items that you don't want to appear in your main menu. You can add other link subelements for items that you want to add to the main menu. For links to URLs outside of the CS website, use the navigateUrl and text attributes to indicate the URL and text to be used in the main menu. Here is what my link subelements look like:

<navigation>
 <link name="home" navigateUrl="http://www.berwickheights.com" text="Home" />
 <link name="solns"
  navigateUrl="http://www.berwickheights.com/Solutions/Overview.aspx"
  text="Solutions" />
 <link name="company"
  navigateUrl="http://www.berwickheights.com/Company/AboutBHS.aspx"
  text="Company" />
 <link name="rscs"
  navigateUrl="http://www.berwickheights.com/Articles.aspx"
  text="Resources" />
 <link name="blog"
  navigateUrl="http://cs.berwickheights.com/blogs/sjblog/default.aspx"
  text="Blog" />
 <link name="contact"
  navigateUrl="http://www.berwickheights.com/Contact.aspx"
  text="Contact" />
 <link name="controlpanel"
  resourceUrl="controlpanel" resourceName="controlpanel"
  roles="SystemAdministrator,BlogAdministrator,ForumsAdministrator,
  Moderator,GalleryAdministrator,FileAdministrator,ReaderAdministrator,
  MembershipAdministrator" />
</navigation>

Default.aspx

Default.aspx is used for the home page for the CS web application. I wanted a simple home page that only listed my blog since my site does not use any of the other features of CS (e.g., photo gallery, forums). So for me, this was simply a matter of removing content from Default.aspx. However, you must be careful when removing the ASPX elements since they are referenced in the server-side code at the top of the page; you should coment out parts of the script that reference ASPX elements you delete in the HTML body. I removed the following elements:

• The first CommonContent div that is used at the top of the body. This includes a CS:AdPart element with id of StandardTop and a CS:ContentPart element with id welcomeContentPart.
• The CS:WhoIsOnline element that appears in the middle of the body.
• The entire CS:MPContent element with id "rcr" that appears at the bottom of the body. This removes the sidebar as well as the recent photo listing that appears at the bottom of the page.

I then had to comment out the server-side script at the top of the page that referenced anything that I removed. Here is what my Default.aspx looks like after removing the content:

Themes\Default\Skins\Skin-Titlebar.ascx

I used the default skin for the CS website since it was the easiest to customize to match what I wanted. The Skin-Titlebar.ascx web control is used to render the top of the CS web page (e.g., logo, sign in, search bar). Since the default skin uses a CS look, I definitely wanted to change this to match the Berwick Heights website. The first thing I changed was the logo that appears in the top left of the page from the CS logo to the Berwick Heights logo. I added the GIF file for the BHS logo to the Themes\Default\Images\Common subdirectory and then changed the following line in Skin-Titlebar.ascx:

The next change was to use the BHS company name and tagline instead of the blog name and description. Just a few lines down from the logo change, I changed the lines to:

Themes\Default\Style\Common.css

The rest of the changes to the website are all CSS-based. The only CSS file that I changed was Themes\Default\Style\Common.css. The first change was to get rid of the default way of containing the layout inside of a centered box with different background colors. For the CSS style for the BODY, I changed the background color to white (it is #606060 in the default).

BODY
{
   margin: 0px;
   padding: 0px;
   color: #000000;
   font-family: Tahoma, Arial, Helvetica;
   background-color: #ffffff;
}

Then I changed the CSS style used for elements with id Common to get rid of the green bar that appears at the top of the page and the 35 pixel margins on the left and right:

#Common
{
   margin-top: 0px;
   border-top: solid 2px #cccccc;
   background-color: #ffffff;
   width: auto;
   /* margin-left: 35px; */
   /* margin-right: 35px; */
}

By editing the #CommonHeader style, I was able to add the background image that matches the corporate website page header:

#CommonHeader
{
   width: 100%;
   background-image: url(../images/common/HeaderBG1.jpg);
   background-repeat:repeat;
}

I also added the background image to the righthand column that appears on some CS web pages:

#CommonRightColumn
{
   /* background-color: #eff7e0; */
   background-image: url(../images/common/HeaderBG1.jpg);
   background-repeat:repeat;
   padding-bottom: 22px;
}

I decided to use a shade of blue for all the links and that was achieved pretty simply by editing the A styles.

To change the style for the company name, which was originally the blog title, I edited the .CommonTitleBarTitle style. For the company tagline, which was originally the blog description, I edited the .CommonTitleBarDescription style.

The style for the title that appears on the blog homepage (in my case, Stuart Jones Weblog) is defined by .CommonTitle.

For the sidebars, the styles to change are .CommonSidebarContentItem, .CommonSidebarArea, .CommonSidebarContent and .CommonSidebarHeader.

The style for the main menu is controlled by .CommonSimpleTabStripTab, .CommonSimpleTabStripTabHover, and .CommonSimpleTabStripSelectedTab.

The area of the header for sign-in and search is styled by .CommonTabBar and .CommonTabBarInner.