If you don’t use an RSS reader to read my blog, then you probably noticed that things started looking, um… different, a few weeks ago. My JrzyShr Dev Guy blog is currently part of MSDN Blogs, a developer blogging network comprised of folks who work at Microsoft. In May 2010, the system powering MSDN Blogs was upgraded to the latest version of Telligent Community.

As part of that upgrade, the look-n-feel of this blog has undergone a slew of changes too! I’m happy to reveal the “new” 2010 look of the JrzyShr Dev Guy blog here, and share how I did it for the benefit of others interested in customizing their Telligent Community-based blogs.

JrzyShr Dev Guy Through The Years

Why The New Look?

Why not? The last time I updated the theme of this blog was in April 2008. It was due for a change. (Okay… the reality is that the platform upgrade forced me.)

Like most software upgrades, Telligent Community 5.5 brings plenty of new features and improved functionality. However, to move forward, sometimes you need to take a step back. The previous version of the software that ran MSDN Blogs, Community Server 2.1, was several releases old. The templates and customizations available in CS 2.1 were not compatible with those in TC 5.5.

Migrating the several thousand blogs on MSDN Blogs to a new platform alone was not a trivial task. Migrating several thousand incompatible customized templates was just not feasible. Therefore, the MSDN Blogs team at Microsoft decided to reset everyone’s blog to a single default template with the new MSDN theme.

The new MSDN theme template looks great but I’ve always prided myself on having a site that stands out with my own custom look. In my April 2008 post, I detailed how I themed this blog after my Jersey Shore roots. Knowing that I’d have to start from scratch technically, I figured I’d try to keep most of the Jersey Shore design ideas and elements in the new theme. That includes my banner image featuring a view of New York City from the Jersey Shore taken here!

The Old Way Of Doing Things

In Community Server 2.1, administrators could provide a collection of pre-canned themes the (non-admin) blog owner could choose from. These themes controlled the layout of the various content elements on the page. There was very little room for the blog owner to customize where various elements on a page ended up. There were essentially three ways a blog owner could customize their blog theme previously through the management UI:

Create “lists” of links which then appear in a side column of the blog. (Left or Right determined by theme.)

Enter some HTML & JavaScript in the “News” block that appears in a side column. (Left or Right determined by theme.)

Enter custom CSS styles to override the style for any element on the page.

The last of those three options was often the trickiest bit, having to “hunt and peck” to find the right CSS classes to override!

The New Way Of Doing Things

In the new Telligent Community 5.5, all three of those customization options are still available, however, they are somewhat superseded by the newer module & widget based layout. Unfortunately, you will still need to “hunt and peck” to find the right CSS styles to override. (More about that later in the post…) Now, I’ll describe how you customize things in TC 5.5.

Starting From The Wireframe Theme

Luckily, one of the cool things about TC 5.5 is that it is a LOT easier to customize a blog than CS 2.1 ever was! Instead of starting from a selection of existing themes and customizing from there, TC 5.5 provides a “blank” Wireframe theme. When the new platform went live, I immediately switched to the Wireframe theme to keep things simple. The Wireframe theme is essentially a blank slate with a white background and basic Arial fonts.

Layouts & Widgets

In TC 5.5, all of the content elements on a page are “widgets”. This includes the blog posts, the menus, the title banner, and so forth. The widgets, and the layout of those widgets on the page, are controlled completely by the blog owner via an “AJAX-y” WYSIWYG editing mode. You can enter the editing mode by clicking the “Customize” button that appears at the top of each page after you are logged in to the site as the blog owner.

To customize a page, you have the following steps to complete after entering edit mode:

Choose a layout.

Choose and arrange the widgets within the layout from the widget panel using drag-n-drop.

Customize each widget.

A “layout” sets up the top level <div> tags that define the columns and/or headers and defines their dimensions, etc. Here is an example of the layout types available in the editing mode:A “widget” is a block of content that can be inserted anywhere within the layout. TC 5.5 provides a whole slew of widgets to choose from, including some default ones. Some examples of widget types:

Post List – Contains a list of your blog posts

Generic Content – Allows you to add some plain old HTML content minus JavaScript or IFrames.

Unfiltered HTML – Allows you to add IFrames & JavaScript.

Breadcrumb – Navigation control

Search box

3rd Party Widgets – From sites like Google or Widgetbox.

Many of the widgets have options you can set by clicking on their header while in the editing mode. For example, on the Blog Post List widget, you can control how many posts to display, whether to display a summary view of your posts, or a “detail” view where each post is displayed in its entirety within the list.

The Generic Content and Unfiltered HTML widgets provide you with plenty of flexibility in including content other than your blog posts on your site. This is a huge step up from CS 2.1!

Customizing Blog Pages

There are six different “pages” (or views) in a TC 5.5 blog. Each of these pages has its own layout and set of widgets. The blog owner must customize each of these six pages in order to create a consistent theme across their blog. The six pages are:

“Tags” page – Seen when visitors navigate posts by tags by clicking on a tag in the tag cloud. (Only needed if you use a Tag Cloud widget on your pages.)

“Email” page – Email form seen when visitors click Email Blog Author. (Only available if the blog owner has enabled this feature in the management UI.)

“About” page – Seen when visitors click the “About” link. (Only available if the blog owner has enabled this feature in the management UI.)

Custom Content Pages – If your blog contains custom content pages (set up in the management UI), you will need to view the particular custom page in your browser and then press the “Customize” button to style it.

Customizing The Styles

Once you have set up the content layout on your blog by customizing each page, it’s time to make it look pretty. Just like in Community Server 2.1, Telligent Community 5.5 allows you to set up your custom styles by entering CSS overrides via the management UI. And just like CS 2.1, this is the hairy & time consuming part of customizing your blog, especially if you’re a CSS-ignorant developer like myself.

As you may have guessed, almost all of the HTML elements and CSS classes used by TC 5.5 are completely different from CS 2.1. So, break out your favorite HTML editing tool and be prepared to hack away to figure out which CSS classes you need to override in order to achieve the look and feel you want. The developer tools in IE8 work fine for this task, as well as Expression Web if you have it.

Not only can you use CSS to set the fonts, colors, & sizes. You can also use CSS to tweak the layout chosen as part of the page customization. You may want to change the size, spacing, or location of various elements on the page. For example, you can use CSS to change the width of the side columns.

Saving Your Theme

Once you have everything looking the way you like it, back it up! You can do this in the TC 5.5 management UI by exporting your theme customizations to an XML file. If you’re smart, you’ll store that file somewhere safe, like SkyDrive!

Setting Up The JrzyShr Dev Guy Blog Layout

As I figured out how to customize the site, I decided to have one layout for the Home page, and another shared layout across the five other pages. Unfortunately, there’s no way (that I could figure out) to share a layout across pages. So, I had to customize each one individually, re-adding the same widgets to each page. In the case of the Generic Content and Unfiltered HTML widgets, this meant copying & pasting the same HTML content into the widgets on each page.

The Home Page Layout

As part of my evangelism job at Microsoft, I frequently direct people I meet to visit my blog as a source of information about Microsoft and the local NJ/NY/CT developer community. Therefore, I wanted the home page to surface as much as that information as possible. To do that, I chose the three column layout with a banner as depicted in the image to the right. This is known as the “Header-Top-Sidebar-Left-Content-Center-Sidebar-Right” layout.

Banner

Let’s start at the top! I knew I wanted to bring my banner image of NYC viewed from the Jersey Shore over from the old site. I also wanted to add my picture somewhere prominently on the site as I’ve never had that before. That way folks would know who I am when they visit. TC 5.5 has a “Blog – Banner” widget, but it appears useless to me. It just displays the title of the blog in a large font over white space. There were no options to customize it at all by adding let’s say… a banner image!

To do this, I added a Generic Content widget to the banner section of the layout on all six pages on the site. The Generic Content widget gives you a rich text editor where you can enter content to be displayed. You can alternatively click an “HTML” icon in the editor to enter plain old HTML.

