Author: Jay Simcox
The SharePoint Mechanic

Hello again friends and neighbors, it’s been a while since I last wrote anything on this series and in all honesty had figured I was pretty much done with it. Sounds a bit like your latest SharePoint related project doesn’t it? You thought you were done and then all of a sudden requirements change, the scope creeps, responsibility inflation sets in, or someone reads an article online or in a magazine and says “I want that and I want it yesterday”.

Such is my life. I didn’t have any intention of using the blogging capabilities of my portal but found myself in a situation where that was the best solution for a request/requirement I had. As such I had to make the blog page look the same as the rest of the pages in my SharePoint portal. Sounds simple enough doesn’t it? I wish it had been as simple as it sounds. I quickly found that styling the blog pages is a little more difficult than the basic team sites I had just finished.

What will follow will be a mini-series within the larger overall series. Over the next couple of articles we’ll take a look at how I worked through the issues of identifying CSS classes, where and when I needed to use !important, and how to style certain div’s, td’s, tables and web parts that make up a blog site in MOSS 2007. The end result will probably cover more than just the blog site itself as we may also style some of the lists and libraries used as part of the blog site.

I’ve started by creating a blog site under the Demo site we finished up with in my LAST article. Out of the box, with no custom CSS file applied the site uses the default blue theme that is generally associated with SharePoint as shown below.

SharePoint “looking” isn’t it? Wait for it, you know it’s coming. You know, that requirement we mentioned way back in the FIRST article in the series, “Make it look not like SharePoint”.

Ok, I can accept that, after all it isn’t the first time and we do have the CSS file we just created for the team sites. It should work and cover most of our needs shouldn’t it? Unfortunately the answer to that question is “Not quite”. As you can see in the screen shot that follows when I apply the MyCustom.css file to the site most of our changes are applied, well with the exception of almost all of the Blog site quicklaunch menu anyway.

You can see in the screenshot above that the blog site quicklaunch behaves differently than the quicklaunch on the team site. In a SharePoint Team Site the quicklaunch is generated by the master page and uses a data source to create the navigation menu that we are all familiar with. On the main page of the blog site what you actually see in the quicklaunch area are several List View Web Parts (LVWP) that make up the BlogNavigator. If you click on Site Actions > Edit Page you will see the web parts and web part zones on the page as shown in the following screen shot.

When you create a blog page the 3 List View Web Parts (LVWP) that are added to the BlogNavigator menu area by default are; “Categories”, “Other Blogs” and “Links” and are used to drive navigation for the site. If you look at the screenshot above you can see that some of the styles we had applied to the quicklaunch on the main page don’t apply here and that’s where we’ll start our journey.

NOTE: In order to walk through this process we’ll start with a copy of the MyCustom.CSS file we used previously, rename it to MyCustomBlog.css, and apply it to our new blog site, and then we’ll be making our changes to that copy. I also have a copy of Core.CSS in order to help me locate and identify the styles associated with the blog pages. I will also be using the IE Developer tools that are built into IE 8 or can be downloaded and installed on your PC to help identify the classes I am trying to change. I found these tools to be invaluable as I worked through the steps in this task/article.

1. We’ll begin by changing the styles that apply to the navigation headings in the BlogNavigator menu area. Using the developer tools we can determine that we need to make a change to the .ms-BlogNavigator div .ms-navheader element. We’ll find this element in our copy of the CORE.CSS and paste it into our MyCustomBlog.CSS file. Once that is done we’ll change the declaration for the background color to fit our needs.

.ms-BlogNavigator div.ms-navheader {
/* set the background-color of the blog quicklaunch nav headers */
background-color:#fbff9b;
border-top:solid 1px #006600;
border-bottom:solid 1px #006600;
padding:1px 6px 3px 6px;
}



2. Take a look at the submenu or links background colors. This appears to be one of those styles that actually carried over from our customization of the quicklaunch on the main page. I could leave it because it does match the rest of the site but I am going to change it so you can see what actually needs to be changed here should you need it. We are going to modify the .ms-blognavigator td.ms-CategoryTitleCell a in order to set our background-color.

.ms-blognavigator td.ms-CategoryTitleCell a {
/* set the background-color of the "Categories” and "Links" cells */
background-color: #fbff9b;
}



3. Next we will change the background color of the “Add New” cells. We will do that by setting the background-color property of the .ms-BlogNavigator td.ms-addnew classes. Once you have made that change and applied your CSS file to the site you’ll notice that the “Add New” cell has a small white box at the top and bottom of the cell. We’re going to need to fix that in the next step.

.ms-BlogNavigator td.ms-addnew {
/* set the background-color of the add new cell in the blog quicklaunch */
background-color: #fbff9b;
padding-left:6px;
}



4. While we’re at we will go ahead and change the font color of the “Add new” links (“Add new link” and “Add new category”). In order to do this we’ll add an “a” (denoting a link) to the .ms-BlogNavigator td.ms-addnew class so that it displays as follows below.

.ms-BlogNavigator td.ms-addnew a {
/* set the font color of the text in the "Add new" links */
color: #FF1414;
}



