MOSS 2007, CSS, and you, the Non-Developer – Part 5: the TopNavigation and the SiteActions Menus

Guest Author: Jay Simcox
The SharePoint Mechanic

The last time we met we continued the modification of our SharePoint main page by making changes to the main body area of our page as well as changing the title font and border colors of some of our default web parts. As I said in that ARTICLE if you don’t count making changes to your web parts there really wasn’t a lot to change on that page via CSS. Today’s article will definitely make up for that. I had originally planned on covering the top navigation menu, site actions menu and adding a banner to the page but I think that is a lot for one article so I am going to cover just the siteactions and topnavigation menus today. Next time we’ll come back to the banner as well as make some changes that need to be applied to some of the underlying pages of our site in order to remain consistent.

I would like to mention that I have made a change in how I am identifying the classes I am making changes to. If you read the Intro Article to this series I recommended a script that Todd Bleeker had written some time ago that can be embedded in a CEWP and will identify the classes of your page when you hover your mouse cursor over a specific location on the page. After reading some comments by Eric Schrader on Part 3 of this series I decided I would give the developers tools for Internet Explorer another try. I had tried it before at work but apparently there are some security settings on our workstations at work that prevent it from working so I went with Todd’s script at the time. After trying the IE Developers tools at home I would strongly suggest you try to use them if at all possible.

Now, with all that said we’ll move along to the important part of today’s article. We’re going to start by working with the navigation tabs for our site. If you look at these you’ll notice that I have made a couple of changes to the tabs and you should be able to see the drop down arrows to the right hand side of several of them. There are a couple of reasons for that and I’ll make sure to point those out as we get to them. Before we do that a quick look at the top navigation tabs before we make any changes to it.

1. Our first change is going to be to change the background color of our tabs. As with many other classes we have seen throughout this series we will need to remove a background image before we can set a background color via .css so we’ll locate the .ms-topnav class and remove the background-image declaration by setting the url portion of the background-image declaration to “none”.


2. Now that we have made the appropriate changes you can see that the background color of the top navigation tabs did indeed change, with one exception; the “Portal Home” tab did not change. The other thing you’ll notice is that the font color of the navigation tabs did not change either. Let’s fix both of those things. First we’ll make two additional changes to the .ms-topnav class, we’ll change the color declaration and add a font-weight declaration.


3. Now to fix the background color, font color and font weight of the first tab we’ll make 2 changes to the .ms-topnavselected class and 1 change to the .ms-topnavselected a{ class. First we’ll remove the background-image by setting the url to “none” again, then we’ll change the background-color declaration to set our background color. Once we have done that we’ll change the color declaration of the .ms-topnavselected a{ class to the font color of our choice. You should be able to see that I have inverted my color selection for the font and background so the selected tab displays differently than any other tab.


4. As I mentioned earlier I changed the tabs a little for a couple of reasons. One is that I wanted to make sure we talk about how to make changes to the drop downs using CSS and the other is for an upcoming article I am writing and presentation I’ll be doing at SharePoint Saturday – Atlanta in a couple of weeks. So in the following screenshot you can see that none of our colors for backgrounds or font colors have been changed on the drop downs or when we hover our mouse over a navigation tab. Let’s look at the hover aspect first and see what we can do with that. In order to make our changes we’ll have to find the .ms-topnavhover class and remove the background-image and then we’ll change the background-color declaration to fit our needs. In order to change the font color of the cell when we hover a mouse cursor over it we’ll change the color declaration of the .ms-topnavhover a{ class.


5. Now we’ll make the changes necessary so that our drop down menus show the background color we want. Keep in mind that there are really two states we are looking at here, the “Hover” state for when a mouse cursor hovers over a link and the “Static” state where the dropdown cell displays with no interaction from the user or the mouse. We’ll change the “Static” state first by changing the background-color declaration of the .ms-topnavflyouts class. We’ll also change the font color and weight here.


6. Next we’ll change the “Hover” state of the drop down menu so that it shows a white background and keeps the dark green font color and bold font-weight we want. We’ll change the background and font colors in the .ms-topnavflyoutshover class. The font-weight will propagate from the .ms-topnavflyouts class.


7. Now here we run into a bit of a problem. If you look at the following screenshot you’ll see that our drop down menu shows a blue box to the far right hand side of the cell. In the master page there is some code that sets the CSS Classes for your master page. Directly above that the master page sets the DynamicHoverStyle-backcolor to #CBE3F0. Now why Microsoft decided to do this is beyond me and you would think, well ok I’ll just change the color here. That did not work for me in this case. The only way I could get my changes to the .ms-topnavflyoutshover to apply was to make the changes directly in the default.master and set DynamicHoverStyle-BackColor=””  Once I made that change the background color I had specified for the topnavflyoutshover class applied to the entire drop down cell as shown in the bottom image.



The image below shows exactly where in the default.master page I changed the DynamicHoverStyle setting.

Well now that we have the top navigation tabs displaying to our liking. Let’s take on the Site Actions Menu. It should be noted here that making any of the following changes will affect all menus throughout our SharePoint site, not just the Site Actions menu.

1. True to form we will need to remove another image before we can make any changes to the background color of the site action menu. Let’s find the .ms-siteactionsmenu div div div { class and remove the background-image url and then setting the background-color attribute to the color of our choice.


2. Next we’ll change the background color the Site Actions Menu displays when a mouse cursor hovers over it. We’ll do this by removing the image from the .ms-siteactionsmenu div div div .ms-siteactionsmenuhover class and setting our background-color declaration. It should be noted here that if you wanted to you could also change the border color and weight if you wanted to. I chose not to do this in this particular case.


3. Now we’ll change the font colors of the Site Actions Menu labels (Create Page, Edit Site, etc…). We are going to do this by adding a color declaration to the .ms-MenuUILabel, .ms-menuuilabelcompact class. If you look at your copy of core.css you’ll notice that there are two additional classes with the two here both of which are appended with RTL. These are classes that are specific to implementations where text is read from right to left. Also, in this example you’ll notice that one class ends in “compact”, this class is for menus specific to web parts, lists and libraries etc…


4. I want to change the font color of the descriptions of my menu items so next I’ll change the color declaration of the .ms-menuitemdescription class. Additionally if you wanted you could change the font-family, font-weight, font size etc… in this same class.


5. What I’d like to do now is change the background of the site actions drop down menu. If you look at that menu you will see that there are really two parts to it. There is the main table which contains all the item labels and their associated descriptions and there is a vertical column on the left hand side of the menu that holds any images associated with the items being displayed. We could change that main body, or right hand column, of the menu first by changing the color declaration of the .ms-menuUI, .ms-menuUILarge, .ms-menuUIRtl, .me-menuUILargeRtl classes (note that these are all grouped together in the copy of the core.css file we are modifying) but I cannot for the life of me figure out how to set a background color for the column that runs vertically on the left hand side of that menu. If you look at everything else we have done you would think that there is an image there but I have tried every combination of removing images and adding background-color declarations to no avail. So we’ll go with a single color for the background of our Site Actions Menu drop down. We’ll do that by adding a background-color declaration to the .ms-MenuUIPopupBody TABLE class.

Here’s a screenshot of our SharePoint home page with the modified .css file applied. It still looks like SharePoint but at least it’s looking like what we want rather than what Microsoft gives us. Next time we’ll add a banner to our home page and make a few changes to classes that aren’t displaying on the main page, but that do need to be modified so that we have a consistent look across the entire site.

I hope you have found this useful! As always if you have any questions or comments please let me know.

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.