Here is where I cheated. I originally wanted to have my blog title and tag line overlaid prominently on the banner image via HTML and CSS positioning. I couldn’t figure it it out. So, I took the original image and edited it in Paint.NET. In Paint.NET, I added my headshot and the blog title text directly to the image. I then returned to the Generic Content widget, inserted my image via the rich text editor, and that was it.

Center Content Column – Breadcrumbs & Blog Post List

In my April 2008 post, I mentioned how I wanted the content area of my blog posts to be wider in order to fit images and code samples as needed. This led me use a two-column layout previously with a single sidebar. This resulted in a lot of non-post information being pushed “below the fold”, such as upcoming events from Community Megaphone.

TC 5.5 offers a “Blog Post List” widget that lets you choose to have a “summary” view of your posts, or the full “detail” view. I decided to go with the “summary” view for the center column of the layout. The “summary” view displays only the first paragraph or so of your most recent posts. Since readers need to click through to the full “Blog Post” page to read an actual post, having a wider width on the home page was not a concern.

That allowed me to go with a three-column layout with an extra side bar on the right to surface more information. Summary view also lets site visitors see more posts on the Home page, making it easier to catch past posts that normally would be several scrolls of the screen away.

Another benefit of the TC 5.5’s new “Blog Post List” widget is that it enables your blog visitors to filter your posts on Most Commented, Most Viewed, aside from the default Most Recent listing. Blog visitors can also switch to a detailed post view where the entire contents of the posts are displayed on the Home page.

There are two other widgets in the center column on the Home page. The first is the Breadcrumb widget. This widget displays the navigation hierarchy of the blog as horizontal text links as is standard on many websites. The breadcrumb navigation root is the MSDN Blogs home page.

The second widget in the center column is the “Blog Title” widget. This widget outputs the title of the blog in HTML that is “hidden” by default, but enable’s the blog’s title to be displayed in the browser’s title bar. This widget does not need to go in the center column. It just ended up there for me. However, you should have it somewhere on your page.

The Side Bars – Community Events, User Groups, Podcasts, and more…

The left and right side bars are made up of several widgets containing various bits of information. The three most important bits of information I wanted to surface above the fold besides the blog post content were community events from Community Megaphone, my latest tweets on Twitter, and my new podcast, The Connected Show. I also brought along most of the previous content, including the the list of Microsoft-focused user groups in the NJ/NY/CT tri-state area.

I mentioned above that in CS 2.1, the only way to add non-blog content to the site previously was by entering HTML in the “News” block or creating “Link Lists” through the management UI. The user group list and my teammates’ blogs list came from the “Lists” I created in CS 2.1. To add them here, I added the “Blog Link List” widget to the layout.

The “Counters, etc” section with links to Brian Hitney’s World Maps and the image of “Old Barney” from my original 2006 blog theme come from the “News” block I had in CS 2.1. To add that, I added the “Blog – News” widget to the layout.

Adding JavaScript & IFrame Gadgets

Community Megaphone is a service created by my teammate, G. Andrew Duthie to facilitate sharing and discovery of events relating to software development. User group meetings, as well as other developer and IT Pro community events are are posted there. Community Megaphone offers an HTML gadget you can add to your site to display upcoming events in your area. The gadget is implemented as an IFrame which you add to your site with an HTML snippet that Community Megaphone provides.

Twitter also offers an HTML gadget you can add that displays your most recent tweets on your site. It is implemented as a JavaScript snippet that Twitter provides you to add to your site’s HTML. I have also been using a gadget from PostRank that displays a list of my top rated posts. I’m not sure of the value of this gadget yet, or if I’ll keep it. However, it is similarly implemented with a JavaScript snippet provided by PostRank.

Previously, the HTML & JavaScript snippets for these gadgets were inserted into my “News” block within the CS 2.1 management UI. When the new TC 5.5 came online, all three of these gadgets stopped working. After some tinkering, I discovered that in order to execute JavaScript or load an IFrame, you need to insert your snippets into an “Unfiltered HTML” widget. I added “Unfiltered HTML” widgets to the left and right sidebars in the layout to display these gadgets.

Community Megaphone IE8 Web Slice & Search Accelerator

