Using ASP.Net Themes and Skins in SharePoint 2007
Tuesday, February 5, 2008 at 05:05PM I found it difficult to find any details specific to using ASP.Net 2.0 themes with SharePoint 2007 and figured I'd write a post about it in case anyone is looking for it in the future.
First, to clarify, ASP.Net themes are not the same as SharePoint Themes. These are two completely different beasts, and as a developer, I rather not get involved in SharePoint themes if I don't have to.
ASP.Net themes are a mechanism for providing the default styling properties and css for controls in an ASP.Net Pages. There are plenty of good tutorials on using themes and skins like this article on Code Guru. In a nutshell, an ASP.Net Theme consists of a folder that contains skin files that tell ASP.Net what default style values to configure controls with as well as any supporting CSS files.
Also note that you can skin ASP.Net Controls, SharePoint controls or even your own custom controls. Just remember to Register any tagprefixes in the skin file itself. Here is the directive that should be at the top of your skin file if you are customizing any of the SharePoint controls like AspMenu or PeopleEditor:
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
So if you want to configure a theme to work with SharePoint you have two choices for where to put the actual theme folder:
- C:\WINDOWS\Microsoft.NET\Framework\v2.X.XXXX\ASP.NETClientFiles\Themes
- C:\Inetpub\wwwroot\wss\VirtualDirectories\80\aspnet_client\system_web\2_X_XXXX\Themes
Use the first for global themes that should be applied to any web application. Use the second if the theme will only be used on one web application. Change the drive letter as needed and replace the X's with your version of the dot net framework. Also the themes folders will need to be created if they don't already exist.
So for example, say you created a Theme folder called TeamSite1Theme. In that theme you had two skin files and a css file.
So the full path to the folder would be:
C:\Inetpub\wwwroot\wss\VirtualDirectories\80\aspnet_client\system_web\2_X_XXXX\Themes\TeamSite1Theme\
Remember the name of the folder is the name of the theme.
So If you want to apply the ASP.Net theme to the entire SharePoint Site, you will need to add an attribute to the Pages node. (its under system.web, but its probably easier to just search for <pages). You'll notice it already has a lot of attributes. Just add one anywhere that looks like the following:
theme="TeamSite1Theme"
Just Replace TeamSite1Theme with whatever you named your theme folder.
But what if you want to apply a theme to a particular site collection or subsite?
No worries, you'll just need to add a few more lines to the web config:
<location path="/sites/TeamSite1">
<system.web>
<pages theme="TeamSite1Theme" />
</system.web>
</location>
Just add the following somewhere under the configuration node (not under system.web), and change the path and theme as needed. And that is it.
On another note, I encourage everyone to check out my product Snip-It Pro, a tool I created to organize, search and share code snippets. I am maintaining another blog, The Snip-It Pro Blog where I am posting snippet libraries that can be downloaded and imported into the tool. I already released a free HTML snippet library, a free ASP.Net Control snippet library, and a Web.config snippet library.
Thanks and Happy Coding.
Reader Comments (5)
but once applied it requires all page to have “<head runat=”server”>” tag included. If any page missed this tag the below error is faced:
This is a screen shot for the pop-up of “Add new Web Part”.
This page is called “webpartgallerypickerpage.aspx” and its located under “_layouts” Folder, when we try to modify this page we get the below error
All Internal pages may cause this error as well, I have tried the “Help” pop-up and it’s acting the same way.
Regards
Saber Chebly