The New Look of JrzyShr Dev Guy

The New Look of JrzyShr Dev Guy

  • Comments 3

If you read my blog via its actual web site, you probably noticed some changes yesterday.  After a while of planning and slowly putting the pieces into place behind the scenes, I finally completed an upgrade to the look-n-feel of my blog.  For those of you who are following along in your RSS reader of choice, I've included some before & after screen shots below.  First, I'll tell you a little bit about the new look, and then I'll explain how I did it for the benefit of others interested in customizing their Community Server-based blogs.

Exit13 When I first started my blog in May of 2006, I knew it was going to be about technology.  But I also wanted it to have a personal touch, one that would capture who I was and where I was from (New Jersey).  When you tell people you are from New Jersey, they will inevitably crack all sorts of jokes about toxic waste, corruption, and the infamous "what exit are you from" question.  This was something I didn't discover until I moved out of the state to attend college at Virginia Tech

Perhaps I was naive throughout my youth, but I never realized the negative views people held of my state while growing up.  This was probably because I grew up in the central part of the state away from the urban & industrial areas.  It's not that I wasn't familiar with the gritty parts of the state that most visitors inevitably see when they travel the Jersey Turnpike, or arrive at Newark Airport on their way to New York City.  How could anyone from Jersey NOT know the beauty that is Exit 13?!  Rather, I knew those areas were only a small part of this beautiful state that has so much more to offer.

One of my state's gems is the Jersey Shore.  It's one of my favorite places in the world; all 127 miles of it.  I didn't grow up on the beach, but I've lived near it most of my life with the ocean never more than 20 minutes away.  Most people refer to my part of the state as the Jersey Shore.  When you go to the beach in New Jersey, you don't say "I'm going to the coast" or "I'm going to the beach".  You say, "I'm going down the shore."   The Jersey Shore is not just a place, it's a state of mind.

JrzyShrVaTagI took that state of mind with me when I lived in Virginia during college.  Back then, I had a customized Virginia license plate with the letters "JRZYSHR".  I was proud to be from the Jersey Shore.  Since then, I've used that abbreviated spelling as my identity or handle on lots of various online services.  So when it came time to choose a name for my new blog, it wasn't hard to choose the name "JrzyShr Dev Guy".

At Microsoft, many employees have blogs.  Some folks choose to host their own blogs.  Others host them on Microsoft's developer blog site: MSDN Blogs.  Not knowing much about blogging software back then, I chose to host mine here on MSDN Blogs.  MSDN Blogs is currently powered by Telligent's Community Server software.  Community Server has a set of default theme templates you can choose from for the look and feel of your blog.  Most folks just pick one of those and go with it.  Others have figured out all sorts of ways to trick their styles out and come up with a custom design.

OldJrzyShrDevGuyTheme I went with the "Poison Ivy - Air" theme.  I didn't have much time to spend making things look pretty.  A couple of quick Internet searches, and I found enough Community Server tricks to add an image to my blog's title banner as well as change the default font colors. 

I chose to use an image of Barnegat Lighthouse.  "Old Barney", as it's known, is one of the more well known landmarks at the shore.  It's featured on many New Jersey license plates.  Old Barney is known for it's white and burnt orange colors.  So, I set the title font colors to match Old Barney.  You can click the "before" image to the right to see how my blog looked up until yesterday.

While I know folks are reading this blog from all around the world, I do write a lot about events going on in the New York City metro area. I wanted a new look to identify my blog that is representative of that.  Most folks probably don't associate the Jersey Shore with New York City, but wow... there are some great views of the city from the shore at Sandy Hook. 

Enter the new banner image you see at the top of my blog now.  I've been wanting "that" view to be on my blog almost since I first started blogging.  It's a view from the Jersey Shore (to match my title) with New York City on the horizon.  What a perfect idea to have an image that juxtaposed the two places next to each other.  I searched the web far and wide for that type of image, but could never find one just right.  It was just a matter of time before I could get to that view point on Sandy Hook on a sunny day with a camera.  I finally got my opportunity on a sunny afternoon last month here.

Customizing the Paperclip Theme Banner Image

With the picture taken, it was now time to figure out how to update the blog itself.  The first thing I did was pick a new theme.  Of all the Community Server 2.1 themes available on MSDN Blogs, the Paperclip theme seemed the best one to have a large banner image.  I also liked the overall layout of the Paperclip theme better than my previous theme.  I've seen other blogs that use this theme with custom images, so I figured there must be some knowledge out there on how to customize it appropriately.  Sure enough, there was.

A quick Live Search turned up the following two results:

Both posts essentially cover the same thing as well as the step-by-step details for how to make the customization.  The only difference between the two is that Dennis' post uses a wider width.  I also like having a blog that is wider in order to fit images and code snippets as needed. I ended up using Dennis's wider width.

The trick here is having a version of Adobe Photoshop around to customize the image.  Both blog posts provide links to a multi-layered Photoshop image that you can easily add your custom image to.  That makes it possible to preserve the borders as well as the paper-clipped "sticky-note" that will contain the blog's title.  You can see my custom image below after some Photoshop work.

JrzyShrDevGuyBanner2 - WithMarkup

Customizing the Paperclip Theme Fonts

After getting the new banner image in place, I needed to customize the font sizes and colors.  I decided to bring along my existing "Old Barney" colors for the ride to keep some resemblance to my old style.  However, the CSS classes used by the Paperclip theme are different than the ones in the Poison Ivy theme.  That meant that the custom CSS overrides I were using previously didn't work.  The next step was to do some digging around to figure out which CSS classes applied to the parts of the page I wanted to customize the fonts on.

The best way to do this is open your blog in Expression Web and click around to discover which CSS classes have been applied to the parts of the page you want to change.  Alternatively, you can figure things out by exploring the customizations others have made to their Community Server blogs.  Community Server 2.1 stores a user's customizations in a CSS file that can be accessed by appending "customcss.ashx" to the part of the URL that comes after their name.

For example, my blog URL is "http://blogs.msdn.com/peterlau".  You can see my customizations by viewing the CSS file generated at "http://blogs.msdn.com/peterlau/customcss.ashx".

I ended up examining the CSS files of other bloggers who had customized the Paperclip theme to figure out what CSS classes I needed to modify.  Once I did that, it was just a matter of picking the colors and adding them to the CSS Overrides tab in the Community Server control panel.  I kept the "Old Barney" colors for my titles and link, and then added a tan background to match the shore theme of the banner image.  You can see my Paperclip customizations in the CSS snippet below:

a:visited,
a:active,
a:link {    
    color: #cc3300;
}


body {
  background-color: #cdc9b4
}

.posthead {
  color: #cc3300;
  font-weight: bold;
  font-size: x-large;
}

.posthead a:link, .posthead a:visited, .posthead a:active {
    color: #cc3300;
}

There were a couple of other additions I wanted to make in addition to the new banner image and theme.  Some of these I started making over the past week or two.

imageUser Group and Blogger Links

I usually post each month about all of the Microsoft related user groups that meet in the metro area.  Sometimes I don't always get around to this, so I decided to put a permanent link to all of the area groups I'm aware of on the sidebar.  That way folks can always find information they need about their local user group right off the main blog page.  I did this by creating several Blog Lists with the links in Community Server's control panel.

imageUsing the same technique, I also added links to my fellow Microsoft Evangelist colleagues on the east coast in the sidebar too.  I'll continue to add links here to other bloggers that are relevant to Microsoft and this area over time.

Twitter Updates

You may have my recent posts about Twitter.  Via Glen Gordon, I found an HTML Twitter gadget that allows you to include your most recent Twitter messages on your page.  In the Community Server control panel, you can paste this HTML snippet into the "News" box.  To customize it for your account, insert your Twitter username where I have highlighted in red below.

Here is the HTML snippet I used to add my most recent Twitter posts to my blog:

<div id="twitter_div">
    <h3>Twitter Updates</h3>
    <ul id="twitter_update_list"></ul>
</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js" />
<script type="text/javascript" 
        src="http://twitter.com/statuses/user_timeline/[yourTwitterNameHere].json?callback=twitterCallback2&count=5" />

Update: You can get this same snippet direct from Twitter itself here.

Collapsible Tags & Archive Lists

imageBy default, most of the themes in Community Server 2.1 display the "Tags" and "Archives" list in the sidebar.  The Tags list displays a 'tag cloud' containing all of the tags I have ever used on my blog posts.  Clicking a tag in the list will show you all of the posts I have tagged with that tag. The Archives list displays a list of all months that have passed since I started the blog, along with the number of posts from each month.  Clicking a month will show you all of the posts from that month.