New in this version of the JrzyShr Dev Guy blog: An IE8 Web Slice for Community Megaphone! When adding the Community Megaphone gadget via the “Unfiltered HTML” widget, Andrew supplied me with some code that also makes the gadget available as a web slice in IE8. That code is displayed below. The web slice enables you to view upcoming events in the tri-state area directly from your Favorites bar without leaving the site you’re on.

There is also a new link that will install the Community Megaphone Search Accelerator for IE8. Once installed, the accelerator allows you to select text on any website and search for event details on Community Megaphone.

Let’s say you saw someone mention a community event in your web-based email, but they didn’t include a link to it. You could select the event name, right-click and choose “Find Events by Keyword”. If Community Megaphone has that event listed, it will open it right up for you!

Note: The Bit.ly links in the snippet below were created by me to make the code more readable. (Community Megaphone generates some LONG URLs by default!)

Home Page Widget Layout Overview

Here is an overview of what the Home Page widget layout looks like:

The Other Pages

While there are five other view pages on the site, it is the Blog Post page that is most important in this group. All of these pages have in common the need to display full detailed content (vs. summary content). For these pages, I chose a two column layout with a header, left side bar and right content. This is known as the “Header-Top-Sidebar-Left-Content-Right” layout. By having a two column layout on the actual content pages, the content area can be wider to support images and code snippets.

On these pages, I kept the user group list, link to my podcast, and counters. However, I do away with Twitter & the Tag cloud. Since visitors are likely arriving at these pages from a search engine or their RSS feed, I added the “Recent Posts” widget to display links to the five most recent posts. That let’s folks know what else is going on on my blog.

As noted earlier, both the layout and widgets had to be set up for each of the five pages. Below is the widget layout for the “Blog Post” page.

Setting Up JrzyShr Dev Guy Blog Styling

Once all of the layouts & content widgets were set up, it was time to gussy things up with some custom JrzyShr Dev Guy CSS styles. As noted earlier, this was the most time consuming part of this customization process. Hopefully, sharing my styles here will help save others significant time! I’ll break this part up into two sections. The first is using CSS to tweak the layout. The second is using CSS to set fonts, colors, etc.

Luckily, unlike the layout and widget customization, most CSS style classes apply across all of the pages in the blog site. There were a select few that were specific to the individual pages, but not many.

Disclaimer: These settings are what worked for my blog after “hunting and pecking” at various CSS classes. They in no way constitute “best CSS practices”. I wouldn’t know a “best CSS practice” if it stared me in the face.

Tweaking The Layout With CSS

While the overall layout of content on the page is controlled through the WYSIWYG editing mode, there are still items that need to be tweaked via CSS. There were three layout tweaks I made.

Setting Overall Layout Width

The first was to set the width of the page’s layout to match the banner image size. Most of the page content sits within a top level <div> tag of class “layout”. To change the overall width of the page layout, I set the width & max-width CSS properties to 1104px to match the size of my banner image. This centers the 3-column layout within the browser, as well as causes the middle (content) column to expand dynamically to fill the horizontal space. The left & right sidebar layout columns are a fixed width of 270px by default in the Wireframe theme.

Set The Non-Layout Background Color

