SharePoint Magazine » Stylesheet

SharePoint’s Branding Limitations, Part 4

Diantha van Marion — Fri, 24 Jul 2009 07:51:47 +0000

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.

Search

There are multiple search interface within a SharePoint portal. One of them is the search interface in the header. Part 1 of “The art of SharePoint, how to make a graphical design work for SharePoint” discusses that one.

The search result page has it’s own page layout. If you take a look at the search results page you will see that the search interface is no longer in the header but is now onto the content area. It is not another web part, because it has kept it’s ID #1, that is reserved for the search interface.

Page layout

There is a specific page layout for the search results. If you take a closer look at the Black Search Page (Welcome page) you can identify the following page elements:

• Tabs

• Input fields

• Results bar

• Search results

• Paging (only visible when there are more then 10 item found)

The next section discusses all page elements in detail.

Tabs

The code in the following image shows that the tabs are rendered inside a table, the .ms-ptabarea, which is rendered inside the .ms-pagetitleareaframe of the web part

This table has one more cell as there are tabs. In this case there are two tabs, so there are three cells. The last cell of the table has only one function; it makes sure that the whole table has a bottom border all the way to the right.

The ’s with a tab all contain the class name .ms-sctabcf, or if the tab is selected, the class name is .ms-sctabcn. This makes it possible to style the selected tab different from the others. The last, the one for the border, has the class name .ms-sctabrx.

You can make the tabs look like textual links by removing the background color and the borders of the ’s. Make sure that the selected item will be styled a bit different so that it is still visible that it’s the one selected. Also make sure you style the rollover state of them. Every class name will get “hover” behind the usual class name (except for the .ms-sctabrx). For example .ms-sctabcfhover and .ms-sctabcnhover.

Input fields

Another web part on the search result page is where the input fields are. The table the input fields are in, has a cell for every element, plus one.

All the ’s have the class name .ms-sbcell, except for the last cell, that is empty. This one is called .ms-slLastcell. The cell that has the search button in it, has two class names, the .ms-sbcell and the .ms-sbgo. You can style this area by using these class names.

Results bar

The results bar is located just above the search results. It has it’s own web part zone called #MidUpperLeftCell. This web part has a table with three <tr>’s. The first ans the second <tr>’s are empty. The third one has a with a web part that is responcible for showing the result text. The text and the sort-links have a classname, you can use to style it.

The second results-row, is an other web part, in the web part zone #MidLowerLeftCell. Inside the .ms-WPBody is a div.srch-WPBody. In there is the div .srch-stats in where the text is located.

Inside the #MidLowerRightCell is the upper paging positioned.

Search results

The search results are positioned in the web part zone #BottomCell. The div inside this web part does have class name: .srch-results. All the search results are positioned inside that div. For every search result there is a .srch-Icon, .srch-Title, .srch-Description and a .srch-Metadata, so every element can get its own styling.

All the elements inside a search result have a class name. It is, for example, possible to hide the icon of the document, or give the search title, description or url another color. I advise you to only style the colors and fonts and leave the position of the element as they are, which leaves as much space as possible for the search results.

Paging

Inside the #MidLowerRightCell is the upper paging positioned. The paging at the bottom of the screen is also positioned in the #BottomCell. Inside the paging div, the .srch-Page there is an -tag for every link. The page that is being visited at the moment does not have a link, nor a classname. So when styling the numbers, first style every element inside the .srch-Page, then restyle every -tag inside the .srch-Page.

My Site

The My Site is a bit different then the other sites of SharePoint. First of all it uses another master page, which is composed out of different files. If you want to make changes in the master page or page layout of the My Site, there’s no easy way to do it. How you can edit the master page will not be discussed in this article. Just stick to the existing layout and only change the style sheet. It is possible to make a beautiful my site.

Because the master page of the My Site is a bit different, it does not contain a reference to your style sheet you created. Ask a developer or architect to add the reference for you, or if that is not possible paste the css code underneath the rest of the styiling in the portal.css. This is not the best way to go, because you really want to separate the default styles from the new one’s. And you do not want to make changes in the style sheet twice (once in your custom stylesheet and once in the portal.css). So, it is better to make the master page of the My Site work with your style sheet by adding the reference to it.

If you apply the layout style sheet for the portal onto the My Site, you will see that your graphical design is implemented for about 90%. I advise to double check all the items and make sure every element is styled correctly. Pay special attention to the blog and wiki, the calendar and the colleague tracker.

SIFR

Scalable Inman Flash Replacement (SIFR) is ment to replace short pieces of text (for example a title or header) by any particular font. Users of the portal do not need to have the font installed on their machine. SIFR works with javascript, flash and css and replaces the particular piece of text in a split second.

In the configuration file of SIFR you can refer to a class name or ID, so that the text inside that element will be replaced by a SIFR object. It is very easy to use. There is one thing you need to consider before using SIFR on a portal.

SIFR replaces the text with a flash object, a swf. This object is placed on top of the text, while the text that is being replaced is made invisible. It is possible to edit some of the object styles, for example the color and the padding.

What if the text you are replacing with SIFR is a link? Like for example a news header? In the news overview page the header is a link. SIFR replaces the text by a swf-object, but the object does not copy the reference the link had. So be careful where to use SIFR on a SharePoint Portal, because, if what you are replacing a link with SIFR, which has the same class name/ID as referred to in the configuration file, you cannot use SIFR. Make sure your Graphical Designer knows this, and prevent him from designing a fancy menu with spiffy fonts.

Calendar and date picker

The calendar has its own style sheet. Just like the date picker. When you style the calendar, you should also style the date picker, because those two have the same table-like structure and use the same colors. I advise you to only style the colors and fonts of the calendar and use the layout default.

Because there already is a special calendar style sheet, the calendar.css, it is very easy to style the calendar.

1 First of all, find an element you would like to style.

2 Search in the style sheet for its color and/or background image or -color.

3 Copy all the class names and ID’s that have that particular color or background image.

4 Make a separate calendar section in the exsisting style sheet, for example after the last line, at the end of the other styling in the calendar.css.

5 Paste the class names and ID’s in there and give them the color and background images you would like to give them.

This way, you can end up by changing a handfull color codes, and it can be done pretty easy. You can work the same way for the date picker, and you can use the same colors as you did for the calendar.

Here are some examples:

Make sure you have checked the day, week and month view. Also check a short appointment, an appointment over a few days and an all day appoint.

Summary

Here’s a small overview with highlights of all four parts of the article “The art of SharePoint, how to make a graphical design work for SharePoint”.

Styling elements will work best on elements that have a class name, ID or a combination of both.
Always double check if you haven’t forgotten to style any elements.
The calendar and the date picker have their own style sheet.
The look and feel is well manageable when making custom master pages and page layouts. This gives you the opportunity to find the boundaries and give it all a bit more exciting looking.
Most of the time, adjusting the height, width or colors of an element, text or image is not that hard. It is more difficult to style the position, the location of the page elements. Because you cannot change the order in which elements are rendered, you will need style sheets to edit the location on the page where the elements are shown.
Changing an elements position can cause some trouble on other pages on the portal, because class names and ID’s are used through the whole portal. Changing one of them will cause another element on another page to change also.

Resources

CSS Reference Chart for SharePoint 2007

By Heather Solomon

SIFR

By Mike Davidson

Tamtam blog Diantha van Marion

By Diantha van Marion

Thank You Tam Tam !

A big thank you to Diantha and Tam Tam from Arno at SharePoint Magazine. This post is from the SharePoint Magazine Partner Spotlight Week, where our featued partner was Tam Tam.

If you would like to be featured on the SharePoint Magazine Partner Spotlight, please contact us

SharePoint’s Branding Limitations, Part 3

Diantha van Marion — Thu, 23 Jul 2009 08:04:48 +0000

Introduction

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

Web parts

This section is all about SharePoint’s web parts. First the display mode of the web parts will be the point of interest, then the Edit mode, and after that the Article page layouts will be discussed.

