Pimped My Blog: Feedback Welcome

I don't run my own server and I don't have behind the scenes access at blogs.msdn.com so its a little more challenging to spice up my blog when I get bored of the way it looks.  This post describes what I ended up doing and how I did it.  I'll also toss in the custom CSS I used at the end.

3 Column View: I ended up having too much information for just one column around my blog text.  My goal was to have all of the pertinent links and information on one screen without scrolling. Picking the "Marvin3" display skin choice under "options->configure" was the first step.  I'm not one for picking fonts, colors, styles, etc, but I know I felt that Marvin3 was pretty ugly on its own.  I had no choice but to leverage the color and font choices from the "AnotherEon001" skin that I like (except for the fact the fact there are only two columns) in my "Custom CSS" selection. I essentially opened the raw CSS from Marvin3 and AnotherEon001, picked the best, and mapped what I could to the generated HTML from my blog. See my custom CSS below.

Recent Entries: The majority of hits to my blog come from web searches that lead to specific posts.  From that point I wanted potential readers to have exposure to other, more recent, posts.  Since I've added this feature I have noticed a LOT more referrals from older posts to new ones.  All shameless self promotion really.  To do this:

  1. I created a free newsgator online account
  2. Subscribed to my own feed
  3. Clicked organize folders
  4. Clicked edit locations
  5. Created a new location
  6. Clicked feeds and added my feed to the new location
  7. Clicked headlines on the new location
  8. Checked the enable box and edited the HTML for each link. To make it look good in my blog I made each title/link a list item. "<li><a href='$link$'>$title$</a></li>"
  9. In the news section of my blog I surrounded the script line provided on the headline setup page with the <ul> </ul> tags.

Upper Left Photo: I moved my pic up here because some people (Korby) complained that it was difficult to write comments on my blog when I was staring at them just to the left of the comment box.  Now I'm staring at him from above. :-) To do this I added the following top CSS:

#top {
background-image : url(
http://scooblog.members.winisp.net/images/jledgard3.jpg );
background-repeat: no-repeat;


You'd probably want your own image. :-)

Update: I bet you don't want the title text to draw over the picture. To shift the title and subtile over I did the following:

margin-left : 70px;
margin-left : 70px;

Upper Right Blog Search: This was way more difficult that I had imagined.  It is easy to just add the search code to the "static news/announcements" section, but I wanted it in the upper right section like the top of the Microsoft.com and MSDN pages.  First I tried simply using the position tags in the style to move the button and textbox. Unfortunately, anything you put in the news/announcements section ends up stuck inside the LeftMenu div.

I had to sneak it in.  I discovered the Subtitle Field on the options->configure page allows you to insert HTML that is unfiltered and printed back out as part of your blog page.  I also soon discovered that although this textbox doesn't have a cutoff you are limited to under 255 characters. Anything more will be cut off when the page renders, but will persist on the configuration page. :-) So, I present my new subtitle that calls the functions I left in the news section.

program manager | "community stick-wielder" | devdiv <div id="s">scoobsearch<br><input class="BS" type="text" name="SB" id="bstm" onkeypress="return bsm(event, this);"> <input type="button" value="go" onclick="return bsm2('bstm');" class="bsb"></div>

You'll notice I shortened the function names to get this to fit along with the actual subtitle text I wanted. Then I added the following CSS Selector to position and format:

position : absolute;
right : 10px ;
top : 10px;
font-weight: bold;
color: white;

height: 20px;
width: 140px;
font-size: 0.9em;
font-size: 0.9em;

The modified version of Davids MSN search code is put in the news section and looks like this:

<script type="text/javascript">

function bsm(event, oInput) {
var keyCode = (event) ? event.keyCode : keyStroke.which;
if (keyCode == 13) {
top.location = 'http://search.msn.com/results.aspx?q=site%3Ablogs.msdn.com+' + escape(oInput.value) + '%20scooblog';
return false;
} return true;

function bsm2(oInputId) {
var oInput = document.getElementById(oInputId);
top.location = 'http://search.msn.com/results.aspx?q=site%3Ablogs.msdn.com+' + escape(oInput.value) + '%20scooblog';
return false;

Reduced Categories and Favorite Posts: I was temped to rid myself of these two completely, but I had a few people tell me they were useful so I just cut back on the numbers to make the page look simpler.

Other places to Sneak HTML: I also discovered that you can sneak your own HTML into the "link category name", "Description", "link title", and "web url" Fields. I think you are again limited to your best 255 characters.  I currently take advantage of the link title Field to insert the image for the "subscriber options".  It would also be useful if there was another newsgator headline feed I wanted to put on the right hand side since the news section is stuck on the left.

Improved Comment Layout: I didn't like the default style of the comments in the feedback section because the permalink, title, date, and username were all just one inline text section. To break this up I added the following CSS selector:

#comments span {display : block;}

The only span in the comment section is the date/time and it happened to be in the middle of the title and name.  Adding display : block style forces a line break before and after the date/time so that the date and name are always in a consistent location.

I also wanted the box around the comments similar to the "anothereon001" style. So I added this to the CSS feild...

#comments h4{
border: 1px solid #CCCCCC;
border-right-width: 2px;
border-bottom-width: 0px;
padding :4px;}

#comments p {
border: 1px solid #CCCCCC;
border-bottom-width: 2px;
border-right-width: 2px;
margin-bottom: 20px;
padding :4px;}

Unfortunately with the Marvin3 style there was not a separate class for each comment so I had to create the box by half boxing the top (h4) and bottom (p) classes to each comment. :-)

Boxes around the posts: Wow, those comment boxes are neat, lets put some around each post to clearly separate the case when multiple posts are made in each day. This one was easier. :-) You'll want to add the following.

border: 1px solid #CCCCCC;
border-bottom-width: 2px;
border-right-width: 2px;
padding: 4px;
margin-bottom: 20px;}

Changing Colors: I've had a few requests to explain how to change the colors on the style sheet I used. Before embarking on this task I would recommend you check out the ColorPicker .Net application. It will help you pick the best hex value for your favorite colors. Here is a list of important colors you might want to adjust.

Top Background and Border Colors:

#top {
background-color : #20375f; /* The Dark Blue */
border-bottom : 6px solid #000000; /* The border under the dark Blue is black and 6 pixels thick*/

Keep in mind this is just a snippet from my #top override. You'll probably want to throw them all into the same tag.

Top Text Colors and Size

h1 { font-size : 1.8em;} /* Sets the size of the primary title */

h1 a:visited,
h1 a:active,
h1 a:link,
h1 a:hover
{color: white;} /* Sets the primary title to white */

You can see above I set the search text to white by setting the color of the #s div class.

Sidebar Background and Post Content Background Colors

body{ background-color: #EEEEEE;} /* The light grey background for the sidebars/*

#main { background-color : #FFFFFF;} /* Sets the white background of the main text area */

Fit and Finish: This took the longest. Making sure the font sizes were consistent, things lined up properly, and the colors agreed with one another. All of this was also accomplished with the CSS Selector Field. Rather than reprint the whole thing here I posted it for download.

scooblogCSSSelectors.css (download)

You could use this to make your blog look just like mine and prove that imitation is the highest form of flattery or you could be someone much more talented at CSS than I am and show me how I could make my own blog look better.

Well, that's all for this edition of "Pimp my Blog".  I learned way more about the "voodoo magic" that is CSS than I ever cared to and in the end; I think my blog renders better in Firefox now than it did before. If you have any feedback on the new look let me know.