
Figure 1: Creating a new look and feel using the CEWP -- This site uses a hidden Content Editor Web Part to change the template's look and feel.
The Content Editor Web Part (CEWP) is a versatile Web Part that installs with Windows SharePoint Services and SharePoint Portal Server 2003. I use the Content Editor Web Part to give a group of clients that I host a choice of colors to choose as a "template". This tip uses the CEWP, a custom style sheet, and a document library to easily modify and maintain the site's look and feel.
Various styles located in common cascading style sheets control much of the look and feel of a portal area or WSS site. In the current version of the Microsoft SharePoint Products and Technologies 2003 SDK, you can find a comprehensive list of styles that SharePoint Portal Server 2003 and Windows SharePoint Services 2.0 use. To modify a site's look and feel, start by using your favorite style sheet editor to create a cascading style sheet that will contain the new style values:
<style>
.ms-navframe{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0274CC', endColorstr='#FFFFFF', gradientType='0')}
</style>
<style>
.ms-navwatermark{ display: none; }
</style>
<style>
.ms-bannerframe{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0274CC', endColorstr='#FFFFFF', gradientType='1')}
</style>
<style>
#onetidPortalConn{ display: none; }
</style>
Save the style sheet as a txt or css file, for example BlueStyleSheet.txt. Upload this to a document library. I recommend you create a special document library in which to store these custom files. Users will need read access to the style sheets, so be sure users have at least read access to the document library.
Now add Content Editor Web Part on the page you wish to modify. Place a link to the new style sheet into the Content Link property of the new Web Part. To avoid displaying the Content Editor Web Part, you can uncheck the "Is Visible" property in the tool pane. This will include the content in the page but not display any visible information such as the Web Part chrome or comments. Figure 1 displays the new look and feel created by the styles referenced by the Content Editor Web Part.
In figure 2, notice that the following areas have changed as a direct result of the style information referenced by the hidden Content Editor Web Part now incorporated in the page:
- The Quick Launch bar and the top banner now has a fade away effect.
- The Quick Launch watermark is gone and the "Up To" link has also been removed.
Creating various style sheets and placing them in the same document library is a quick and easy way to create a new look and feel across your sites.
-- Bob Fox, Lawrenceville, New Jersey
This Advisor Tip was originally published in the May/June 2006 issue of Advisor Guide to Microsoft SharePoint. Subscribers can get more Advisor Tips and how-to advice on succeeding with Microsoft SharePoint technology at MSSharepoint.AdvisorGuide.com.