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.

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 <td> with class name .ms-bodyareacell is the overall container for the content. Inside this <td> 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 <td> 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 <td> with ID #MSOZoneCell_WebPartWPQ2 (a web part ID of your choice) has a background image. Then style every table inside the <td> with those ID’s with another background image. Secondly, hide every background image on every second or more nested table inside the <td> 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 <td> with the web part ID is always a table with two <tr>’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 <tr> has two <td>’s, one for the title of the header, and another one for the little arrow on the right pointing down. Only the first <td> 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 <td> 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 <a>-tag inside the <td>, 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 <tr> with the header will not be rendered then.

Content Editor Web parts

The <td> of the second <tr> of the #MSOZoneCell_WebPartWPQ contains a <div> 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 <td> has a class.

Depending on what list with hyper links you use, the <td>’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 <a>-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.
wp-setwidth

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 <div>’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 <div> 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.

Series Navigation