Problem: You've been asked to create a graphic design that can be applied to a SharePoint 2007 site - but you've never seen one before. Or, you've seen one but don't have access to the CSS to see how things are set up.

Here are some basic guidelines for creating a graphic design that can easily be applied to out-of-box Microsoft SharePoint 2007 sites. The guidelines apply to designs that will be implemented using SharePoint “themes”, which means that only CSS and graphics can be altered but the HTML on pages cannot. This is by no means an exhaustive list of SharePoint elements - but if you're trying to work on a mock-up of new graphic design, hopefully this will help clarify some of the terminology and limitations you might hear about when discussing the feasibility of implementing the design with a technical team.

Disclaimer: When I say that something "cannot" be done - I don't mean it's impossible, but rather that it's not easily done by modifying a theme file alone. And I won't claim to be a CSS guru either. I have no doubt that people have figured out ways to overcome some of the points below with more crafty CSS than I am capable of.

PAGE WIDTH

• Pages have a fluid width and are designed to occupy 100% of the width and height of the browser window.
• Pages are optimized for a 1024x768 browser resolution.

Tip
If designing with a “grid layout”, commonly used in print design, percentages will have to be used to define the column and gutter widths.

NAVIGATION

Tabs

• Unselected tabs all look the same.
• The selected tab can have a distinct look from unselected tabs.
• You cannot single out a tab and change its style (e.g. adding a “New!” icon or unique colouring that draws attention to it).
• The width of each tab defaults the width of the name of each tab, plus padding of XX pixels on either side of the text.
• The widths of the tabs can be made consistent through styles, but longer tab names should be considered when defining the width.
• The small arrow icon is a graphic, and shows up when a tab has menu items underneath it.

Left Navigation

In Sharepoint terminology, the left navigation bar is referred to as the “Quick Launch” bar. The links in this area are generated dynamically as users add lists and libraries to their Sharepoint site.

• The width of the left navigation area is static and set in pixels. The width is the same on all pages.
• Headings all share the same styles.
• Links under headings all share the same styles.
• The “View All Site Content” link can have its own style.
• The Recycle Bin area can have its own style. 

Breadcrumb

The breadcrumb uses plain text, hyperlinks, and the “>” character to let users know where they are in the site hierarchy.

• Links can be styled.
• Plain text can be styled.
• The “>” character cannot be changed.

Global Links

Global links appear at the top of each page. 

TITLES

Area / Site Title

• The area/site title appears at the top of every page and is a hyperlink which can be styled.
• The height of the white background seen in the screen shots can be modified as required.
• The white background behind the area/site title, logo icon/graphic, and search bar can be styled.
• The position of the title within the white background can be controlled with styles. 

Logo / Icon

The default icon can be replaced with a JPEG, GIF, or PNG file.

• The white background around the logo will increase or decrease in height depending on the size of the replacement graphic.
• The icon can also be hidden and replaced with a background image that contains logos or graphics.

Page Title

The page title is plain text that can be styled.

Page Description

The page description is plain text that can be styled.

• Consider a link colour for the page title, because on some pages the title may be a hyperlink.

WEB PARTS

“Web part” is a SharePoint term that in other platforms means “widget”. A “web part page” could be considered as a dashboard view of various lists consolidated on a single page. The condensed view of each list is referred to as a “web part”. 

Web Part Title Bars

• Web part title bars all use the same styles.
• Sometimes the text is a hyperlink to the full view of a list; other times it’s just plain text.
• The arrow icon on the right side of the title bar cannot be changed. When hovered over a drop-down menu appears.

LIST VIEWS

Toolbar

• The toolbar options change depending on the type of list you are using, but the same styles are used everywhere.
• The “View” option on the right side of the tool bar can have its own unique style.

SEARCH RESULTS

• There may be more than one search scope available, in which case tabs are used to indicate the available options.
• The title of the result is a hyperlink.
• The URL for the result is a hyperlink.
• The paging options are hyperlinks.

CONTENT PAGES

Article Page

• The article title is a mandatory fields and shares the same style as all page titles.
• The article date is an optional field that can be styled.
• The article byline is an optional field that can be styled.
• Content is entered through a rich text editor (RTE). Default styles for RTE text can be modified, and custom styles can be added.