Introduction

As a Front-end Developer with a background in designing I’ll show you how to make a graphical design that works for a default SharePoint-environment. If you want to take control over the front-end, don’t use any themes. Create your art by using style sheets!

Not all graphical designs for a portal will work in a SharePoint environment. There are a couple of limitations the Graphical Designer must know. A Graphical designer needs to know the scope of the graphical design. For example, if a Graphical Designer puts a border on an element like a table, that will take him about 3 minutes to design, but this simple border could take the Front-end Developer a few hours to implement.

It’s really important that the Graphical Designer and the Front-end Developer work together and have a clear communication about the graphical design. Making a graphical design specifically for a MOSS environment could save you days on the implementation! This article will give the Graphical Designers more insight into the effect of these design decisions.

This article assumes that the reader has SharePoint and basic HTML knowledge.

Navigation

This section is all about SharePoint’s navigation elements. First the meta navigation is discussed, secondly the top navigation with a focus on it’s fly outs. Thirdly, the quick launch navigation is discussed and last but not least the site actions menu.

Meta navigation

The meta navigation contains a set of links: Sign In/Welcome, My Links, etc. The meta navigation is positioned at the upper right top of the page. It has three textual links and a help icon as you can see in the image below.

The meta navigation begins with the table.ms-globalright. The table is floated to the right which causes the menu to be positioned at the right of the page. This table has five <td>’s and they all contain the class name .ms-globallinks.

1. The first <td> is empty.
2. The second <td> contains the welcome text and a fly out.
3. The third <td> contains the vertical line.
4. The fourth <td> contains a new table.This table contains the “My Site” link, separator, “My Links” link and separator.
5. The last <td> contains the help icon.

Every <td> of the meta navigation has the class name .ms-globallinks. Unfortunately you cannot give this class and every <A> inside a color to change the color of all the links in the meta navigation. The Welcome link doesn’t change after applying a color to the .ms-globallinks and it’s <a>-tags. Because this <td> contains a <div> .ms-SPLink. Every link inside that <div> has a different color specified in the core.css style sheet. An other link that won’t change color is the My Links link.

When coloring all the links of the meta navigation add the declaration to the <a>-tags in the class name .ms-SPLink, like this:

.ms-SPLink a:link,
.ms-SPLink a:visited,
.ms-globallinks,
.ms-globallinks a{
    color:green;
}

This will overrule the styles for the links in the .ms-SPLink, as defined in the core.css, the master style sheet which takes care of the default styling on a SharePoint portal.

Welcome ‘Your Name’ and ‘My Links’

The <td> of these links contains two spans. The first one, which is hidden, contains the fly out. The second span contains a <div> which contains the <a>-tag. Within the <a>-tag the little arrow pointing down is positioned as well, as seen in the next picture.

The graphical behavior of the Welcome and “My Links” link is the same. When hovering the link, there’s a background-color and a border, suggesting it is a button. For consistent use of the graphical design you probably want to style the “My site” link the same as the other buttons.

Here’s the code to remove the background-color and border. Add the underline on hovering, to make it look like a textual link instead of a button:

.ms-HoverCellActive,
.ms-SpLinkButtonActive,
.ms-HoverCellActiveDark{
    background-image:none;
    border:0px none;
    background-color:transparent;
}
.ms-HoverCellActive a:hover,
.ms-SpLinkButtonActive a:hover,
.ms-HoverCellActiveDark a:hover{
    text-decoration:underline;
}

My site

The My Site link is the only link (in the meta navigation) that does not contain a fly out. Therefore, this link will respond to any styling assigned to .ms-globallinks a. The hover state of the .ms-globallinks a is not defined in the core.css style sheet, and therefore overridden by .ms-globalbreadcrumb a:hover. Style the .ms-globallinks a:hover to change the hover state.

Help icon

The help icon is an image inside an <a>-tag. Because the image itself does not have a class name or ID, it is not specific enough to hide all the images inside the .ms-globallinks. That is because then the separators would also be effected. Therefor, you can use the <a>-tag (with an ID) in where the image is, to hide the help icon (by hiding the <a>-tag, the image will also be hidden). It is not recommended to hide the help icon because it’s function is to help the user. It is possible to show another image here. To do this you need to hide the image inside the <a>-tag and make the <a>-tag behave like a block. Then give it dimensions and place the new image of the icon as a background image.

