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:

#tagline
{
margin-left : 70px;
}
.headermaintitle
{
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:

#s{
 position : absolute;
 right : 10px ;
 top : 10px;
font-weight: bold;
color: white;
}

.bs
{
 height: 20px;
 width: 140px;
font-size: 0.9em;
}
.bsb
{
 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;
}
</script>

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-top-width:0px;
 border-bottom-width: 2px;
 border-right-width: 2px;
 margin-bottom: 20px;
margin-top:0px;
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.

.post{
 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.

Comments (33)
  1. Cyriel says:

    Looks nice Josh, only you should make the width of the header of the middle row relative, if possible. Check out IE in non-fullscreen mode if you want to know why 😉

  2. Cyriel says:

    Errr forget the comment in my last post, I wasn’t really awake yet :p

    Actually your middle row is *OK*, only the *right* row tends to slide through the *middle* row in MSIE. It does work perfectly in FF though. So the CSS of your blog is in fact Standards compliant but not MSIE compliant 😉

  3. Tristank says:

    It looks kickass 🙂

  4. .Net Adventures says:
  5. Alex Barnett says:

    Nice one Josh, I’ve been looking for this kind of article for ages.

    Alex.

  6. thanks for making this available for those of us who never learned CSS. maybe one day I’ll change the colors, but for now I’ll just copy the whole thing.

  7. Josh Ledgard says:

    Cyreil: Yup. I notice this especially when I have the browser windowed and resize it without refreshing in IE. I don’t know how to fix it for IE really without totally messing with the firefox view. It’s unfortunately still a part of the black magic that is CSS to me.

    Tristan: Thanks!

    Alex/Scott: No problem. Keep in mind though that I just started learning some CSS to do this. There may be better ways out there. Also, your mileage may vary depending on the base appearance you choose. I did all of this based on the Marvin3 skin. It probably would look really weird to have done this one top of another skin.

    The best tip I had was really to open the CSS of the skins you like, pick the one that best suites your taste, and use that as a base. Then view the resulting source HTML that is generated and figure out what additional styles you can/want to apply.

  8. While it may be for IE only, I like to use a few static filters for effect.

    I customized my site with CSS some time back, using a .Text template that was pretty close to the basic layout. Then it’s just a matter of viewing the HTML source and overriding what CSS is already defined (or defining new styles for elements).

  9. Josh Ledgard says:

    Heath: I like what you’ve done to your site. Could you educate me on what you mean by Static filters?

  10. This afternoon Gretchen Ledgard’s husband, Josh (heh, bet you’re not used to that Josh) rolled out his new pimped blog

  11. Uwe Keim says:

    I do like most that the links are now really different from the rest of the text and therefore much better recognizable. Thank you!

  12. josh ledgard says:

    Uwe: No problem. That was one of the requests I had. I like it better now too.

  13. Nick Parker says:

    Too bad you can’t access the .ascx files; you can request the format of the search results in the MSN beta search to be of type RSS, thus allowing you to format your data however you want. I’ve recently added a search to my site (http://www.developernotes.com) where I am using the MSN search but requesting RSS in return, I think it turned out looking rather nice. You’ve done a great job since they have limited your access to the underlying code.

  14. job search says:

    Very good. Thanks man.

  15. k7's blog says:

    There! The credit where it is due.&amp;nbsp;After playing with the samples posted at Josh Ledgard’s blog&amp;nbsp;for…

Comments are closed.

Skip to main content