Apply style sheet (Theme) the public view of personal site and infos on styles sheets

on August 30, 2006

To meet the requirements of my client, I had to create a custom theme for their personal sites. I encountered couple problems and I found some help in the following exerpt of an msdn article:

Customizing the Portal Site
Chapter: Customizing Personal Sites

Customizing Themes, Styles, and Templates
Users can customize the appearance of their personal sites and the individual pages on them by using themes, styles, and templates. Each list or page on a personal site uses cascading style sheets to define its appearance and layout.

From the Site Settings page of the personal site, individual users can apply a theme to the private view of their sites, or save an existing list or site as a template to use when creating new lists or sites on their personal sites. These actions update the appropriate cascading style sheet (.css) files so that changes in styles are applied automatically.

To make changes to the public view of a personal site, or to make changes to the look of pages that are more significant than what is allowed by the existing themes and templates, users with local administrator rights to the portal site server can update the Web Part Pages (.aspx files) and .css files directly using a Web page editor such as FrontPage.

Applying Themes to Personal Sites
Themes allow users to easily customize the look of their personal sites from the Site Settings page for each site. Themes are applied automatically to the entire personal site, except for the public view. Applying the theme to the public view requires additional steps by the portal site administrator.

You can also apply themes to other SharePoint sites created from your personal site.

1.Open the Site Settings page for the personal site:
-To view your own personal site, use the Site Settings link on the home page of the personal site.
-As a portal site user with the Manage User Profiles right, you can edit the site settings for the personal site of any user in the portal site from the View 2.User Profiles page of the portal site:
3.On the home page of the portal site, click Site Settings.
4.On the Site Settings page of the portal site, in the User Profile, Audiences, and Personal Sites section, click Manage profile database.
5.On the Manage Profile Database page, in the Profile and Import Settings section, click the user’s account name, and then click Manage Personal Site.
6.On the Site Settings page of the personal site, in the Customization section, click Apply theme to site.
7.On the Apply Theme to Web Site page, click the theme you want to apply, and verify that the previewed theme is acceptable.
8.Click Apply.

For information about customizing the style sheets for themes, see “Customizing Style Sheets for Personal Sites,” later in this paper.

Applying Themes to the Public View of Personal Sites
By default, the public view of a personal site cannot be customized through the Site Settings pages for the personal site. When you apply themes to the personal site by using the Apply Theme to Web Site page, a reference to a .css page for the theme is added to the HTML that is generated by the Web Part Page for the private view of the personal site. The file for that page is Default.aspx, located in the Program FilesCommon FilesMicrosoft Sharedweb server extensions60Template1033SPSMSITE directory.

That reference is not added to the HTML page generated by the Web Part Page for the public view of the personal site, and so the theme does not extend to the public view.

To apply the same theme to the public view, you must have local administrator rights on the server for the portal site.

Open the file Public.aspx in the Program FilesCommon FilesMicrosoft Sharedweb server extensions60Template1033SPSMSITE directory of the computer that hosts the personal sites.

1.Search the .css file for the public view for the following comment tags:

Code:

ode><!--begmstheme-->
<!--endmstheme-->

2.Between those comment tags is the following tag:

Code:

ode><SPSWC: MySiteTheme visible="false" runat="server"/>

3.Change the “false” value to “true” and save Public.aspx to the original location.
4.Open the public view of the personal site and verify that the theme was properly applied.

Customizing Style Sheets for Personal Sites
Each page or list on a personal site uses a cascading style sheet (.css) file to format its style and appearance. Those .css files are references in the .aspx files for personal sites: Default.aspx for the private view and Public.aspx for the public view.

As a portal site administrator, if you want to change the style of the personal site more than is allowed on the Site Settings page for the site, you can edit the .css files directly and then save the files to their original location.

The .css files for personal sites are located at Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033STYLES. The main .css file used by the portal site is Owspers.css. Other .css files include the default portal site style sheet (Sps.css), which does not affect the look of personal sites, and special styles for users with uncommon browsers and menus found on personal sites. In most scenarios, you will edit only Owspers.css.

The personal site may also use themes that are referenced in the .aspx files for personal sites. The .css files for these themes are located in thematic subfolders at Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE. You can customize an existing theme by modifying these .css files. By default, each theme has five different .css files. For personal sites, the important files for each theme are Theme.css, the main style sheet for the theme, and the two style sheets for the theme’s color scheme: Color0.css and Color1.css. You can also develop new themes for your organization and put them in a new subfolder at this location, using the style sheets of the existing themes as an example.

ShareThis