The with class name .ms-bodyareacell is the overall container for the content. Inside this is a table with class .ms-propertysheet, and a td.ms-bodyareaframe inside that there is another table. These are the containers for the content on a page and are being defined in the page layout. Inside the .ms-bodyareaframe are a few nested tables and one of these tables is the table of a web part.

Web part ID’s

If a web part is placed inside a web part zone, it will get an ID. Depending on the amount of already placed web parts on that page, and the order in which they are placed, the ID will get its tracking number. It does not change when you change the order of the web part zones. So therefore, the ID of the web part actually isn’t unique, it is just unique for that page.

The web part in this example is the third web part of the page and as you can see, it carries number 3 in the ID. The search interface in the header is always the first web part of the page. In this case there were two web parts placed on the page, which together with the search makes three: the ID number of the last placed web part. If you want to style the web part in its entirety, you can only list all the web part ID’s and add styling to them. This nasty solution is the only solution to styling every web part on itself. A better solution would be for example to style the elements inside the web parts, such as the .ms-WPBody.

..
#MSOZoneCell_WebPartWPQ27,
#MSOZoneCell_WebPartWPQ28,
#MSOZoneCell_WebPartWPQ29,
#MSOZoneCell_WebPartWPQ30{
     Border:1px #f2f2f2 solid;
}

Because every web part has a and inside that a table as a container, it is possible to style the background of the web part with two background images, but it is very tricky an I advice you not to do so. Make sure every with ID #MSOZoneCell_WebPartWPQ2 (a web part ID of your choice) has a background image. Then style every table inside the with those ID’s with another background image. Secondly, hide every background image on every second or more nested table inside the with the web part ID.

Here’s an example of how, just for web part ID 3:

#MSOZoneCell_WebPartWPQ3{
     Background:transparent url(images/webparttop.jpg) repeat-x left top;
}
#MSOZoneCell_WebPartWPQ3 table{
     Background:transparent url(images/webpartbottom.jpg) repeat-x left top;
}
#MSOZoneCell_WebPartWPQ3 table table{
     Background:transparent none;
}

Which means “only apply if table is the first element inside #MSOZoneCell_WebPartWPQ3“, because it is not supported in Internet Explorer 6 and older versions.

Unfortunately you cannot use

#MSOZoneCell_WebPartWPQ3 > table {
     ..
}

Make sure the images you use are repeatable on the x-axis. If they are not, you will need to make a new page layout where the web part zones have a static width (set in the style sheet of course). This way you can control the width of the web parts in a particular web part zone, and make your background images as wide as the web parts.

Web part headers

Inside the with the web part ID is always a table with two ’s. The first one is for the header of the web part, the second one is for the content of the web part.

The first class you can use to style the header is the tr.ms-WPHeader. This has two ’s, one for the title of the header, and another one for the little arrow on the right pointing down. Only the first has an ID, which has the same ID-number as the web part-ID. To style the background and the borders of the header, you can style every inside the .ms-WPHeader.

.ms-WPHeader td {
     border-bottom:1px solid #4E7CB7;
}

To style the text of the header, style the .ms-WPTitle. Be aware that some web part titles contain a hyperlink. The little arrow is also a link, and to style that you can style the -tag inside the , and then overrule the styling for the header text. Like this:

/*This styles every link in the header*/
.ms-WPHeader td a{
	background-color:#000000;
}

/*This styles every textual link in the header*/
.ms-WPHeader .ms-WPTitle,
.ms-WPHeader .ms-WPTitle a:link,
.ms-WPHeader .ms-WPTitle a:visited{
	color:#4F3B2F;
}

It is possible to hide the header by changing the settings of the web part. Choose “appearance” and in the “chrome type” drop down and choose “none”. The with the header will not be rendered then.

Content Editor Web parts

The of the second of the #MSOZoneCell_WebPartWPQ contains a

with a web part ID that has the ID number related to the amount of web parts on the page, like #WebPartWPQ3. It also has a class called .ms-WPBody. The core.css uses this class to set the font family and size.