5. Ultimately this was probably the most difficult step to identify and to be honest I’m not sure that there isn’t a better way to accomplish this. That being said here goes; as I mentioned previously if you look closely at the “Add new link” cell you’ll notice two cells directly above and below the “Add new” cell both showing a white background. Using the developer tools I was able to identify an image buried in a <td> within the Categories LVWP that I am pretty sure generates that cell. The bad part is the only way I found to change the color was to change the background-color attribute at the web part level.

There are two ways to identify the ID’s of the web parts we are going to need to change.

1. In your Internet Explorer menu toolbar click through the following path: View > Source. The source of the SharePoint page will come up in notepad. Do a search for “Categories” and you should be able to identify your web part ID’s from there. In our case here we are going to modify WebPartWPQ3, WebPartWPQ4 and WebPartWPQ5.


2. Use the IE Developer tools to find your web part ID’s. Open the developer tools and in the upper left hand corner click the arrow button (Select Element by Click). Go back to your SharePoint page and hover your mouse cursor over the page. As you move the mouse cursor around you will see various elements “activate”. Move your mouse cursor over the “Add new link” until the small cell directly under “Add new link” activates and click. In the developer tools interface you’ll see the location you clicked highlighted.




6. As I mentioned above we’re going to set the background-color at the web part level by adding the following declaration to our custom.css file. This code will set the background-color of the 3 web parts in the blog quicklaunch.

div #WebPartWPQ3 {
/* sets the color of the cells directly above and below the "Add new" link */
background-color: #fbff9b;
}

div #WebPartWPQ4 {
/* sets the color of the cells directly above and below the "Add new" link */
background-color: #fbff9b;
}

div #WebPartWPQ5 {
/* sets the color of the cells directly above and below the "Add new" link */
background-color: #fbff9b;
}

You should see that the white cells we had seen  above and below the “Add new” links earlier are now no longer displaying.



7. Set the font color of the menu headers. In order to do this we are going to add an Id declaration to our CSS file (note that there may be another way to do this and I just haven’t found it). Using the IE developer tools when we click on the “Categories” header we can see that the tool will pick out the .ms-navheader class.  However, if we go into our custom CSS file and change the “color” attribute of the .ms-navheader class the color of the font on our menu does not change. We could drill down and use the link Id (blgcatdefviewurl) but then we would have to do that for each of the 3 headers in our menu.

What I’ll do instead is add an “!important” rule to the .ms-navheader class. The “!important” rule property will override the existing .ms-navheader property or attribute so that our changes will be applied. We’ll make a change to the .ms-navheader a, .ms-navheader2 a class in our custom CSS file to change the font color of our blog menu.

.ms-navheader a,.ms-navheader2 a{
font-weight:bold;
/* changes the base font color of the quicklaunch headers */
color:#ff1414 !important;
text-decoration:none;
}



8. To change the font color of the “Categories” and “Links” links we’ll add a line to the code back in step 2 to set the color attribute so that it will now look as follows.

.ms-blognavigator td.ms-CategoryTitleCell a {
/* set the background-color of the "Categories" and "Links" link cells */
background-color: #8D979C;
/* set the font color under the "Categories" and "Links" headers */
color: #ff1414;
}



9. Next let’s change the background color of the cell containing the “RSS Feed” link. We’ll do this by adding a declaration for the .ms-BlogNavigator div.ms-BlogRSSNav class and setting the background-color attribute. I am also going to add an attribute to set the color of the top border of the cell to match the borders of the quicklaunch.

.ms-blognavigator div.ms-blogrssnav {
border-top: solid 1px #006600;
background-color: #fbff9b;
}



10. Now we’ll set the font color of the actual “RSS Feed” link. To do this we’ll add another declaration for the .ms-BlogNavigator div.ms-BlogRSSNav class and append the “a” that denotes a link as shown below.

.ms-blognavigator div.ms-blogrssnav a {
color: #006600;
}



11. As you can see we’re down to 2 areas we need to change. One of them, the background for the “Other Blogs” section, has carried over the background color set by the MyCustom.CSS file. I want to change that to match the rest of my backgrounds. I am also going to change the font and border-bottom colors here as well. To do that we’ll add a declaration for the div.ms-BlogEmptyListText class. Note that this only applies if you have no links to other blogs here!

div .ms-blogemptylisttext {
/* set the background color of the Other Blogs cell */
background-color: #fbff9b;
/* set the font color of the text in the Other Blogs cell */
color: #ff1414;
/* set the border-top to none so you don't have an unusually thick border here */
border-top: none;
/* sets the color of the border-bottom */
border-bottom: solid 1px #006600;
}



12. Wow, finally the last section of the blog quicklaunch, the “View All Site Content” cell! We’re going to once again change the background color here so we’ll be changing the .ms-BlogNavigator div.ms-QuickLaunchHeader class by adding the following code.

.ms-blognavigator div.ms-quicklaunchheader {
/* set the background color of the View All Site Content cell */
background-color: #fbff9b;
}

And that’s all there is to it, we now have a blog quicklaunch styled to our liking. Remember what I said way back at the beginning of this article about this not being as easy as it sounded? Thought I was kidding didn’t you?

Next time we’ll take a look at changing how the “Admin Links” on our blog site appear. As always if you have any questions please don’t hesitate to ask!

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.