An example:

.ms-globallinks a#ctl00_PlaceHolderGlobalNavigation_TopHelpLink img{
    display:none;
}
.ms-globallinks a#ctl00_PlaceHolderGlobalNavigation_TopHelpLink{
    display:block;
    background:transparent url(/_layouts/images/new_help_icon.gif) no-repeat left center;
    width:10px;
    height:10px;
}

Separators

It is possible to make the separators of the meta navigation hidden, because these are the only non-hyper links in the .ms-globallinks. Because they don’t have any class names or ID’s that are unique within the meta navigation, you need to style it all. Afterwards you can style the links differently. Giving all the items in the .ms-globallinks a visibility:invisible or a display:none, and the links a visibility:visible or a display:block, will cause your links to disappear, but only in Internet Explorer. The only way to hide them for all browsers is by giving them the same color as the background color of the meta menu, which off course should have a solid background color.

The steps are as follows: give the .ms-globallinks the same color as the background color (or any other color you wish), and give the links in the .ms-globallinks a of your choice. Like this:

.ms-globallinks{
    color:#FFFFFF !important;
}
.ms-SPLink a:link,
.ms-SPLink a:visited,
.ms-globallinks,
.ms-globallinks a{
    color:green;
}

You can remove some padding of the .ms-globallinks to make the spaces between the hyper links less wide.

It is not possible to style the links on multiple lines, because the ‘welcome’-link and the ‘my site’-link have the same class names, and will react the same.

Top navigation with fly outs

The top navigation is the horizontal navigation bar at the top of every page (inside the bannercontainer). The top navigation shows the sites or pages from the first level. This first level contains every page or site made from the homepage. The homepage is always level 0. SharePoint enables users to rename, remove or add a link.

The top navigation has a lot of nested tables. The table of the banner frame contains four <td>’s.

1. The first is empty.
2. The second <td> contains the top navigation menu.
3. The third <td> is empty.
4. The fourth contains the site actions menu.

The site actions will be discussed later. First I want to focus on the top navigation menu. In the ideal world and maybe in the future it will by default, the menu would look like this:

<ul class="ms-bannerframe">
	<li></li>
	<li class="ms-banner">
		<ul class="ms-topNavContainer">
			<li> .. </li>
			<li> .. </li>
			<li> .. </li>
		</ul>
	</li>
	<li></li>
	<li>siteactions menu goes here </li>
</ul>

The second <td> contains a table, the .ms-topNavContainer, which contains multiple <td>’s. The first <td> is the home menu item, the menu item of level 0. The rest of the <td>’s are empty or contain other items of the top navigation.

Home, the first menu item

The home menu item is placed into another table, the .ms-topnav. Every menu item of the top navigation is placed inside a table with the same class name. When the menu item is active, it gets another class name added, the .ms-topnavselected. By using this class name in your style sheet, it is possible to style the active menu items different. Another element contains the class name .ms-topnav as well: the <a>-tagtable.ms-topnav or a.ms-topnav, or use just .ms-topnav for giving them both the sames styling. The same goes for the .ms-topnavselected. of the menu item. Be sure to style the right item by styling the

It is not possible to style the home menu-item differently then the other menu items, because they all have the same class names. If you want to do it anyway, you need to edit the HTML that is rendered for this menu.

Other first level menu items

The <td> with the other menu items, contains a table with two cells. The first cell is empty, the next cell contains a table, the .ms-topnav. If the menu item does not contain any pages or sites at second level, the <td> only contains the <a>-tag, just like the home button.

Background images

To style the menu items, you can use the class table.ms-topnav. You can give it a background color or background image. Be aware that the image must be repeatable on the x-axis unless the menu items have a fixed width. You cannot use an image that is different on the left and right side when the images have variable widths. This is because items with no second level have only one <td>. So you cannot use an image for the left side and another image for the right side.

If the table.ms-topnav has a fixed width, you can use one background image on the table, but be aware that menu items with a long text can be bigger then the set width. The styling of the menu item will fail.

The first image shows a menu item that has no arrow on the right. The second image shows the menu item when it does have an arrow on the right.

