Thursday, June 30, 2005

In standard operating mode, I was pulled from both Team Server and BizTalk Server installation into Sharepoint based on some client needs. The work involved making brand customizations to thier Sharepoint Portal site.

I needed to make color and style changes to the portal site. I am not an artist, so my job was really to figure it out so their graphics person can make changes. I repeat that I am not an artist, and I am sure my color choices will be less than perfect.
In any event Sharepoint has a set of templates for various types of sites that it is capable of supporting.

Many files are repeated throughout the sets of templates. Depending on the type of site created, a different base set of template files may be used. All colors, many graphics, and some behaviors in sharepoint are guided by Cascading Style Sheets. For the portal as a whole, you are permitted to define a style sheet which will override styles. I have defined such a style sheet called "custom.css" at

file:////MySharepointServer/c$/Program%20Files/Common%20Files/Microsoft%20Shared/web%20server%20extensions/60/TEMPLATE/LAYOUTS/1033/STYLES

The custom style sheet now references some custom images as well. These images are all contained in the folder:

file:////MySharepointServer/c$/Program%20Files/Common%20Files/Microsoft%20Shared/web%20server%20extensions/60/TEMPLATE/IMAGES/Custom

This sheet affects the portal directly due to a configuration setting found in

Change Portal Site Properties and SharePoint Site Creation Settings under the Site Settings area for the portal.

For sites in the portal, the configuration method provided by the site administration tools is to apply a theme. Why you can't apply a set of style sheets, I don't know. A theme certainly includes style sheets, but oh well. You can create custom themes by adding a folder to

file:////MySharepointServer/c$/Program%20Files/Common%20Files/Microsoft%20Shared/web%20server%20extensions/60/TEMPLATE/THEMES

and then adding the theme information to

file:////MySharepointServer/c$/Program%20Files/Common%20Files/Microsoft%20Shared/web%20server%20extensions/60/TEMPLATE/LAYOUTS/1033/SPTHEMES.XML

This could be a good way to go if your artist wants to take the time, but it didn't utilize the work I had already done on the custom.css, so I went for a more stylesheet based approach.I placed my stylesheet references into the base template files for document workspace related sites at

file:////MySharepointServer/c$/Program%20Files/Common%20Files/Microsoft%20Shared/web%20server%20extensions/60/TEMPLATE/1033/STS

and its subfolders (esp. DWS and Lists).

Any template which has been customized via frontpage, and any additional pages added are not stored on disk, but rather in the database. In order to edit these pages, you have to go through a web folder (add as network place in network neighborhood folder). This methodology can also be useful for finding base templates because the web folder will show you url style locations you can match against where you are browsing. Looking for base templates on disk is difficult if you aren't familiar with the scheme and naming. Please note that making changes to base templates is liable to cause headaches on an upgrade or patch because these files will not be respected and may be overwritten. In order to change the file, copy it out locally, change it, then copy it back to the web folder.

For the site templates I also had to create a subordinate style sheet which I called "customSite.css". This was required because some changes conflicted with the custom.css on the main site. The css inheritance model has ows.css, then sps.css going first on the portal site, then your customizations in custom.css (or whatever you called yours). On the sites, you only have ows.css. If I put the all the customizations required for sites directly into custom.css it behaved badly in the portal. So in sites i added another to inherit below custom.css, and thus override certain portal only custmizations. The inline stylesheet references are:

<link REL="stylesheet" type="text/css" href="/_layouts/1033/styles/custom.css">
<link REL="stylesheet" type="text/css" href="/_layouts/1033/styles/customSite.css">

The accepted practice in the base templates is actually to make the localization code a dynamic number as such:

<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>

This works in the templates, but will not work in the customized files retreived from the database.


The short of it is;

  • If you want to change the images: change them in the custom images folder.
  • If you want to change which image and any color: change the css files.
  • If you run into a file which you would like to add the custom styles: then add the custom stylesheet references to the base template.

There are some excellent resources at the following sites:

http://blog.hishambaz.com/archive/2005/01/29/196.aspx

http://weblogs.asp.net/erobillard/archive/2004/09/24/234060.aspx

http://www.sharepointcustomization.com/resources/whitepapers_d.htm

http://office.microsoft.com/en-us/assistance/HA011608361033.aspx

Submit this story to DotNetKicks

No comments: