Microsoft introduced Themes in ASP.NET 2.0 as an easy way to assign style and other properties declaratively to ASP.NET server controls like DataGrid, GridView, Calendar, DropdownList, TextBox, etc. After implementing support for using themes in mojoPortal, I realized/discovered that its is really a bad idea to use themes to do anything other than maybe assign CSS classes to controls and even this is rarely needed. The reason its a bad idea to use themes to style your controls is that when you do this the styles are rendered inline and repeated everywhere in the markup for the control which makes the markup very bulky and can hurt perfomance because your page is slower to load due to the heavy markup of inline styles. So, in short, themes are a developer convenience but use of them is really not a best practice and my advice is just use CSS and don't use the theme.skin to set styles. However, if you wish to use themes anyway then read on to learn a little about how to use them.
In mojoPortal, I have stubbed out example templates for most of the server controls in the theme.skin file in the mojoPortal skin folders. Note that when I talk about mojoPortal skins I mean everything in the skin folder not just the theme.skin file.
You can have multiple templates for any given server control but each must have a unique SkinID. You assign the SkinID to the server control instance to make it use the particular set of properties defined on the template with the corresponding SkinID within the theme.skin file. You can also have one template per server control that uses no SkinID and corresponding server controls that have no SkinID will use that template.
For example, shown below is a section from the theme.skin file in one of the included mojoPortal skins showing a template for the ASP.NET Calendar control. Note that this shows all the possible properties and does not use a SkinID, so this would apply all of these properties to any ASP.NET Calendar control that has no SkinID specified. Not there are a whole lot of possible properties that can be set using Theme tamplates.
<asp:Calendar runat="server"
BackColor="#00719B"
BorderColor="Black"
BorderStyle="solid"
BorderWidth="1"
CaptionAlign="Top"
CellPadding="1"
CellSpacing="0"
CssClass=""
DayHeaderStyle-BackColor="#FFFFFF"
DayHeaderStyle-BorderColor="Black"
DayHeaderStyle-BorderStyle="Solid"
DayHeaderStyle-BorderWidth="0"
DayHeaderStyle-CssClass=""
DayHeaderStyle-Font-Bold="true"
DayHeaderStyle-Font-Italic="false"
DayHeaderStyle-Font-Names=""
DayHeaderStyle-Font-Overline="false"
DayHeaderStyle-Font-Size="8pt"
DayHeaderStyle-Font-Strikeout="false"
DayHeaderStyle-Font-Underline="false"
DayHeaderStyle-ForeColor=""
DayHeaderStyle-Height=""
DayHeaderStyle-HorizontalAlign="center"
DayHeaderStyle-VerticalAlign="NotSet"
DayHeaderStyle-Width=""
DayHeaderStyle-Wrap="false"
DayNameFormat="FirstLetter"
DayStyle-BackColor="WhiteSmoke"
DayStyle-BorderColor="black"
DayStyle-BorderStyle="solid"
DayStyle-BorderWidth="0"
DayStyle-CssClass=""
DayStyle-Font-Bold="false"
DayStyle-Font-Italic="false"
DayStyle-Font-Names=""
DayStyle-Font-Overline="false"
DayStyle-Font-Size="8pt"
DayStyle-Font-Strikeout="false"
DayStyle-Font-Underline="false"
DayStyle-ForeColor="black"
DayStyle-Height=""
DayStyle-HorizontalAlign="center"
DayStyle-VerticalAlign="NotSet"
DayStyle-Width=""
DayStyle-Wrap="false"
FirstDayOfWeek="sunday"
Font-Bold="false"
Font-Italic="false"
Font-Names=""
Font-Overline="false"
Font-Size="8pt"
Font-Strikeout="false"
Font-Underline="false"
ForeColor="Black"
Height=""
NextMonthText="+"
NextPrevFormat="CustomText"
NextPrevStyle-BackColor=""
NextPrevStyle-BorderColor="black"
NextPrevStyle-BorderStyle="solid"
NextPrevStyle-BorderWidth="0"
NextPrevStyle-CssClass=""
NextPrevStyle-Font-Bold="true"
NextPrevStyle-Font-Italic="false"
NextPrevStyle-Font-Names=""
NextPrevStyle-Font-Overline="false"
NextPrevStyle-Font-Size="8pt"
NextPrevStyle-Font-Strikeout="false"
NextPrevStyle-Font-Underline="false"
NextPrevStyle-ForeColor=""
NextPrevStyle-Height=""
NextPrevStyle-HorizontalAlign="center"
NextPrevStyle-VerticalAlign="NotSet"
NextPrevStyle-Width=""
NextPrevStyle-Wrap="false"
OtherMonthDayStyle-BackColor="lightyellow"
OtherMonthDayStyle-BorderColor="black"
OtherMonthDayStyle-BorderStyle="solid"
OtherMonthDayStyle-BorderWidth="0"
OtherMonthDayStyle-CssClass=""
OtherMonthDayStyle-Font-Bold="false"
OtherMonthDayStyle-Font-Italic="false"
OtherMonthDayStyle-Font-Names=""
OtherMonthDayStyle-Font-Overline="false"
OtherMonthDayStyle-Font-Size="8pt"
OtherMonthDayStyle-Font-Strikeout="false"
OtherMonthDayStyle-Font-Underline="false"
OtherMonthDayStyle-ForeColor="black"
OtherMonthDayStyle-Height=""
OtherMonthDayStyle-HorizontalAlign="center"
OtherMonthDayStyle-VerticalAlign="NotSet"
OtherMonthDayStyle-Width=""
OtherMonthDayStyle-Wrap="false"
PrevMonthText="-"
SelectedDayStyle-BackColor="Beige"
SelectedDayStyle-BorderColor="black"
SelectedDayStyle-BorderStyle="solid"
SelectedDayStyle-BorderWidth="0"
SelectedDayStyle-CssClass=""
SelectedDayStyle-Font-Bold="false"
SelectedDayStyle-Font-Italic="false"
SelectedDayStyle-Font-Names=""
SelectedDayStyle-Font-Overline="false"
SelectedDayStyle-Font-Size="8pt"
SelectedDayStyle-Font-Strikeout="false"
SelectedDayStyle-Font-Underline="false"
SelectedDayStyle-ForeColor="black"
SelectedDayStyle-Height=""
SelectedDayStyle-HorizontalAlign="center"
SelectedDayStyle-VerticalAlign="NotSet"
SelectedDayStyle-Width=""
SelectedDayStyle-Wrap="true"
SelectorStyle-BackColor=""
SelectorStyle-BorderColor="red"
SelectorStyle-BorderStyle="solid"
SelectorStyle-BorderWidth="0"
SelectorStyle-CssClass=""
SelectorStyle-Font-Bold="true"
SelectorStyle-Font-Italic="false"
SelectorStyle-Font-Names=""
SelectorStyle-Font-Overline="false"
SelectorStyle-Font-Size="8pt"
SelectorStyle-Font-Strikeout="false"
SelectorStyle-Font-Underline="false"
SelectorStyle-ForeColor="Green"
SelectorStyle-Height=""
SelectorStyle-HorizontalAlign="center"
SelectorStyle-VerticalAlign="NotSet"
SelectorStyle-Width=""
SelectorStyle-Wrap="false"
ShowDayHeader="true"
ShowGridLines="true"
ShowNextPrevMonth="true"
ShowTitle="true"
TitleFormat="MonthYear"
TitleStyle-BackColor=""
TitleStyle-BorderColor="black"
TitleStyle-BorderStyle="solid"
TitleStyle-BorderWidth="0"
TitleStyle-CssClass=""
TitleStyle-Font-Bold="true"
TitleStyle-Font-Italic="false"
TitleStyle-Font-Names=""
TitleStyle-Font-Overline="false"
TitleStyle-Font-Size="8pt"
TitleStyle-Font-Strikeout="false"
TitleStyle-Font-Underline="false"
TitleStyle-ForeColor=""
TitleStyle-Height=""
TitleStyle-HorizontalAlign="center"
TitleStyle-VerticalAlign="NotSet"
TitleStyle-Width=""
TitleStyle-Wrap="false"
TodayDayStyle-BackColor="gray"
TodayDayStyle-BorderColor="black"
TodayDayStyle-BorderStyle="solid"
TodayDayStyle-BorderWidth="0"
TodayDayStyle-CssClass=""
TodayDayStyle-Font-Bold="false"
TodayDayStyle-Font-Italic="false"
TodayDayStyle-Font-Names=""
TodayDayStyle-Font-Overline="false"
TodayDayStyle-Font-Size="8pt"
TodayDayStyle-Font-Strikeout="false"
TodayDayStyle-Font-Underline="false"
TodayDayStyle-ForeColor="Black"
TodayDayStyle-Height=""
TodayDayStyle-HorizontalAlign="center"
TodayDayStyle-VerticalAlign="NotSet"
TodayDayStyle-Width=""
TodayDayStyle-Wrap="true"
WeekendDayStyle-BackColor="lightgray"
WeekendDayStyle-BorderColor="black"
WeekendDayStyle-BorderStyle="solid"
WeekendDayStyle-BorderWidth="0"
WeekendDayStyle-CssClass=""
WeekendDayStyle-Font-Bold="false"
WeekendDayStyle-Font-Italic="false"
WeekendDayStyle-Font-Names=""
WeekendDayStyle-Font-Overline="false"
WeekendDayStyle-Font-Size="8pt"
WeekendDayStyle-Font-Strikeout="false"
WeekendDayStyle-Font-Underline="false"
WeekendDayStyle-ForeColor="black"
WeekendDayStyle-Height=""
WeekendDayStyle-HorizontalAlign="center"
WeekendDayStyle-VerticalAlign="NotSet"
WeekendDayStyle-Width=""
WeekendDayStyle-Wrap="true"
Width=""
/>
I want to mention that while it is convenient to specify style properties in the Theme template, I recommend that you only assign CSS class names in the Theme template and not set specific style properties like Font-Bold (etc.). You can set the font properties in the CSS class instead. The reason I recommend that is that when you use specific style properties like Font-Bold in the theme.skin file, you end up with a lot of inline style in the rendered markup. For example the Calendar renders as an Html table but you would see most of the cells or td tags in the table will have style="..." with a bunch of inline style that is repeated over and over for each cell thus increasing the amount of text in the markup dramatically. By keeping the style in the CSS file it gets re-used more easily and the markup rendered is much lighter weight and therefore improves performance of the page.
So in all the included skins for mojoPortal I have only set CSS classes for the Calendar and other server controls more like this:
<asp:Calendar runat="server"
CaptionAlign="Top"
CssClass="aspcalendarmain"
DayHeaderStyle-CssClass="aspcalendardayheader"
DayNameFormat="FirstLetter"
DayStyle-CssClass="aspcalendarday"
FirstDayOfWeek="sunday"
NextMonthText="+"
NextPrevFormat="CustomText"
NextPrevStyle-CssClass="aspcalendarnextprevious"
OtherMonthDayStyle-CssClass="aspcalendarothermonth"
PrevMonthText="-"
SelectedDayStyle-CssClass="aspcalendarselectedday"
SelectorStyle-CssClass="aspcalendarselector"
ShowDayHeader="true"
ShowGridLines="false"
ShowNextPrevMonth="true"
ShowTitle="true"
TitleFormat="MonthYear"
TitleStyle-CssClass="aspcalendartitle"
TodayDayStyle-CssClass="aspcalendartoday"
WeekendDayStyle-CssClass="aspcalendarweekendday"
/>
Additional Resources
ASP.NET Themes and Skins Overview
Last Updated: 2007-01-28 Joe Audette