An example of how you could style the first level of the top navigation:

.ms-topnav {
     background-color:#70C8D4;
     background-image:none;
     border:0px none;
     color:#FFF;
}

.ms-topnavselected {
     background:#2B9AAE url(/_layout/images/topnavselected.gif) repeat-x fixed left bottom;
     border:0px none;
}

Hide the little arrow pointing down by:

table.ms-topnav td img{
     visibility:hidden;
}

Second level menu items (fly outs)

The second level menu items are the sub menu items that will become visible when you hover a top navigation menu item. In the HTML, the sub menu items are positioned underneath the overall table that contains the first level menu items. The whole fly out is rendered as a <div>, that contains a lot of nested <div>’s and tables, for every sub menu item and sub sub menu item.

Every sub menu item is rendered inside the table with class name .ms-topNavFlyOuts. This table contains a <td> with the link to the concerning page. When there are sub sub menu items, there are two <td>’s. The first one contains the <a>-tag. Only when there is a third level in the menu, the second one contains the little arrow image, pointing to the right.

The top navigation fly outs can be styled by referring to the <td>’s of the .ms-topNavFlyOuts table. The arrows are not that easy to style, because the image is not on the file system, but it is generated by code. To alter this image, you need to change a property of the AspMenu in your master page. How to do this is not discussed in these articles.

Reset the styling of the rollover of the menu items:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
     background-color:#000000;
}

Reset the styling of the background of the flyout items:

.ms-topNavFlyOuts{
     background-color:white;
}

The border that comes around the whole fly out area still has a blue border. This is set on the class name of the .zz1_TopNavigationMenu. Every fly out menu has it’s own class name, with a number. The number is variable and depends on the number of menu items on that page. You will never know which numbers will be used, since you do not know how many menu items there are. This for example will only work on one of the fly outs:

.zz1_TopNavigationMenu_8 {
     background-color:#F2F3F4;
     border:1px solid #A7B4CE;
}

When you look closer, you see that besides this class name, every fly out area has the same class name: zz1_TopNavigationMenu_0. So, to style the border of the fly out menu, you can change the border of this class name, like this:

div.zz1_TopNavigationMenu_0{
     border:1px #000000 solid;
}

Do check the fly out menu on a listpage, and double check if the list header is not visible on top of the fly out menu. This could happen when the the list header (.ms-vh or .ms-vh2) is relatively positioned. The solution for this is to make it static, it will not influence the styling of the menu.

.ms-vh div,
.ms-vh2 div{
     position:static !important;
}

Quick Launch navigation

The quick launch navigation is also known as the left menu. The quick launch has three parts.

• Quick Launch header

• Menu items

• Recycle Bin

The set of the three items together are rendered into two containers, the div.ms-quickLaunchouter and inside that is the div.ms-quickLaunch. Because the quick launch has two containers, it is possible to give the top of the menu another background image then the bottom, for example.

Hiding the quick launch menu

Some customers like the portal homepage to be without the left menu. There are several ways to do this. I’ll discuss three of them.

1: The first is to make a special page layout for the homepage. Make sure the control for the quick launch menu is inside the page layout and not in the master page. For that you have to edit all the other page layouts. Now make sure the left menu on the page layout you made for the homepage isn’t showed or even isn’t rendered at all, by removing the menu control. This solution will cost you the most effort and time.

2: The second way is to give the homepage page layout an extra reference to a style sheet. That would be a style sheet you make specially for the homepage and in where you add styles to hide the left menu.

3: Another solution to hide the left menu on the homepage is by adding styles that will make the menu disappear. It can be done in the style sheet, so the left menu will be hidden in every page, or it can be done by adding a Content Editor Web part on the page you wouldn’t want the left menu on.

First, add a Content Editor Web part to the particular page. Open the tool pane, and add some source code that will hide the left menu:

<style type="text/css">
.ms-navframe{
     display:none;
}
</style>

This way the quick launch outer is hidden and the left area is also gone, so that the content in the middle will have more space. The .ms-navframe is responsible for the width of the area the menu is in.

Next thing is to make sure the web part with the styling is not visible on the front end. For that, choose Chrome type “none”, in the Appearance menu and under the layout section check the check box for hiding the web part header. The menu (and the web part that is hiding the menu) is now hidden on only this page.

Quick Launch header

The header of the quick launch is a <H3> with a <LABEL> and a <SPAN>.

The label contains the text “Quick Launch”, but is invisible because it is absolute positioned and placed out of sight by the core.css. The span contains a <div> with class name .ms-quickLaunchheader. This <div> has a background image and background color. There’s also font-color defined here, but the text inside this <div> is always a link. So if you want to style that, it’s more efficient to style the <a>-tag.

Quick Launch menu items

The second part in the quick launch is the <div> with ID ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager. Inside this is a table with class name .ms-navSubMenu1. The 1 indicates the level of the menu items, The first level menu items. For every menu item there’s a <td> in this table.

Every menu item is positioned inside it’s own table, the .ms-navheader. Only the menu items on the first level are called navheader. Besides that, the <td>inside the table has an <a>-tag containing a class name .ms-navheader. So when styling the whole area of the menu item, or just the link itself, make sure you use table.ms-navheader or a.ms-navheader.

Sub menu items of the quick launch

As there is a <td> for every first level menu item, there is also a <td> for a collection of second level menu items. Inside that <td> is another table, the .ms-subNavMenu2 and every sub menu item has it’s own <td> in there.

Changing the background of the sub menu items can be done very easily, because of the .ms-navSubMenu2 class name. By default the <td> of this table has the bullet background image.

Removing this bullet can be done like this:

table.ms-navitem td, span.ms-navitem {
	Background-image:none;
	Padding-left:0px;
}

Every sub menu item has it’s own table and only one <td>. Therefore it is possible to use two background images underneath the text of the <a>-tag of a second level menu item. One image for the left and one for the right side.

Recycle bin

The recycle bin is the third item inside the quick launch. This table contains another table named .ms-recyclebin. Inside this table is the <a>-tag, containing the icon and the text “recycle bin”.

It is possible to hide the trash bin icon, because it is the only image inside the <a>-tag. There’s no padding on the <a>-tag, so by removing the image like this, the <a>-tag should automatically align with the other menu items.

.ms-recyclebin a img{
	display:none;
}

Site Actions navigation

If you have at least editor rights, you will find the site actions button on the right top of your screen.

The site actions button has a few nested tables and <div>’s. Only a few of them have ID’s or class names. From the outside to the inside:

1. Table.ms-siteaction
2. Td#siteactiontd.ms-siteactionsmenu
3. Div
4. Div
5. Span
6. Div (on hover it does have a class name: .ms-siteactionsmenuhover)
7. a

The <a>-tag for example does have an ID, but since it is an index number that points to the number of menu items, it is not wise to use this ID, because it could change per page or after a menu item was added.

When changing the background image of the button, refer to .ms-siteactionsmenu div div div and .ms-siteactionsmenu div div div.ms-siteactionsmenuhover.

Here’s some css to clear up the button and undo it from it’s (background-)colors, so that it looks like it is a textual link:

.ms-siteactionsmenu div div div,
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{
    background-color:transparent;
    background-image:none;
    background-repeat:no-repeat;
    border:0px none;
}

The secret of the little arrow

What is up with the little arrow in the site actions button? As you can see in the code, there is a blank.gif, which is not the image of the arrow. And there is no background image on it whatsoever. The arrow isn’t a background image of the <a>-tag either. So, where does this arrow come from then? It looks like it’s the <a>-tag’s parent <div>, but that one only has a background image that is responsible for the blue background.  The answer is closer than you think, because there is an image next to the <a>-tag, which is called whitearrow.gif. The question I cannot answer is why it is not inside the <a>-tag, since it should also be click-able, right? Well, it does explains why at first sight I couldn’t find the image. Mystery solved.

The site actions fly outs

The site action button had also a fly out menu when you have clicked on it. This menu is hidden in the span by an in-line display:none.

This menu is a bit different from the other menu’s. It has a <menu>tag and a <ie:menuitem> for each sub menu item. These objects cannot be styled in the style sheet.

Next time in “SharePoint’s Branding Limitations”

Next part of this article will contain information about web parts with text zones, lists and tables. Other topics are the graphical possibility’s of the edit mode and the news articles. Stay tuned!