Customizing Sharepoint


It's a pain to customize Sharepoint Portal Server's design. There is a lot to be found all around the web, though. I assembled a summary.

I stole this content from several resources across the Internet, and combined bits and pieces that I found interesting to a text. I refer to several resources, but in case I forgot something: I am really sorry.

Portal Server Styles

When planning for corporate environments such as an intranet portal or SharePoint site, you need to consider some of the differences between a Windows SharePoint Services site and a SharePoint Portal Server portal area. An area is a means of publishing and aggregating content using a navigational taxonomy, whereas a SharePoint site facilitates collaboration of team members using collaboration objects and custom lists. Users have unlimited view and editing access to the portal areas; by contrast, SharePoint sites are only available to members.

Within SharePoint, you can edit the way Web Parts are structured on a specific page or area as well as change the logo, specify the theme a team site uses, and even select a CSS style for the portal. All of this can be done right from the portal and team site itself. With either the Administrator or Web Designer role (you can also enable other roles to have this access too) you can use the Edit Page and Design this Page options to edit the site right from the site. In SharePoint and WSS, you will find this action listed below the other Action Items on the left navigational tool bar.

You can also go into the Site Settings menu and change the Site Title and Description, the Site Logo and choose to use a CSS template to change the color scheme and UI of the portal.

You have the same Web Part, Site Title, Logo and other options that allow you to customize the site as in SharePoint Portal Server, but within WSS, you can apply a theme, too. You can apply a theme directly to a team site or workspace.

With FrontPage 2003, you can edit much more than you can with the intrinsic SPS and WSS design UI, but you need to be careful what you edit. Some people deleted the menu bar and completely freaked out. With FrontPage, you can actually change the zones sizes of the page, delete logos, tables and Web Parts. You can also apply a theme directly with FrontPage for WSS sites and workspaces as well.

Style Sheets

The way the SharePoint Portal and WSS Team Sites and Workspaces are presented can be completely changed by creating a custom .CSS file for each environment. SharePoint comes with the standard sps.css and ows.css files. These two files (sps.css - a superset used for the portal only) and (ows.css - the base css, used for for wss and sps) can be edited, preferrably save a copy just in case, to change the color scheme, the way the menus appear, etc. When you edit your CSS files, use this link as your reference.

There are a few more, though:

Style sheet name

Description

SPS.CSS

SharePoint Portal Server styles

OWS.CSS

Windows SharePoint Services styles

MENU.CSS

Styles used to create the drop-down menu

OWSMAC.CSS

Styles used when rendering on the Apple Macintosh

OWSPERS.CSS

My Site styles


By the way, FireFox has a DOM inspector that really makes finding the right styles easy. You could use that, too. So, try viewing the site in Firefox, with the Web Developer extensions involved. You can tell it to display all id's and classes right on the page layout. Or put outlines around table cells. Or a million other things.

The style sheets used by SharePoint Portal Server sites are located on the server in the
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\Layouts\1033\Styles
folder. The two style sheets used by default are the sps.css and ows.css files. In a browser the default location is
http://myserver/_layouts/1033/styles/ows.css

You can create a new style sheet and then associate the pages on the site that you are authorized to edit with it. If the new style sheet includes definitions for formatting choices for the same selectors that are in the server’s style sheets, the new style sheet formats will be used. This is because if multiple style sheets are applied to a site or page, the selectors in the one that is applied last are used. You migh have to cimbine stuff from both ows.css and sps.css, because you can only apply one external css file.

Put the new file in the same folder where ows.css and sps.css are located. To add a reference to your custom style sheet for a site, click Site Settings, and then click Change portal site and SharePoint site creating settings. In Custom Cascading Style Sheet, type the name of your custom style sheet file.

Templates

Let's say that you created a site, customized it by adding lists, events, document libraries, custom Web Parts, and applied a special theme. You want to share this piece of work with other site owners or impose this site template on any subsites. On the Site Settings menu, click Go to Site Administration, and then in the Management and Statistics section, click Save as template. Type a file name using an .stp extension and type a title and description for your site template. You can also select the Include content check box. You save your site as a template in a gallery inside the content database to make it available to other subsites. As long as subsequent subsites are based on the same site definition (for example, on a Document Workspace) and have the identical language of the original site, you can create subsites using this template.

You can select an area template to use when creating an area in SharePoint Portal Server. Area templates are site definitions that also consist of multiple files with a parallel structure to the site definitions in Windows SharePoint Services. They are stored in the following location:
Local_drive:\Program Files\Common Files\Microsoft Shared\Web server extensions\60\template\1033

Area templates are:

Template Maps to
SPS Home
SPSBWEB To create bucket Web sites
SPSCOMMU Communities
SPSMSITE Site Registry
SPSNEWS Subareas under News
SPSNHOME News Home
SPSPERS MySite
SPSTOC Topics Home
SPSTOPIC Topic

To create area templates based on existing definitions:

  1. Copy and paste an area template folder (such as SPSCOMMU) and rename it, for example, SPSMyTemplate.
    Note   The new template name must begin with SPS.
  2. In a text editor such as Notepad, open WEBTEMPSPS.XML located at \\FE_Server_name \c$\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\1033\XML.
  3. Within the <Templates> node, copy and then paste an existing <Template> node. For example:
    <Template Name="SPSNEWS" ID="32"> <Configuration ID="0" Title="News area template" Type="0" Hidden="TRUE" ImageUrl="../images/spshome.gif" Description="Area Template."></Configuration> </Template>
  4. Replace the Name property with the name of the new template folder.
  5. Give the new template a unique ID.
  6. Replace the Title, ImageUrl, and Description properties as appropriate.
  7. Save the file, and then restart IIS.

    The template is now available as a new item in the Template menu on the Create Area form.

If you foresee making substantial changes to templates, make a new template instead of modifying an existing template. This will guarantee you freedom from upgrades and conflict with new SharePoint Portal Server code. Do not put your templates into the same folders as existing templates or call them the same name, because during an upgrade, your code can be overwritten.

For more information use this link. For examples on branding a site by changing a template check out this article.

WSS themes

To change the template of the MySite, change the default.aspx it uses (it's the same for every user). Normally, themes should be applied to SharePoint Portal Server sites by clicking the Apply theme to site option on Settings page of the SharePoint Portal Server site. This can only be done if there are extra themes installed instead of a change of base theme.

To build a custom theme, you should use Frontpage 2003. Any other way would be rather awkward.

You can find a manual at this page.

Identifying styles in themes (MySite/sites) is easy to find here and here.

Don't forget Firefox, too.

An XML template called spthemes.xml contains the theme name, style sheet location, thumbnail, preview, and description of each theme that is available through the browser. You use this XML file to render the theme selection page. You can modify this XML file (by opening it in any text editor, such as Notepad) to include a custom theme on the Apply Theme to Web page. You could also use this to isolate the associated CSS file, grab that file and change it.

A manual is to be found at this page.


You are trying to view the newsticker in a browser that doesn't support it. I am sorry.