When using a Content Editor Web part, text is placed directly in the .ms-WPBody. The color of the text is set by the styling in the core.css, on the .ms-propertysheet and the body tag. The same goes for the hyper links in the text.

Lists

In a list web part, there is a table.ms-summarycustombody class, in where all the links are positioned. Every has a class.

Depending on what list with hyper links you use, the ’s will have one of the following class:

.ms-vh,
.ms-vh2,
.ms-vh-icon,
.ms-vh-icon-empty,
.ms-vhImage,
.ms-gb,
.ms-gb2,
.ms-gbload,
.ms-vb,
.ms-vb2,
.ms-vb-tall,
.ms-GRFont,
.ms-vb-user,
table.ms-disc td,
.ms-vh2-nofilter,
.ms-vh2-nograd,
.ms-vh3-nograd,
.ms-vh2-nograd-icon,
.ms-vh2-nofilter-icon,
.ms-pb,
.ms-pb-selected,
.ms-ph {
     font-family:tahoma,sans-serif;
     font-size:8pt;
}

The first two of this list are for example also used for list headers. Most graphical designs will have the same styling for all hyper links on the portal, so you can add your styling to the above classes and their -tags. The “add new” (add new announcement, add new event, add new link, etc. ) hyper links can be styled with their own class, for example: a.ms-addnew. Here’s an example of how you could style the lists.

Data table

SharePoint uses tables and lists to display its data. The Document Center is one of those ‘data tables’. The Document Center uses another page layout, because the purpose of the page is to show a big list with data and no text like articles. Therefore the Document Center has one web part zone that uses the whole width of the page. When styling the web parts, make sure the lists of the Document Center (Documents, Announcements, Tasks) are styled correctly. Pay special attention to the list headers here and make sure the fly outs of the top navigation are positioned above the list headers. If they are, make sure you position the .ms-vh div and .ms-vh2 div statically.

Width

Sharepoint comes with a set of page layouts. These page layouts have middle and right zones, but they do not always have an ID or class name for those zones. If you want to control the width of the web parts in either the middle or the right column, you need to create new ones, based on the existing page layouts. Make sure every web part zone has an ID or class, so you can set the width of those in the style sheet.

Edit mode

In edit mode the styling is usually kept default. Most of the classes and ID’s of the content are different when in edit mode, so the styling of elements inside web parts is rather easy to separate, but the web parts themselves aren’t. When editing a page, some web part zones and web parts will get other class.

System pages like the “site settings”-page and the “all site content”-page only contain the same header elements. The rest of the page has classes that are not used on the front-end. Therefore you can style those pages differently. I advise to only change the colors and fonts and leave the layout and the positioning the way it is by default. This way you won’t corrupt the usability of the system pages.

News articles

When creating a news article, it is possible to choose between several news article layouts; the page layouts. The first page layout for an article page is the “article page with body only”. Other page layouts are the “article page with image on left”, “article page with image on right” and the “article page with summary links”.

Article page with body only

This page contains a page content zone and a roll up image. When publishing the page, all the content will be inside the #MSO_ContentTable. Inside that is the div.pageContent.

Since the div.pageContent is an element of every news article page layout, you cannot set the width of the element. Styling this element will cause other page layouts also to be adjusted.

Article page with image on left

The second page layout is the “Article page with image on left”.

This page layout has the following elements:

Page image
Article date
Byline
Page content
Image caption
Roll up image

Page image

The .bodyareaframe contains two tables and some

’s. The first table has the property float:left. This makes the image positioned to the left of the text.

Article line and byline

The second table of the .bodyareaframe is the header. It contains two cells, one for the article date (.dateLine) and one for the “byline”.

Page content

The div.pageContent contains a div#ctl00_PlaceHolderMain_Content__ControlWrapper_RichHtmlField, which contains the text. The ID is not unique for this piece of page content, it is only unique on this page.

Other page layouts use the same ID, so by styling this element, the text looks the same, no matter what article page layout is chosen.

Article page with image on right

The “article page with image on right” has got the same fields and controls as the “Article page with image on left”. The only difference is the floating. Where in the “Article page with image on left” the table was floating left, here the table has no floating, but a

