MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

Guest Author: Jay Simcox
The SharePoint Mechanic

In my last ARTICLE we changed the way that our TopNavigation and SiteActions menus looked and displayed on our main page. In today’s article we’ll make some changes to the GlobalTitleArea, add a banner to our page and make some changes to classes that are tied to pages that reside in the _layouts directory. Making changes to those classes will allow us to completely “skin” or “brand” our site and not have pages that appear to be incompletely altered or customized (the “Site Settings” page for example).

We’ll start by adding a header image to our main page. There are a couple of ways to do this; add the header image directly to the cells that hold the site title, the titlegraphic.gif, search boxes and “Advanced Search” link or you could customize your master page and add a table directly above those items and add your header image to that table. I don’t want to customize my master page so I am going to take the first approach. We’ll begin by hiding the existing elements of this row in the page, make some changes to the row height and then add our image.

As a reminder here is how our GlobalTitleArea currently looks.

Now let’s make the changes necessary to display a header image as a background to the site title.

1. We’ll start by hiding the title graphic image that appears at the left hand side of the header area. We’ll do that by adding a declaration telling the browser not to display the td.ms-titleimagearea class on our SharePoint page.

2. Now that we’ve hidden the graphic we’ll hide the site title. We’ll add a declaration to the .ms-sitetitle class telling the browser not to display that class. This will actually take care of 2 things for us, it will hide the site title and it will also hide the cell that runs across the width of the page and will show up in the middle of your header image after you add it.

3. The next piece is a little tricky. Once you tell the browser not to display the .ms-sitetitle class the search boxes will all re-align to the left hand side of the page. A post by Heather Solomon on her blog pointed me in the right direction (SharePoint CSS Trick: Align your Search Inputs). We’ll start by setting the width of the .ms-sblastcell, .ms-rightbodysectionsearchbox class to “0”. By default the width here is set to 100% which pushes all the search box components to the left of the page.

4. In order to get the search boxes back where they belong we’ll change the width setting of the .ms-sbtable-ex class to “0” as well. In addition we are going to set the position of the search box here by using a “position” declaration and setting the “position” declaration to “absolute” and the “right” declaration to “0”. If you wanted to move the search boxes up or down you could add an additional declaration for “top: 20px;” or similar. This declaration will actually move the search boxes to the top of the page directly below the Welcome and My Site links.

5. In the last step we’ll add a reference to our header image. We’ll do this where we had earlier removed a reference to one of Microsoft’s background images in the GlobalTitleArea. You’ll notice that I changed the font color of the “Advanced Search” link to make it more visible against the background image I’ve added.

With the header out of the way we’ll go back and tie up a few loose ends. If you’ve been working through this on your own you’ve probably noticed that in some of the administrative pages or in the “All Site Content” page there are cells that have not been customized but should have been. We did change those on the main page didn’t we?

Well, we did and we didn’t. There are some separate css classes for some of the administrative pages. This is where the IE Developer tools come in really, really handy because you can’t add Todd’s script to any of these pages. Anyway, let’s get those fixed up so we’re consistent across the site.

1. If you look at the “Site Settings” page now you’ll notice that the vertical pagemargin cell we had changed way back in part 2of this series hasn’t been changed. That’s because it uses a different class to determine the color of the cell. To fix this we’ll need to make 2 changes, one to the .ms-areaseparatorleft class and another to the div.ms-areaseparatorleft class. These changes will consist of removing the background images and then setting a background-color for each class.

2. Now we’ll make the same changes to fix the other side of the page. The only difference will be the classes we are applying those changes to. In this case it will be .ms-titlearearight .ms-areaseparatorright and div.ms-areaseparatorright.

Now there may be other places that changes didn’t trickle down or classes may have changed. These are the only two that I saw that were obvious. If you do find some you should have the ability to figure out what needs to be changed now.

Next time we’ll wrap it all up and talk about how SharePoint handles style sheets, some best practices, how to deploy the changes we’ve made and some lessons I’ve learned as part of this process. Additionally I’ll provide you with a copy of my customized .css file complete with comments and markup.

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

Until next time…

Guest 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 his background in end user training, support and network administration Jay focuses on finding those “no-code” solutions that all “Non-Developers” working with the SharePoint platform crave, developing and providing training for his end user community and sharing his knowledge with as many as he can.