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 <td>’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<td>, 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 <td>’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 <td>’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 <td> 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 <a>-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 <a>-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