around it has a right floating. There’s an extra container div, the .articleLayout that was not in the “Article page with image on left”.

Article page with summary links

The “Article page with summary links” has, instead of the page image and image caption, a Summary Links control. These links are positioned inside a table that is floated to the right.

Next time in “SharePoint’s Branding Limitations”

Next time in part four of “the Art of SharePoint, how to make a graphical design work for SharePoint”, I will discuss some design decisions for search pages and the My Site. Other points of interest are the styling of the calendar and date picker and the use of SIFR.

SharePoint’s Branding Limitations, Part 2

Diantha van Marion — Wed, 22 Jul 2009 07:27:58 +0000

Introduction

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 ’s and they all contain the class name .ms-globallinks.

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

Every of the meta navigation has the class name .ms-globallinks. Unfortunately you cannot give this class and every 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 -tags. Because this contains a

.ms-SPLink. Every link inside that

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 -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 of these links contains two spans. The first one, which is hidden, contains the fly out. The second span contains a

which contains the -tag. Within the -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 -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 -tag (with an ID) in where the image is, to hide the help icon (by hiding the -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 -tag and make the -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 ’s.

The first is empty.
The second contains the top navigation menu.
The third is empty.
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:


	
	
		
			 .. 
			 .. 
			 .. 
		
	
	
	siteactions menu goes here

The second contains a table, the .ms-topNavContainer, which contains multiple ’s. The first is the home menu item, the menu item of level 0. The rest of the ’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 -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 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 only contains the -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 . 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

, that contains a lot of nested

’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 with the link to the concerning page. When there are sub sub menu items, there are two ’s. The first one contains the -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 ’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:

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

with a and a .

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

with class name .ms-quickLaunchheader. This

has a background image and background color. There’s also font-color defined here, but the text inside this

is always a link. So if you want to style that, it’s more efficient to style the -tag.

Quick Launch menu items

The second part in the quick launch is the

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 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 inside the table has an -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 for every first level menu item, there is also a for a collection of second level menu items. Inside that is another table, the .ms-subNavMenu2 and every sub menu item has it’s own 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 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 . Therefore it is possible to use two background images underneath the text of the -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 -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 -tag. There’s no padding on the -tag, so by removing the image like this, the -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

’s. Only a few of them have ID’s or class names. From the outside to the inside:

Table.ms-siteaction
Td#siteactiontd.ms-siteactionsmenu
Div
Div
Span
Div (on hover it does have a class name: .ms-siteactionsmenuhover)
a

The -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 -tag either. So, where does this arrow come from then? It looks like it’s the -tag’s parent

, 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 -tag, which is called whitearrow.gif. The question I cannot answer is why it is not inside the -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

tag and a 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!

SharePoint’s Branding Limitations, Part 1

Diantha van Marion — Tue, 21 Jul 2009 14:40:38 +0000

Introduction

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

Process description

Communication flows

The communication between the Graphical Designer and the Front-end Developer is all about the graphical design for SharePoint and the ways to implement it. The Graphical Designer discusses the design he wants to make with the Front-end Developer to check if his design ideas are implementable on a SharePoint environment. After the Graphical Designer has a first version of the graphical design, the Front-end Developer determines if it can be implemented in the available time. If the actual costs are higher than the estimated costs, the Graphical Designer and the Front-end Developer could look for another elaboration of the customers idea, one that is easier to implement, and more predictable.

The communication between the Graphical Designer and the Front-end Developer will continue like this until the graphical design is approved by the customer and the implementation can start. The communication between the Graphical DesignerGraphical Designer has in mind for its design. Decisions concerning the colors, fonts, margins, menu’s and links are transferred by a style guide. However, if there’s a lack of time frequently the style guide isn’t fully developed, so the Graphical Designer needs to explain the Front-end Developer about the styling guides. Disadvantage of this is that the Front-end Developer co and the Front-end Developer will change and will all be about the transfer of knowledge about what can be implemented and what can’t. It is important that the Front-end Developer knows exactly what the uld forget information or interpret it differently than the Graphical Designer has in mind, and the Front-end Developer cannot check it in the style guide. Therefore, be sure that there is always a style guide that is as extended as possible.

What can happen after the graphical design is implemented is that the customer decides to change a component in the graphical design. Depending on the change, the Graphical Designer must be consulted again, or the Front-end Developer can modify it, in consultation with the Graphical Designer. The ideal situation is to adapt the style guide too.

The style guide is made by the Graphical Designer. Since he has made the design and knows exactly how the design should look like and elements graphically should behave. Beside the style guide the Front-end Developer also needs the design files of the Graphical Designer to be able to implement the Graphical Designer, for example the PSD files.

Image of default homepage

Knowledge transfer

The graphical design is based on the requirements of the customer and its company, depending on the browsers to use and its users, and of course the estimated capacity and the creative ideas of the Graphical Designer. Graphical Designers which design for MOSS must have knowledge of SharePoint. Most Graphical Designer’s will catch the default (blue) graphical design of a MOSS portal as a basis for the graphical design. They can take the default or frequently used elements of MOSS and use them for their graphical design. They keep the location of the elements approximately the same to what they see on the default portal, their example. This is the most common way to start a graphical design for MOSS.

The Graphical Designer also needs to have some knowledge about how the designed elements of the graphical design will be implemented. He needs to know how the Front-end Developer will implement a graphical design. Because the Graphical Designer does not know of every table, div and so, it is important that the Front-end Developer informs the Graphical Designer about the possibilities of implementation, however the Front-end Developer does need to have this knowledge of course. Even if the Graphical Designer used a default MOSS portal for making the graphical design, it is possible that there are elements in the graphical design that cannot be implemented on a default MOSS portal, because the default HTML won’t let you. That’s why it is very important to communicate a lot and involve the Front-end Developer at an early stage of the graphic design.

Design decisions

In this part I will evaluate some design decisions. I will comment on a number of standard components of a SharePoint publishing portal and indicate per component how the element’ HTML has been rendered and the possibilities for implementing a design on that HTML.

Scaling pages

The Graphical Designer needs to know how the page will behave if the visitor of the portal gives another format to the browser window. In case of a portal the Graphical Designer will generally recommend to use the complete width of the browser window, because portals are all about displaying lots of information. It is desirable to be able to use the full width to place as much information on the page as needed/possible, and make it liquid. This is default by MOSS, when widening the browser window, the middle column will become wider and more space for content will be available. The left column with the menu will keep its width, just like the right column.

However it is possible that the customer chooses to let the scaling behave differently. For example by dividing the available space to the left and right column. In this case the fixed width of the right column is put on a certain percentage in the style sheet instead of a fixed number of pixels, mostly 20 or 30%. The middle column should also get a width in a certain percentage. For making another partitioning it is desirable to make a custom page layout.

Example of page with variable width

Header

The area positioning on a page consists out of several rows. First there is the header, then a content area and then the footer. All visual elements of SharePoint are in one of those zones. The elements of the edit console are underneath the header, they will be discussed later.

The header itself is also built out of rows, with in every row a few SharePoint elements. In the header every row has a class name or unique ID name. The header is built with tables, and nested tables, who together are responsible for the area positioning.

Global breadcrumb

The global breadcrumb, which is the first row of the header, contains two tables, each with its own class name. This aligns the text to the left and the meta menu to the right. Therefore the global links on the left side and the global links on the right side can be styled and positioned differently.

Global breadcrumb

The menu items of the meta menu can be styled separately. However, frequently it is desirable to style all meta menu items the same. The styling can be done by using the class name of the common parent element. This way the styling isn’t influenced by any nested tables or divs that may be in the menu table.

Customized metamenu

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

The icon that is used for the help function can be styled too. Just keep the width and height of the new image the same as the original, so that a replacement can be done easily. Always keep a copy of the original image, for back-up.

Global title area

The global title area is the second row of the header. It contains a table with three cells, the global title area image, the site title and the search function.

Global title area

The global title area image can be used to display the logo, because this element has a link with a reference to home. Therefore it is important to hide the image, stretch the a-tag to the dimensions of the logo and make the logo disappear as the background image of the -tag. Then, the text of the -tag will be placed outside the view of the browser with a negative indent. This way the logo will still have a textual link for users that use screen readers.

Global Title Area Image

.ms-globalTitleArea {
    background:blue url(/_layouts/images/logo.gif) no-repeat left top;
}

 .ms-globalTitleArea #GlobalTitleAreaImage img{
    visibility:hidden;
}