In the previous version of my blog, I had a beachy tan background color (#cdc9b4) for the area outside of the the page’s content area. In TC 5.5’s Wireframe theme, I had to override the background-color style in two locations to get the effect that I wanted. The first was the main <body> tag. The second was for a top-level <div> with the CSS class name “content-fragment-page”.

/* Set the background color for the portion of the page outside of the content layout area. */body {background-color: #cdc9b4;}.content-fragment-page {background-color: #cdc9b4;}

And the end result:

Without Background Color

With Background Color

(Re)Moving The Header Bar

The Wireframe theme has a white header bar across the top of every page that contains the links to log in to MSDN Blogs.

I wanted to eliminate this extra white space at the top, but still maintain the login links by having them overlay the banner image. To make this happen required three things:

Moving the page content container (<div class=“content-fragment-page”>) up to the top of the page.

Moving the header container with the login links (<div class=”header-fragments”>) down slightly to over lay the banner image in the correct location.

Moving the page footer container (<div class=”footer-fragments”>) up to compensate for the over all page content moving up.

Cleaning Up Blog Post List

The TC 5.5 “Blog Post List” widget was designed to support a blog with multiple authors or aggregate content from multiple blogs. By default, it displays an avatar of the author next to each post, along with the name of the blog it came from. I thought this clutters the list on the Home page. Since my blog is authored by only one person (me), I figured having a long repeating list of avatar photos of me would be redundant.

Here are the CSS styles I used to clear up and remove the repeating avatars:

/* Hide the avatar & blog title from each post in the post list */.abbreviated-post.avatar {display:none;}.abbreviated-post.post-application {display:none;}/* Adjust the padding of the post container so that it shifts left to the space previously occupied by the avatar. */.abbreviated-post {padding-left: 0px;}

Here is a before & after view of the blog post list on the Home page:

Before – With Avatars

After – Without Avatars

Putting On The “Metro” Polish

The final part of customizing the JrzyShr Dev Guy theme was setting the font, font colors, and font sizes to give it a polished look. It seems a lot ofMicrosoftoriented sites have been following in the footsteps of Zune & Windows Phone 7 with a Metro-like UI. There are even 3rd party applications (MetroTwit & Omnimo) showing up with the Metro UI. The Metro UI is about a lot of stuff in terms of simplicity and layout. The official Metro description from the Windows Phone 7 site:

Metro is our code name for our designed language. We call it Metro because it’s modern and clean. It’s fast and in motion. It’s about content and typography. And it’s entirely authentic.

To me, the most stand-out aspect of the Metro UI is the Segoe font family and its many variants. I decided to apply the Segoe font across the site. I don’t know if that makes the site look “Metro” or not, all I know is that I like it!

I kept the same font color scheme from the previous version of the site. All of the post links and post titles are in “Old Barney” burnt orange color (#cc3300). All non-post links (stuff in the sidebars, breadcrumb navigation, etc) are in a Jersey Shore-esque blue-grey color (#7c95b3). The color of the sidebar links makes them more subtle so the reader isn’t distracted by them, versus the brighter color links that jump out in the actual content .

Annoyingly, adjusting the CSS styles was the most tedious and challenging part of customizing the theme. There is no one CSS class that let’s you override the fonts and font sizes of the entire site. I had to manually set the font details on multiple different CSS classes. I’m not sure this is (or was) the best way to do this. I welcome others to point out ways this could have been done easier.

Luckily, as part of my “Metro-fication” of the site, this faux pas was resolved in the final version of the theme.

Still to come?

Having to upgrade my blog has been a learning experience. Hopefully, my documentation of how I “re-customized” it will aid others by saving them time. The great thing about the new platform is that it is more flexible and much easier to add custom content to the site. Like any website, this is a constant work in progress. I’m sure there will be more tweaks and additions over time. Some ideas right now:

Providing a more “mobile friendly” version of the site.

Adding a bigger & more obvious subscription button to the top banner.

Figuring out a better way to surface older posts that are less time relevant, and more reference like.

This is really a great description and walkthrough of customizing your theme…something I really appreciate, since I'm the PM at Telligent that has been working on the UI customization features. I definitely appreciate the pain in CSS editing right now…I'm not really a CSS guru either. Based on feedback like this and from other users, we're hoping to continue to make the UI easier and easier to customize in the future.

If you could create a WYSIWYG editing mode which let you highlight elements on the page and then see which CSS classes were "lighting up", that would be great. For example, if I clicked an <H2> element within a blog post, light up all the H2s on that page with the same class. Then, at the same time, give me a pop-up bubble that lets me set the font/size/color (or any other common styles) on that class right there in the browser. That would be GREAT!

Also, in that scenario… since <H2>s within a post are a different class than, let's say, <h2>s in the sidebars, it'd be obvious to me that I'd need to change/set the style overrides separately for those. Currently, it's all hunt & peck to figure that stuff out.

Very nice work! Having been involved with the upgrade this is some excellent feedbck that we appeciate you sharing. I'd be happy to chat with you about any additional ways we can help. kbrashear@telligent.com