How to change the width of a SharePoint blog

I have been working with the new SharePoint (Windows SharePoint Services (WSS) 3.0 and Microsoft Office SharePoint Server (MOSS) 2007) since January of 2006, and it has been great.  The current version (at the time of this posting) is the Beta 2 build of WSS 3.0, and I have decided to upgrade my existing blog (based on .TEXT) to use this beta version of WSS 3.0.  However, as with any beta product – it’s not fully baked, so it is expected that bugs will exist.  So far, WSS functions pretty darn well.
 
On of the great new features of WSS 3.0 is that it offers a blog site.  The first thing I noticed about the beta 2 version of the blog site is that it has the with of the Post web part hard-coded (soft-coded really) to a width of 588 pixels. 
 
Now some people may want a fixed width blog site.  I don’t.  Better stated, I want the option to have a fixed width or a free flowing width.  One reason I prefer fully expandable and contractable (flowing) text is so the full width of the page is used without chopping off the right half of the article when I print.  This is one of the little things I find annoying.  It’s something the page/site designer should always consider, but often times do not.  I expect this will be adjusted with the next or future build of the new SharePoint product.
In the mean time, to remedy this I had a few options to choose from: 
  1. Modify the core.css file physically located on the SharePoint server file system.  This is where the fixed width of 588px is defined.  However, this requires local logon access to the file system.  I do happen to have local login access to my SharePoint server, but not everyone else who will be using the new SharePoint will have access to their server file system.  Plus, this is more invasive than I would like at this time.
     
  2. Use SharePoint Designer 2007 (formerlly, FrontPage) to edit the site definition.  This works fine, but I would prefer an easier option that is less invasive and allows me to keep my original style definitions in tact.  Note: the new SharePoint Designer 2007 has made some major strides when customizing SharePoint.  I wont go into the details here, but SharePoint Designer will be the optimal tool to use when branding (customize the looks and graphics) a WSS 3.0 or MOSS 2007 site.
     
  3. My third option is the easiest.  Use a Content Editor web part and leverage the flexibility that SharePoint 3.0 provides by using style sheets. Now this is easy and it allows me to keep my core files untouched and just as they were when originally provide by the SharePoint product team.  Microsoft still has much to do to fully bake SharePoint into the tasty product I fully expect it will become.

Solution:

SharePoint leverages style sheets very well.  So, we can simply Override the style class that is defining the fixed width of 588 pixels.  Since the Post web part is only displayed on two pages, this is easily the best near term solution until SharePoint if officailly released.
This will need to be performed on each of the following pages on your blog:
 
  <YourBlogURL>/default.aspx
  <YourBlogURL>/Lists/Posts/Post.aspx
 
  1. Add a Content Editor web part to the top of the page, just above your Post web part.
  2. Edit the newly added Content Editor web part using the Source Editor option and place the following style code in it:

    <style type=”text/css”>
    .ms-PostWrapper,.ms-CommentsWrapper,.ms-blogrss
    {
       color:#4c4c4c;
       width:100%;
    }
    </style>

  3. Change the Chrome value to None to hide the title bar and then save the web part.
Your posts should now flow the entire width of your web browser.
For reference, the original style class definition is this:

 
.ms-PostWrapper,.ms-CommentsWrapper,.ms-blogrss
{
   color:#4c4c4c;
   width:588px;
}
 
The width of my blog posts are now limited only by the content placed within each post.  And when printing, the text should be formated to fit the width of your printer.  Now this is much better.  :)   I hope this helps you too.
Advertisements

2 thoughts on “How to change the width of a SharePoint blog

  1. I was able to adapt this solution to my blog SharePoint 2013 with a couple of changes:

    1. I had to add the Content Editor to the navigator to get the style to be applied.

    2. I had to change the style to this:
    .ms-blog-postList
    {
    max-width:870px;
    background: yellow;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s