MOSS 2007, CSS, and you, the Non-Developer – Part 9: Customizing the Blog Body

Author: Jay Simcox
The SharePoint Mechanic

In my last ARTICLE we changed the way the quicklaunch of a blog site displayed so that it more closely resembles the color scheme we put in place on the home page of our SharePoint site. In today’s article we’ll continue working with the blog site and work on how the Admin Links web part displays and how we can set a custom width on the form body of the Post, NewPost, and EditPost pages of the blog site. We’ll also talk about a couple of side effects of the changes we have, and will, make as part of this process.

There are going to be a couple of things you need to be aware of if you want to set the form body to a custom width. We’ll cover those as we get to them in the article. That being said it will be up to you to decide if making those changes constitutes a best practice as related to your organization or if the benefits outweigh any potential drawbacks.

We’ll start by taking a look at the uncustomized body and admin links of our blog page. As you can see there is quite a bit of white space to the right hand side of the page and the web part titles and font colors have a bland washed out appearance (at least to me they do).

Let’s start today’s article by changing the way that the Admin Links web part displays on the page. We’ll make changes to the font color of the administrative links as well as the font and font color of the Admin Links web part title.

1. To change the font color of the Admin Links web part we’ll add the following code to our MyCustomBlog.CSS file. In order to identify which classes need to be modified to apply the change I am using the IE Developer Tools that are built into IE 8. Using the IE Dev Tools I hover the mouse cursor over the Admin Links title until just the title itself is contained within the box and then click once. When I do that the display window of the dev tools shows me that the title is contained within a <span> tag within a table identified as part of WebPartWPQ6 and in an h3 class that includes both .ms-standardheader and .ms-WPTitle. In this instance you do not need to include .ms-standardheader in your custom class.

Add the following code to our CSS file to set the font color of the Admin Links title and your blog page should resemble the screenshot following the new code..

 h3.ms-wptitle {
/* change the font color of the Admin Links webpart title */
color: #ff1414;
}



2. If you wanted to change the actual font-family, font-size or text-decoration you could add variations of the following code to achieve the look and feel you want. In this case I am going to set the font-family to “Showcard Gothic”, the font-size to “Large”, and the text-decoration to “Underline” to show that it can be done. I’ll comment out that code and change them back to the defaults before we move further on.

h3.ms-wptitle {
/* change the font color of the Admin Links webpart title */
color: #ff1414;
font-family:Showcard Gothic;
font-size:large;
text-decoration:underline;
}



3. Now on to setting the font colors of the links that make up the Admin Links web part menu. It’s imortant to be aware that this actually shows as an unordered list and the class will be identified as such. Using the IE tools again we can see that our unordered list class is ul.ms-blogadminlinks a so we’ll set the font color of that class to match the Adin Links web part we modified in step 1 by adding the following code. You might also notice I have used !important to force my custom css to overwrite the default SharePoint CSS.

ul.ms-blogadminlinks a {
/* set the color of the admin links list */
color:#ff1414 !important;
}



4. If we added wanted to change the font-family that displays we could do the same thing we did in the previous step and add a declaration to set the font-family to “Showcard Gothic” so that our Admin Links menu now looks as follows below.

ul.ms-blogadminlinks a {
/* set the color of the admin links list */
color:#ff1414 !important;
font-family:Showcard Gothic;
}



5. Obviously you can modify the fonts and font sizes of your blog post using the rich text editor that is part of the NewPost.aspx page form body. However, if for some reason you wanted to change the appearance of the blog post date you’d do it by making changes to the h3.ms-postdate class. We’ll also change the font-family here so you can see that as well.

h3.ms-postdate {
/* set the properties of the blog post title */
color:#ff1414;
font-family:Showcard Gothic;
/* font-size:large; */
}



6. As you can see now the footer text is a little hard to see so we’re going to make 2 changes here to make it more visible. Using the IE Developer tools we can see that the post footer is actually comprised of 2 classes; ms-PostFooter and .ms-PostFooter a and is contained within a div. As I mentioned we’re going to make 2 changes; one to change the color and font-weight of the unlinked portion of the footer (“Posted at 11:09 PM by”) and one to change the folnt color of the links portion of the post footer text. To do this we’ll add the following declarations to our CSS file (note the use of the !important designation in the div.ms-postfooter a class. This is done to display the text as unbolded).

div.ms-postfooter {
color:#ff1414;
font-weight: bold;
}
div.ms-postfooter a {
color: #ff1414;
font-weight:normal !important;
}



7. There’s one more change we’re going to make to the blog post page but before we do that the following screenshot shows the changes we have applied so far. You can see that we have modified the quicklaunch, the Admin Links, the Post Date and the Post Footer of our default blog post.


8. Now, there was a comment after my last article asking if I would look into seeing if we can set the width of the text box so that it matches the width of the post as displayed on the main blog page. At first I thought it was something that would have to be changed in the NewPost.aspx form but after playing with the CSS a bit I figured out that we can set the width of the form body of the New Item page. However, there is something you need to be aware of before doing this. If you change the width of the text box of the NewPost.aspx page by setting a custom width in CSS that change will also change the width of the EditForm.aspx page.

If you decide you can live with the trade off you can set the width of the text body of the NewPost and EditPost pages by adding the following declaration to our custom CSS.

.ms-rtelong, .ms-formbody {
/* set the width of the form body of the new and edit posts */
width:795px;
}




We’ll also set the width of the post as it appears on the Post.aspx and main blog pages. To do this we are going to add a declaration for the .ms-postbody class that will set the width to the same as the .ms-formbody class we changed above.

div.ms-postbody {
/* set the width of the post body on the main blog page */
width:795px;
}



9. As you can see in the first screenshot above the change we applied to the text box does not affect the title text box or the rich text editor selectors. Personally I didn’t see a need to have the Title text box or rich text editor selectors match the width of the form body text box but I can see where there might be those that would.  We’ll address both of those settings next. First to set the width of the Title text box you’ll add a declaration to set the width of the .ms-long class. Next to set the width of the rich text editor you’ll add a declaration to set the width of the .ms-rtetoolbarmenu. Note that the width for the rtetoolbarmenu that shows in the code below is only 48px. That’s because the declaration applies to individual the selectors in the tool bar menu.

.ms-long {
/* set the width of the text box for the blog title */
width:795px;
}
.ms-rtetoolbarmenu {
/* set the width the of the Rich Text Menu in the form body */
width:48px;
}



10. I’m sure you’ve noticed that the font color of the standard headers (Title, Body, Category, Published, etc…) that show on the Post, NewPost, EditPost and EditComment pages of your blog site have not been changed. To do this we’ll set the font color of the .ms-standardheader class. You need to be aware that making this change will also change the standard headers in the various forms of your lists and libraries throughout the blog site.

h3.ms-standardheader {
color: #ff1414;
}



11. Next we’ll change the font color of the Comments header and Empty Comments text. We could also change the font-family but we won’t do that this time. To make this change we’ll add 2 declarations to our custom CSS file. The first will be the h3.ms-commentheader class and the second will be for the div.ms-commentsempty class.

h3.ms-commentheader {
color: #ff1414;
}
div.ms-commentsempty {
color: #ff1414;
}



12. One other thing we’re going to need to change fix is the background color of the quicklaunchheader of the Manage Comments and View All Content pages. If you look at them you’ll see that these pages are using the default quicklaunch header instead of the Blog Navigator. Because we used the MyCustom.CSS file as the basis of our CustomBlog.CSS file the .ms-quicklaunchheader class exists and needs to be changed to reflect the color scheme we chose for our blog quicklaunch on the main page.

.ms-quicklaunchheader{
padding:2px 6px 4px 6px;
font-weight:normal;
color:#003399;
/* removing the image allows you to change the background color of the */
/* quicklaunch header. It's important to note that you cannot simply */
/* comment out the background-image declaration */
background-image:url("none");
background-repeat:repeat-x;
/* changes the background color of the quicklaunch header */
/* background-color:#f6e4a9; */
background-color: #f6e4a9;
/* change the color of the left hand border of the quicklaunch header */
border-left:solid 1px #f6e4a9;
font-size:8pt;



13. As you can see in the screen shot above while the background color has changed the font colors of the quicklaunch have not so we’ll need to fix that. We ‘ll start by changing the font color of the “View All Site Content” link. Remember, this class already exists in our CSS file so we’re changing existing declarations and not adding new ones now.

.ms-quicklaunchheader a,.ms-unselectednav a{
/* changes the base font color of the quicklaunch view all sites content header */
color:#ff1414;
text-decoration:none;
	}



14. We’ve got the “View All Site Content” link fixed but we still have to fix the other links in the quicklaunch. Remember back in the second ARTICLE of this series where we changed the links of the quick launch. Well that what we’re going to do again and change the .ms-navitem a class to match the rest of the blog site.

.ms-navitem a{
/* changes the base font color of quicklaunch items (links) */
color:#ff1414;
text-decoration:none;
	}



15. And our last change will be to change the font color of the “Recycle Bin” link. To do this we’ll use the IE Developers tools again and will add the following class to our custom CSS file to apply the change to our Recycle Bin link.

table.ms-recyclebin td a {
color: #ff1414;
	}

That pretty much covers everything we’re going to modify on the blog page(s) of our site. There are some additional changes you could probably make to some of the lists and libraries but I’ll leave that to you to work out on your own. Think of it as your post session test. As promised a link to our MyCustomBlog.CSS file follows at the end of this article.

As always, if you have any questions please don’t hesitate to ask!

In closing I think this will pretty much wrap up the CSS series. I took a look at Wikis and in reality the only thing I saw that needed to be changed was the quick launch header and we’ve done that twice now. We could do publishing sites but there are a number of very good articles on the net already covering that.

Given those considerations I think it’s time to move on to something I’ve been planning for a while that I think some will find interesting (and hopefully) helpful. Look for a new series soon.

Until the next time…

Click Here to Download MyCustomBlog.CSS

Author: Jay Simcox
The SharePoint Mechanic

Jay Simcox is a SharePoint Architect/Administrator currently disguised as a “Programmer III” for his current employer. Jay has been supporting and managing Microsoft technologies for 10 years with the focus of the last 7 years being SharePoint. With a strong background in network/systems administration, end user support and training Jay’s focus is on developing and implementing solutions in SharePoint that require little (or no) code, bend out of the box SharePoint as far as it can without actually breaking it, and sharing what he knows and/or is learning with as many others as possible.