It is easy to create a new portal site, but most organizations want to customize its look and feel; this is sometimes referred to as branding. Some of this customization is very easy to do, whereas other modifications require extensive knowledge of HyperText Markup Language (HTML) and general web design expertise. This chapter gives you the basic information needed to change the design of the portal.
Chapter 13 teaches you more about how to use MS SharePoint Designer 2007 for customizing both portal and team sites. Look at Figure 12-1 to see how the default portal intranet site looks when based on the Collaboration Portal site template.
Figure 12-1
Before you can modify any part of SharePoint, you must have the proper permissions, which means being a SharePoint Administrator or a member of the Web Designer site group. In Chapter 3, you learned how to add users to SharePoint groups in WSS. In MOSS you use the same technique, which is described in the "Managing Access to the Portal Site" section in Chapter 5.
The easiest parts to customize in a portal are things like the logotype, the portal name, and the description. You can do this with a web browser on any computer, as long as you have the proper permission. You need to be a SharePoint administrator or a member of the Web Designer site group to perform modifications of this type. The following table explains the things you can easily customize.
It is the logo file that most organizations want to replace. As previously described, you should avoid very large pictures, because they will reduce the available area for the rest of the page. It is okay to use animated GIF pictures, but you should really make sure that they look good, not only fun the first time one sees it.
Object | Displayed | Comment |
---|---|---|
Portal site name | At the top of every web page and the Site Settings administration page on the portal site. | Limited to 80 Unicode characters such as a, b, c and å, ö, ü, except for these: \ / : * ? " < > |. |
Portal site description | Not displayed. | Only visible to users who are allowed to use the Site Settings page. Limited to 200 Unicode characters. |
Logo file | At the top of every web page on the portal site. | By default: titlegraphic.gif File formats: GIF, BMP, JPEG, and PNG (TIFF is not supported). The default logo type is 225w x 26h pixels with a 96 dpi resolution. Use any reasonable size; the banner will adjust itself, but avoid pictures more than 50 pixels in height, because this will make the banner too dominant on the page. |
Logo Description: This is the Logo alternative (alt) text. | ALT text is displayed when you hover the mouse over this logotype. | Enter the text in the Logo Description; the system will then use this as the ALT. |
Important | You can find lots of free animated GIF images on the Internet. Use your favorite search engine and look for "animated GIF." |
To modify any of these three properties, follow the steps in the Try It Out below.
Try It Out Modify the Portal Site Properties
Log on as a web designer or administrator to any computer with access to the intranet site.
Open the Home page for the intranet; for example, http://srv1.
Click Site Actions Site Settings Modify All Site Settings, and then click Title, description and icon in the Look and Feel section.
On the next page, you can see the Title and Description, and the Logo URL and Description. Change them according to your needs.
Important | The default URL is /_layouts/images/titlegraphics.gif; this points to the folder: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\Template\images. You can add your own logo files there. If you have more than one SharePoint 2007 server running the web service, make sure that all of them have a local copy of the logo file. |
Click OK to save and close the page. Any changes to the portal name or logo will become effective immediately.
Note that the default path to the logo file is /_layouts/images. This is a virtual IIS directory that in turn points to a physical file location on the MOSS server. To see where it points to, follow the steps in the Try It Out below.
Try It Out View the Virtual Directory Folder Location
Log on to the MOSS server as an administrator.
Open the Internet Information Service Manager.
Expand the node Web Sites/Default Web Site/_layouts (if your MOSS portal site is using another virtual IIS web server, make sure to use that virtual server instead of the Default Web Site).
Right-click the "images" virtual directory, and select Properties.
On the Virtual Directory tab, look at the Local path. It will point to this file location: <disk>:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\template\images.
Change nothing. Click Cancel to close the dialog box.
If you want to replace the default logo with your own logo file, Microsoft recommends that you create a new subfolder under the images folder. For example, assume that you want to use the custom logo file My_Logo.gif. Create the new subfolder Custom and put the My_Logo.gif there. Then set the Location of the logo file to /_layouts/images/custom/My_Logo.gif.
Important | If you want to revert to the default logo file, simply clear the logo URL field; SharePoint will then show the default logo. (However, this will not restore the text on the icon field.) |
The folder path you found in step 5 is part of a large folder structure used by MOSS for storing all files that describe how the portal site looks and behaves. It also contains the files for the WSS team sites. Note that all other content, such as documents, files, and other information that users create inside SharePoint, is not stored there. It is all stored in a content database in the SQL Server used by SharePoint. Use Windows Explorer and navigate to this path:
<disk>:\Program Files\Common Files\Microsoft Shared\Web Server↩ Extensions\12\template
Important | Microsoft internally calls this file structure the "12-hive," since it is full of nested folders; this is also the starting point of all SharePoint folders and files. |
SharePoint keeps a number of files in these folders, most commonly ASP.NET files (.aspx) and XML files (.xml). These files describe exactly how a given web page will look, including its icons, links, and lists. For example, if you wanted to move the logo on the Home page to the far right instead of its current left position, you would modify the .aspx file for that particular page. Most of these files can be modified with an editor, such as Notepad, but you should think twice before changing them. Some of them can be replaced when you apply the next service pack, and improper modifications may corrupt the portal site. In the following table is an explanation of the most interesting folders under the Template folder for the U.S. English version of SharePoint (1033) and what is inside them. Note that for all site templates listed below the Template ID is also listed; this ID is used when SharePoint code and applications need to refer to a specific site template.
Important | Note that customizing the Master Page used by this site is the preferred way of customizing the logo, as described later in this chapter. The description here is just to help you understand how the files work in this folder structure. |
ID | \Template Folders | Comments |
---|---|---|
0 | \Global | The global template |
1 | \Site Templates\STS | Team Site, Blank Site, Document Workspace |
2 | \Site Templates\MPS | Basic Meeting Workspace, Blank Meeting Workspace, Decision Meeting Workspace, Social Meeting Workspace, Multipage Meeting Workspace |
3 | \Site Templates\CENTRALADMIN | SharePoint Central Administration |
4 | \Site Templates\Wiki | Wiki site |
7 | \Site Templates\BDR | Document Center |
9 | \Site Templates\Blog | Blog site |
20 | \Site Templates\SPS | (Obsolete) The Home page of the SharePoint Portal Server site, including its lists and configuration settings. |
21 | \Site Templates\SPSPERS | My Site |
22 | \Site Templates\SPSMSITE | Personalization Site |
30 | \Site Templates\SPSTOC | (OBSOLETE) - Contents area Template |
31 | \Site Templates\SPSTOPIC | (OBSOLETE) - Topic area template |
32 | \Site Templates\SPSNEWS | (OBSOLETE) - News area template |
33 | \Site Templates\SPSNHOME | (SubWebOnly) - News Home template |
34 | \Site Templates\SPSSITES | Site Directory area template |
36 | \Site Templates\SPSCOMMU | (OBSOLETE) - Community area template |
38 | \Site Templates\SPSREPORTCENTER | Report Center Site |
39 | \Site Templates\PUBLISHING | Publishing and Team Collaboration Site |
40 | \Site Templates\OSRV | Shared Services Administration Site |
50 | \Site Templates\SRCHCEN | Search Center |
51 | \Site Templates\PROFILES | Profiles |
53 | \Site Templates\BLANKINTERNET | Publishing Site, Press Releases Site |
54 | \Site Templates\SPSMSITEHOST | My Site Host |
90 | \Site Templates\SRCHCENTERLITE | Search Center Lite |
14483 | \Site Templates\offile | Records Repository |
\ADMIN | Contains all .aspx files used by SharePoint Central Administration. Avoid modifying these pages. | |
\IMAGES | Contains all icons and images used by SharePoint for its portal site and team sites. Create a sub- folder under Images if you want to add your own pictures. Avoid modifying this folder. | |
\LAYOUTS\1033 | Contains all pages required for standard site administration. Do not modify these files. | |
\LAYOUTS\1033\STYLES | Contains Cascading Style Sheets (CSS) that control how the portal area pages will look. | |
\LAYOUTS\1033\IMAGES | Contains the images used by MOSS and WSS in the administration pages. | |
\SQL | Contains SQL scripts that are used when creating configuration and content databases. Do not change these files. | |
\XML | Contains configuration files. The DOCICON.XML file is used when you need to map icons to new document file types. |
MS Office SharePoint Server 2007 is available in more than 20 different languages. After the installation you cannot change the language of the portal site, but you can install extra language template packs for the team sites (i.e., the WSS part of this SharePoint installation). There are more than 30 different language template packs for WSS, which you can download for free from http://www.microsoft.com, and you can install any number of of these on a WSS or MOSS server. This will make it possible to create WSS sites, such as team sites, with different languages, but again, the MOSS sites will not be affected by these language packs. If you install any of these optional language templates for WSS, you will find corresponding Locale Identifier (LCID) folders in the Template and Layouts folder. For example, if you add the Swedish template pack, it adds the new folder 1053.
The complete LCID table is not so easy to find, but in the following table you will find all the locales currently supported by Microsoft.
LCID | Locale | LCID | Locale |
---|---|---|---|
5121 | Algeria | 6145 | Morocco |
11274 | Argentina | 5129 | New Zealand |
3081 | Australia | 19466 | Nicaragua |
15361 | Bahrain | 1044 | Norway |
16394 | Bolivia | 8193 | Oman |
1046 | Brazil | 1056 | Pakistan |
3084 | Canada1 | 6154 | Panama |
4105 | Canada2 | 15370 | Paraguay |
13322 | Chile | 2052 | Peoples Republic of China |
9226 | Colombia | 10250 | Peru |
5130 | Costa Rica | 1045 | Poland |
1029 | Czech Republic | 16385 | Qatar |
1030 | Denmark | 1049 | Russia |
7178 | Dominican Republic | 1025 | Saudi Arabia |
12298 | Ecuador | 4100 | Sinagapore |
3073 | Egypt | 1051 | Slovakia |
17418 | El Salvador | 1060 | Slovenia |
−2 | European Union1 | 7177 | South Africa |
−1 | European Union2 | 1053 | Sweden |
4106 | Guatemala | 2055 | Switzerland |
18442 | Honduras | 10241 | Syria |
3076 | Hong Kong SAR | 1028 | Taiwan |
1038 | Hungary | 1054 | Thailand |
1081 | India | 7169 | Tunisia |
1065 | Iran | 1055 | Turkey |
2049 | Iraq | 14337 | UAE |
1037 | Israel | 2057 | United Kingdom |
1041 | Japan | 1033 | United States |
11265 | Jordan | 14346 | Uruguay |
1042 | Korea | 8202 | Venezuela |
13313 | Kuwait | 1066 | Vietnam |
12289 | Lebanon | 9217 | Yemen |
4097 | Libya | 8193 | Oman |
2058 | Mexico |
Important | Go to http://www.microsoft.com and search for "Windows SharePoint Services 3.0 Language Template Pack" to download, and then add new language templates for the WSS team sites. |
All the files and folders mentioned in the previous section are the key to understanding how and what to modify when branding a SharePoint web site. So, now start with a common request: modifying the layout of the top navigation menu, and the Quick Launch bar. In SPS 2003 you had to edit the actual .aspx files, used by the different SPS area pages, such as Template\1033\SPS\Default.aspx. The problems with this method were these:
q You needed to understand how these aspx files work. Changing the wrong setting could mean that the portal did not work at all.
q Any changes you did on one area page in SPS, for example the Home page, had to be repeated on all other area pages.
q Applying a service pack or hotfix on the SPS server could overwrite your modifications, then you needed to redo the modifications again.
These problems are now history, since SharePoint 2007 (both WSS and MOSS) use a special layout file, referred to as a Master Page, for controlling how the top navigation, links, logotype, and Quick Launch navigation will look and feel like (see Figure 12-2). These parts of a web page are also sometimes referred to as the chrome.
Figure 12-2
MOSS comes with a number of preconfigured Master Pages, ready to be used in your SharePoint environment. But there are actually two types of Master Pages:
q Site Master Pages: Used by publishing pages (i.e., web sites based on a MOSS site template).
q System Master Pages: Used by all forms, views, and Web Part pages (i.e., sites based on WSS site templates).
In other words, before you can change the master page for a web site, you must know if this is a WSS site or a MOSS site. If you pick the wrong master page type, nothing will change.
Important | Administrative pages in SharePoint, such as Site Settings, will not be affected by the Master Pages. |
The table below shows you the default Master Pages you get in a MOSS 2007 environment; note that the same Master Page file can be used as both a Site Master Page, and a System Master Page. For example, if you want to apply the BlueTabs.master file on both MOSS sites and WSS site, then set both the Site Master Page and System Master Page to BlueTabs.master.
Master Page | Comments |
---|---|
Default.master | The default master page you get in a newly created SharePoint environment. |
BlueBand.master | Provides a top navigation band and a vertical navigation section, and presents them with a blue color scheme. |
BlackBand.master | Same layout as BlueBand.master but with a black color scheme. |
BlueGlassBand | Same layout as BlueBand.master but with a blue glass color scheme. |
BlueVertical.master | Provides top navigation by using tabs and a vertical navigation section, and presents them by using a blue color scheme. |
BlackVertical.master | Same as BlueVertical.master but with a black color scheme. |
BlueTabs.master | Provides top navigation by using tabs and a vertical navigation section, and presents them with a blue color scheme. |
OrangeSingleLevel.master | Provides a top navigation bar that shows a single level of navigation and a vertical navigation section that does not include flyouts, and presents them with an orange color scheme. |
BlackSingleLevel.master | Same as OrangeSingleLevel.master but with a black color scheme. |
Let's try an example: Your boss comes to you and says that the structure of your MOSS environment is good, but he demands a new look and feel. After showing the boss the different master pages listed above, you decide that you will apply the BlueTabs.master to both MOSS and WSS sites. Below are the steps to do this.
Try It Out Apply a Different Master Page
Log on as the administrator to the existing MOSS site http://srv1.
Click Site Actions Site Settings Modify All Site Settings.
Click Master page in the Look and Feel section.
A new page opens where you set the Site Master Page and the System Master Page (see Figure 12-3).
Figure 12-3
Change the Site Master Page to BlueTabs.master. Then change the System Master Page to the same Master Page.
Click OK to save and close the page.
Open the top site. It will now have a new look and feel (see Figure 12-4, and compare it with Figure 12-1). Then open a WSS site; it will have the same look and feel.
Figure 12-4
Using SharePoint Designer 2007, you can design new master pages. You will learn more about this in Chapter 13.
The look of a web page, including its color, fonts, and font size, can be set directly in the code. But this would make a complex web application very hard to adjust. For example, if you wanted to change all text that uses Times New Roman to Arial on all web pages, this would require you to manually edit every web page. A much smarter way is to use labels for each part of the web page, like the header, text block, and tables, then define what colors, fonts, and size are to be used for each part in a separate file. This is called a style sheet. If you later want to change the header from blue to green, you identify the label for the header and change its color settings in the style sheet.
SharePoint is indeed a complex web application with lots of pages, and it uses style sheets to control the appearance of these pages. SharePoint actually uses several style sheets, which are read one after another, and the settings in the last style sheet have precedence over any other setting for the same object. This is called a Cascading Style Sheet, or CSS. Every Master Page has multiple CSS files associated with it, to control its appearance. Below is a list with some of the more common CSS files used by MOSS:
q Core.css
q Controls.css
q PageLayouts.css
q rca.css
q Band.css
q Vertical.css
q Tabs.css
Most CSS files for simple web applications are rather short, but not SharePoint's CSS files. Some of them may contain more than 1,000 lines of definitions, and it is hard to understand exactly what each line does without some help. If you want to change just parts of the web page, you can add your own custom CSS files or you can change the original CSS files. Note that if you apply a new service pack or a hotfix for SharePoint, it may overwrite these standard CSS files, so it is safer to add your own custom CSS file.
Important | Shane Perran, a SharePoint MVP, has created a nice simple example of what you can do with a custom CSS file; you will use his demo in the following example. Read more on his blog: http://www.graphicalwonder.com/?p=642. |
Try It Out Add a Page Curl
In this example, you create a custom CSS file that will add a page curl to the top-left corner of every web page. You will start with an empty CSS file with the name Pagecurl.CSS and add the code to it that will display an image file named Pagecurl.gif. Both of these two files will be stored in a new document library named Custom-CSS that you will create in the subsite http://srv1/SiteDirectory. Finally, you will configure the Alternate CSS URL setting to show this custom CSS file. This file will override the default CSS settings. Follow these steps:
Log on as a SharePoint administrator, and open the site http://srv1/SiteDirectory.
Click Site Actions View All Site Content Create Document Library. Then enter these settings:
Name: Custom-CSS.
Display this document library on the Quick Launch? No.
Click Create. You now have a place to store the two files you need for this example.
Open Notepad (or your favorite editor, including SharePoint Designer) and create a file with this content:
/* Add a Page Curl to each SharePoint Page */ .ms-bodyareacell { background-image:url("http://srv1/SiteDirectory/custom-css/Pagecurl.gif"); background-repeat:no-repeat; background-position:top left; /* padding should be a few pixels more than the Pagecurl image height */ padding:30px; }
Save the file as pagecurl.css in the Custom-CSS document library you created in step 2 above. For example, you can save this file to the file system and then use the Upload button on the document library page.
You need to upload the Pagecurl.gif file that the CSS file refers to: Get a copy of that file from this URL: http://www.graphicalwonder.com/pagecurl.gif and store it in the Custom-CSS document library. This library now contains both the CSS file and the GIF file for this example.
Time to apply your custom CSS file. Go to the site where you want to apply this CSS file, for example: http://srv1/sitedirectory.
Click Site Actions Site Settings Modify All Site Settings. Click Master Pages in the Look and Feel section.
At the bottom of the following form, select the option: Specify a CSS file to be used by this publishing site and all sites that inherit from it. Then enter the URL /SiteDirectory/ Custom-CSS/Pagecurl.css; click OK. Look at Figure 12-5 (before) and Figure 12-6 (after) to see the difference.
Figure 12-5
Figure 12-6
You can also add a background color to this part of the page; simply add the command Background-color anywhere within the curly brackets. The complete code then looks like this:
/* Add a Page Curl to each SharePoint Page */ .ms-bodyareacell { background-image:url("http://srv1/SiteDirectory/custom-css/Pagecurl.gif"); background-repeat:no-repeat; background-position:top left; /* padding should be a few pixels more than the Pagecurl image height */ padding:30px; /* Set the background color for the .ms-bodyareacell to Green */ background-color:green; }
How do you know how to define the color green? And what if you want to use another color? The answer to that is to learn how to define colors using the standard Cascading Style Sheets Level 2 (CSS2) color codes. You can learn a lot more about this in any HTML development book, but you get a quick summary in the following table, which shows the ways to define a standard green color. Use whatever method you want; the point is that you have a number of options for defining a specific color, and some of them give you much more control over the exact color tone, if this is needed. For example, change the background color from "green" to "#ebf3ff" and the frame will be blue like the top row with the global breadcrumb link.
Method | Example | Explanation |
---|---|---|
HTML 4.0 color names | Green | Use the HTML 4.0 standard names, like Black, Red, Green, Olive, Yellow, and so on. |
RGB 3 digits | #080 | The first character is Red, the next is Green, and the next is Blue, with hexadecimal values between 0 and F. |
RGB 6 digits | #008000 | The first two characters are Red, the next two are Green, and the last two are Blue, with hexadecimal values between 00 and FF. |
RGB Triples | rgb(0,128,0) | The first number is Red, the next is Green, and the last is Blue, with decimal values between 0 and 255. |
RGB Triples | rgb(0%,50%,0%) | Same as above, but with values between 0 and 100%. |
Important | You will find more information about color setting on this site: http://www.w3.org/TR/REC-html40/types.html#idx-color. |
The need for creating CSS files in SharePoint 2007 is not as great as in SharePoint 2003. Now, you do most of the customization by modifying a Master Page file, as you will learn in Chapter 13.