Tags are useful in that they help with search engine optimization.  Tagging your posts makes it easier for users to find your posts via the major Internet search engines.  (Or so I've been told.)  Therefore, I end up using as many useful/unique tags as possible on a post when I publish it.  The problem is, the more tags I use, the Tags list becomes so long that it ends up taking up a lot of vertical real estate.  The same thing happens with the Archives list as each month passes.

While the tag cloud is useful for giving readers a quick glance at the types of things this blog is about, its value declines the more single-use tags are in the list. It would be nice if Community Server offered a way to only display tags that have been used a certain number times before they appear in the tag cloud.  However, the current version used by MSDN Blogs does not.

Unfortunately, there is no way to turn these sidebar options off in Community Server 2.1.  However, via Chris Bowen, I discovered a JavaScript hack that lets you make these side bar lists collapsible.  Actually, the script will make any Community Server sidebar panel collapsible. The script scans the page for any header tags who's innerHTML matches the names of side bar lists you include in the script.  It then collapses them by default when the page loads.

In the Community Server control panel, you can paste the script below into the "News" box. 

<SCRIPT type="text/javascript">
   1:  
   2: function CollapsiblePanel(elem) {
   3:   if (!elem) {
   4:     return null;
   5:   }
   6:   
   7:   // Close 'this'.
   8:   var self = this;
   9:   
  10:   this.toggle = function() {
  11:     if (self.sibling.style.display == "none") {
  12:       self.elem.innerHTML = self.collapseHTML + self.title;
  13:       self.sibling.style.display = "block";
  14:     } else {
  15:       self.elem.innerHTML = self.expandHTML + self.title;
  16:       self.sibling.style.display = "none";
  17:     }
  18:   }
  19:   
  20:   this.elem = elem;
  21:   this.title = elem.innerHTML;
  22:   this.expandHTML = '<img src="INSERT URL TO EXPAND IMAGE HERE" width="9" height="9">&nbsp;';
  23:   this.collapseHTML = '<img src="INSERT URL TO COLLAPSE IMAGE HERE" width="9" height="9">&nbsp;';
  24:   this.elem.style.cursor = "pointer";
  25:   
  26:   this.sibling = elem.nextSibling;
  27:   if (this.sibling.nodeType == 3) {
  28:     // Get second sibling if text node is next.
  29:     this.sibling = this.sibling.nextSibling;
  30:   }
  31:   
  32:   elem.onclick = this.toggle;
  33:   this.toggle();
  34: }
  35:  
  36: window.onload = function() {
  37:   // Enumerate headers after document is loaded.
  38:   var i, h3s = document.body.getElementsByTagName("h3");
  39:   for (i = 0; i < h3s.length; i++) {
  40:     var elem = h3s.item(i);
  41:     //Modify this OR statement with the names of the sidebar lists you want to make collapsible
  42:     if (elem.innerHTML == "Archives" || elem.innerHTML == "Tags") {
  43:       new CollapsiblePanel(elem);
  44:     }
  45:     if (elem.innerHTML == "Recent Posts") {
  46:       elem.innerHTML = "Latest Bits + Bytes";   
  47:     }
  48:   }
  49: }
</SCRIPT>

To customize it for your Community Server 2.1 blog, modify the OR statement (on line 42) with the side bar lists you want to make collapsible.  The script depends on two small image files to represent the + and - symbols you click on to collapse or expand the list.  I've posted a copy of those image files up on SkyDrive at the links below. You will need to store these image files somewhere on the web that is accessible to the script, and then update the URLs in the script to point to that location.

 

Note: The script searches for "h3" headers.  Some themes in Community Server 2.1 use "h4" headers for the sidebar lists instead. If this is the case, you will need to modify line 38 to look for "h4" elements.

Latest Bits + Bytes

image In the previous version of my blog, I had a list of my most recent blog posts called "Latest Bits + Bytes" that would display in the "News" block on the side bar.  I used a hack which displayed an RSS feed of post titles from Newsgator to create this list. 

I can't find the link for this hack now, but it's not needed anymore.  The Community Server Paperclip theme which I used for the new look-n-feel has a "Recent Posts" list included in it!  Using a couple of lines of JavaScript (see lines 45 & 46 in the script snippet above), I simply rename the "Recent Posts" list to "Latest Bits + Bytes".

World Maps

With any blog, it's always interesting to track how many users you have.  It's also nice to track where they are coming from. I had been using a service called ClustrMaps to do that.  ClustrMaps displays an image on your site, then tracks your site's visitors' IP addresses and displays them on a map. The map view was nice, but not much detail is provided (at least with the free version of the service I was using).

Enter World MapsWorld Maps is a site tracking service developed and maintained by my fellow MS Evangelist, Brian Hitney.  World Maps works in a similar way as ClustrMaps, however, the information it provides is much more detailed.  Not only that, World Maps is implemented on .NET.  The service utilizes the Virtual Earth API, allowing you to zoom in and out and see pushpins where your site visitors are coming from. (At least where their IP addresses report they are from.)

To use World Maps, visit http://worldmaps.structuretoobig.com to sign up for an account.  After signing up for an account, you will get an HTML snippet which you can then add to your site.  In my case, I pasted the HTML snippet into the "News" block via the Community Server control panel.

JrzyShrDevGuyPaperClipThemeFinal Result

So if you've made this this far in your RSS Reader and haven't seen the web site yet, here is a screen shot of the final result on the right.  It took me longer to write up this post then it did to make all these changes.  Hopefully this post is useful for anyone looking for tips on how to customize a Community Server 2.1 blog. 

I'm always open to feedback on the new design.  Let me know what you think or if you have any suggestions for how I can improve it.  Thanks!

  • Getting this posted before I head to Seattle for the MVP Summit. I am so stoked about this trip. Peter

  • Hey, nice new look. JRZYSHR is still hard for me to get right though. I need vowels and stuff.

  • From the &quot;only in Jersey&quot; files... Pathmark is a regional grocery chain in the NYC/NJ/Philly

Page 1 of 1 (3 items)