MOSS 2007, CSS, and you, the Non-Developer – the GlobalTitleArea

In my last ARTICLE we started our little journey by changing the look and feel of the Quicklaunch menu and column by making changes in our copy of the CORE.CSS file. We changed the background colors of the quicklaunch menu header and item cells, the colors of the default links and the borders of the quicklaunch menu. Today we are going to focus on the area of the page that runs from the cell directly above the quicklaunch, actually part of the pagemargin, to the top of the global bread crumb links at the very top of the page.

Before we get started I would like to stress the following:

1. We are making the changes documented in this article in a COPY of the CORE.CSS file and then applying those changes through the administrative UI. You can rename the copy to most anything you want, I am using My_Core.css.
   
2. I am working in a virtual environment in order to minimize any risk.
   
3. Most administrators will not have access to the server. If that is your case contact your server administration team and request a copy of the CORE.CSS file and test any changes you make in a test environment prior to implementing them in any way, shape or form.
   

Once again we will focus on changing background and font colors. In addition to changing the background colors by setting the background-color class to a color (#ffccff for example) we will look at how we can change the way some of those areas appear by adding our own images.

1. We’ll get started by changing the color of ms-titleareaframe, which will change the color of the cell that runs the width of the page directly above the quicklaunch menu and page body.
   

    

1. In the next step we will add a background color to the cell between the globalnavigation tabs and the site actions menu. In order to this we’ll have to add a background-color declaration to the .ms-banner class and assign that declaration a color.

    

1. After adding the background color to the ms-banner class above you will see small cells on the left hand side of the global navigation tabs and the right hand side of the site actions menu. In order to set a background color on those cells we will have to remove the image that Microsoft uses for the background and then change the property of the background-color declaration.

    

1. Next we will set the background color of the cell that runs from the left of the site title over to the search scope box. We will do this by changing the property of the background-color declaration as shown in the following screenshot.

    

1. Now if you look at the previous screenshot you’ll see that the ms-sitetitle class does not set the color of the entire row here. There will be a white background behind the sitetitle icon on the left hand side of the page header as well as a white background around the search scope drop down menu and search box on the right. We set the background color in both places by removing the default Microsoft image and then changing the background-color declaration in the ms-globaltitlearea class.

    

1. At this point the last background area we have to change is the cell running the width of the page at the very top that contains the global breadcrumbs and the “Welcome User”, “My Site” and “My Links” links. This background is managed in the .ms-globalbreadcrumb class and can be changed by changing the background-color declaration.

    

1. Now we’ll go back and change the font colors of the links in the header area of our page. It should be noted that in addition to changing the font colors here you can also change font-weight, font-family, font size etc… We’ll start with the global links which includes the breadcrumb links in the upper left of the page and the “My Site” link in the upper right. We’ll change those font colors in the .ms-globallinks class by changing the color declaration.

    

1. As you can see above the font color of the “Welcome User” and “My Links” links did not change. For whatever reason SharePoint manages those font colors in the .ms-SPLink class and again by changing the color declaration.

    

1. Next we’ll change the font color of the site title link. This color is managed in the .ms-sitetitle class and is changed by making a change to the color declaration.

    

1. Our last font color change will be the color of the “Advanced Search” link. This is done in the .ms-sblink class and as with the other changes we have made done by changing the color declaration.

    

1. As I mentioned in the opening we are also going to look at how we can change backgrounds using an image. For this I created a .jpg image in Photoshop that measures 200px wide and 40px high. I saved that image file in the /_layouts/images/ folder within the 12 hive. In order to display that image as a background all we need to do is either replace one of the images we removed in the steps above with the path to our new image or as I have done here add a background-image declaration to one of our classes and point that declaration to our new image as shown below.

    

I think that it’s important to note that it appears to me that the image will resize itself in most cases to fit the height and width of the cell it is being added to. There may be cases where you will need to add a height or width declaration in order to accommodate the image you are trying to add. Additionally if your image is much wider or higher than the cell you are inserting it into you can try adding an overflow declaration and set the property to “hidden” in order for your image to fit properly. From what I have seen it’s more a trial and error thing to figure out.

1. The last step we are going to take in this article involves some behavior I find to be a bit strange and don’t entirely understand. I am still looking into it but here’s the fix I used for this specific issue. After I made the changes to the .ms-titleframearea we identified above I started seeing a large blue box on all my list pages. I found that the box is apparently another Microsoft image and I was able to get rid of it by removing the image in the .ms-pagetitleareaframe class as you will see in the following screenshot.

    

And now a couple of shots of your updated page to date:

Well, that’s all for this article. Next time we’ll look at changing the remainder of the pagemargin around the main page body as well as changing the font colors of some of our default web parts. I hope you found this useful. If you have any questions or comments please don’t hesitate to post them!

Until next time…