.ms-sitetitle h1 a{
    display:block;
    height:30px;
    width:100px;
    text-indent:-2000px;
}

The last cell with the search functionality doesn’t have a class name or ID. To style the search function you’ll need to dig deeper into the HTML-structure. It is possible to style the search function in the header differently than the other search functions that could appear on the portal, even if they are built the same way. That’s why you’ll need to find a unique class name combination or unique ID name or a combination of both. It is possible to style the search function in the header differently, but the other search functions, in the content zone will be styled the same, since they have the same structure. Do not style the search engine absolute, since the search engine needs to come down in the content zone when searching advanced.

#SRSB{
	position:relative;
	top:100px;
}

The icon that is used to start the search request can also be styled. Keep the width and height of the new image the same as the original, so that a replacement can be done easily. Always keep a copy of the original image, for back-up. The easiest way to style the icon is to replace the default one on the file server. A result of this is that all search icons will change, through the whole portal. As mentioned above, it is possible to style the search icon in the header differently, but the other search icons will be styled the same, since they have the same structure.

Customized search engine

Banner Container

The third row from above is the banner container or oneidtopnavbar container. In here is the banner frame wherein there is a section for the top navigation menu, the banner and the site actions menu.

Top navigation menu

The top navigation menu is built out of a table, whereof the first cell contains the first menu item and the second cell contains a set of other menu items. In each of these cells is a table with a class name that marks it as topnav and if selected, it marks it also as selected. In the first cell of this table is the a-tag, the link. If the menu item contains any child elements, there is a second cell in this table to place the little arrow pointing down. This arrow is an indicator for any child menu items available, the fly outs.

