As we mentioned in our first post, Branding our jQuery© Panel Web Part - Part 1, the web part supports branding and styling to match the styles used on your own SharePoint sites. While Part 1 details the additional HTML markup that is added to a web part to create the collapsible panel effect and animations, this post will concentrate on the classes available to those that may want to create their own "themes" for the web part. If you have not yet read Branding our jQuery© Panel Web Part - Part 1, I suggest you do so before continuing.

 

Themes or styles are set using the Style Sheet Prefix field in the web part's Animations & Styles ToolPart. By default the Style Sheet Prefix field is populated with the value bwt...which is the default theme included with the web part. The bwt theme is based on styles used in the Default Theme Site theme supplied with Windows SharePoint Services 3.0. All themes are located in the SharePoint 12 hive folder under TEMPLATE\LAYOUTS\bWareTech.Panel. A theme is contained within a single style sheet prefixed with a unique Id of 1 to 3 characters. As an example the default theme style sheet is named bwt.panel.css. The web part includes 4 other theme examples named cs1.panel.css, cs2.panel.css, cs3.panel.css, and cs4.panel.css. You may apply any of these sample themes by modifying the Style Sheet Prefix field in the Animations & Styles ToolPart with one of the other prefixes. Entering cs1 in the Style Sheet Prefix field will load the cs1.panel.css style sheet and apply the prefix cs1 the the class definitions when the web part renders. Since the web part only supports one theme selection at a time, you may place multiple instances of the web part on the same web part page to support multiple themes.

 

Each theme consists of 9 style definitions. The default theme bwt can be seen in Figure 1. The style definitions bwt-panel-wrapper and bwt-panel-body-wrapper are only used when the web part options Wrap Panel in Additional DIV Tag and Wrap Body in Additional DIV Tag have been enabled, respectively.

 

  Figure 1: Example of the 9 style definitions used in a single theme.

 

The following few images detail where the class definitions are used in the HTML markup. Please note that the text "" will be replaced with the selected theme prefix when the web part is rendered.

 

  Figure 2: Classes defined for the Table Header used as the web part Title.

  Figure 3: Classes defined for the Table Header and DIV Wrapper. See Part 1 for additional details.

 

 

  Figure 4: Class definition used when the option Wrap Body in Additional DIV Tag is enabled.

 

  Figure 5: Class definition used when the option Wrap Panel in Additional DIV Tag is enabled.

To create your own custom theme, simply copy one of the existing themes to a new file with a unique prefix, such as aaa.panel.css. Update the option field Style Sheet Prefix in the Animations & Styles ToolPart with the your new theme prefix...like aaa. Now modify the style definitions in your new theme as necessary to style the web part to its environment.

If you need additional help with branding this web part please post your questions in our Community Forums and we will be glad to assist you.


Technorati Tags: SharePoint,WSS 3.0,MOSS 2007,WebPart,Web Part,jQuery

Your Name:
Email Address:
	(Optional) Email used only to show Gravatar.
Your Website:
Comment:
Security Code Enter the code shown above in the box below
Add Comment  Cancel