The ’s of this table do not have a unique class name combination or ID. This means the of the text link cannot be styled differently than the of the arrow. This could lead to difficulties when implementing background images on the menu items. A background image cannot be placed on the , because this will cause it to disappear twice. Once for the text link and once for the arrow td. The image must be placed as a background image on the table. This means the image will be visible underneath the text link all the way to the arrow on the right. So there can only be one background image on a menu item. It isn’t possible to use two images, like when the left side of the menu item has a different ending as the right side of the menu item, when the image isn’t repeatable on the x axis. It isn’t possible to make two images out of one, so make it a background image of the table. It is always unsure how wide the menu item will be, and so how wide the background image must be. The arrow is rendered by the code, so you cannot style the arrow or replace it with an image, though.

It is possible to give the first menu item a different styling then the others, because this menu item is considered as the top level menu item and is rendered a bit different then the other menu items. For this menu item also counts that you do not know how wide the menu item will be, so be cautious about it when making the graphical design.

If you need to use background images on the top navigation menu, use images that are repeatable on the x axis and have the same pattern at the outer left pixels and at the outer right pixels. This of course also counts for the hover states and active states of the menu items.

Next thing to style are the fly outs. These child menu items are inside a table, and there is one table, and for every child menu item. Only the table has a class name, so all the ’s, that is all the child menu items will have the same styling. The menu item that has a mouse hover can be styled differently though. For the fly outs there is the same rule, you do not know how wide the content inside it will become. Use that information wisely when making the graphical design. You can use these class names to style the fly outs:

.ms-topNavFlyOutsContainer{}
.ms-topNavFlyOuts{}
.ms-topNavFlyOuts a{}
.ms-topNavFlyOutsHover{}
.ms-topNavFlyOutsHover a{}
.zz1_TopNavigationMenu_8 {}

Banner

The banner is empty, and does not contain anything. Therefore, it will not be discussed here.

Site actions menu

The cell that contains the site action button has a table with a class name for its own. Inside that, there is one cell wherein there are different kinds of nested

’s. The a-tag inside does not have a class name or ID, just like the nested

’s. But it could be referenced using this declaration:

Default siteactions button

.ms-siteactionsmenu div div div a {...}

The site action button usually isn’t restyled, but only made blank, by removing its colors and background image. Most of the time it is repositioned by giving the table a relative or absolute position. This button is only visible for users with editor rights, so only a select group of users will see the site actions button.

Customized site actions button

.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 fly out of the site actions button is a default SharePoint fly out, and usually isn’t styled. This fly out is reused throughout the whole portal, so styling it could give some unwanted results. In the next part, I’ll tell more about the menu’s and fly outs.

Web part zones

Underneath the header is the content part. In here are the left menu and the content container. The number of web part zones in the content container depends on which page layout is chosen when creating the page. Most of the page layouts contain two columns, a wide one in the middle and a smaller one on the right. Other page layouts do not contain a left or right column, just one big zone for the content.

Page layout

The partitioning of the web part zones depends on the page layout that is chosen. There are a few default page layouts in SharePoint, but these can easily be made custom.

Not all the default page layouts have got a left and right separation; some page layouts use the whole width to show the content. The page layouts that do have a partitioning, not always do have a class name or ID on the that separates the zones. The page is then partitioned by a table with two or more columns, were for example the first cell has a hard coded width of 70% and the second cell a hard coded width of 30%. If the cells do not contain a class name or ID, you cannot overrule the width and it makes it impossible to style them separately or give them another width.

Example of page layout with variable widths

Since these class names and ID’s are the hand dishes for the styling, it makes it difficult to style a particular column or web part zone. Not only the width but also the other styling like headers, links and content could need to be styled differently, dependent on which column or zone they are in. Creating a custom page layout has the advantage that you can style the columns or web part zones differently.

Web part zone

Except the fact that a columns separation can be made easily when creating custom page layouts, web part zones can be added if wished. It is possible to provide every web part zone width a class name or ID, which means that the web parts can be styled differently depending on the web part zone they are in. If web parts are dragged to another web part zone, they will adjust to the styling of that particular web part zone.

Two column page with two web part zones in the right zone

This cannot be done with SharePoint’s default page layouts. So if there’s no budget for creating page layouts, the Graphical Designer should take notice of that and style all the web parts the same. By default there’s no way to separate styling for particular web parts or web parts in particular columns.

Two column page with one web part zone in the right zone

Footer

The content container contains the columns with web part zones and the menu and is as wide as the whole page. Underneath this container is the footer. By default, SharePoint does not have a real footer. Actually there are a few table cells, which make the optical margin, just like the left and right margin of the page. These cells can be used to create a footer.

Position of the footer

The lower down cells of the page, the footer, always are down under on the page. Even if the page does not contain a lot of content and the content does not fill the page, the footer is always at the bottom of the page, against your browser window. It speaks for itself that the footer is also on the bottom of the page when there is a lot of content and the used needs to scroll.

The footer sticks to the browser

The footer is built like this:

Page Bottom Margin Left

Page Bottom margin

Body Area Page Margin

Page Bottom Margin Right

When you remove the background color and image of these cells, you’ll keep an empty space, which is a nice margin for the bottom of the page. It is also possible to use these cells for a footer image.

Example of footer with rounded corners

Since every cell has its own class name, it is possible to make a colored bar for example with small rounded corners. Such a footer can be placed underneath the menu and content, or just underneath the content. The width of the image depends on the cells you use to display the image in, as a background image. The height of the footer is also adjustable. To place text in the footer, the master page must be edited. Making the master page custom allows you to make the custom footer instead of using the default margin cells at the bottom of the page.

Next time in “SharePoint’s Branding Limitations”

Part two of this article will contain information about the menus. The meta menu and the top navigation with fly outs in the header and the quick launch menu and site actions menu. What are the possibilities for styling this menu’s? And how is it implemented? Stay tuned!

This post is from the SharePoint Magazine Partner Spotlight Week, where our featued partner is Tam Tam