How to use Themes

Themes play an important role in the way the visual appearance of web projects created with the ASP.NET 2.0 Templates is controlled. GenWise Studio provides a few themes that you can choose from. If you're serious about the appearance of your application, these will only serve as a starting point. The objective of this topic is to point you in the right direction if you want to add or modify themes to control look and feel of your applications.

Theme development is done outside GenWise Studio, and requires some web development experience and knowledge of Cascading Style Sheets. You can modify themes that are installed with GenWise Studio, and you can create your own form scratch. More about ASP.NET 2.0 Theme development can be found in these locations:

http://msdn2.microsoft.com/en-us/library/705sff8d.aspx

http://quickstarts.asp.net/QuickStartv20/aspnet/doc/themes/default.aspx

Adding your own themes

You can add your own theme files by adding a new theme subdirectory in the \bin\distrib\themes directory.

For GenWise to pick up this theme in its theme selection you must add a file named GenWiseTheme.xml with the following contents:

<?xml version="1.0" encoding="utf-8" ?>

<GenWiseTheme version="1">

   <Name>Default Granite Theme</Name>

   <Description>Stylish blue and brushed metal theme,

       compatible with Firefox and IE5.5+</Description>

   <Homepage>http://www.genwise.com</Homepage>

   <Author>GenWise</Author>

   <GenWiseThemeImages>

       <ExampleImage>

           <FileName>theme_img1.png</FileName>

           <Caption>basic page with browse</Caption>

       </ExampleImage>

   </GenWiseThemeImages>

</GenWiseTheme>

Modifying themes

To modify the appearance of most common ASP.NET controls open the file named granite.skin in the App_Themes\Granite subdirectory. You can open the file with Visual Studio, or with any plain text editor, preferably one that supports syntax coloring for xml or server-side html.

As an example we will modify the look of the GridView control, which is used in all Browse pages generated by GenWise. The theme definition for the GridView looks as following:

<asp:GridView ID="GridView1" runat="server" ForeColor="#585880"

   BorderStyle="Double" BorderColor="#E7E5DB"
   BorderWidth="2pt" CellPadding="5" GridLines="None">

   <AlternatingRowStyle Font-Bold="False" ForeColor="#585880"
       BackColor="#F8F7F4"></AlternatingRowStyle>

   <FooterStyle Font-Bold="False" ForeColor="#585880"
       cssclass="theme_header"></FooterStyle>

   <EditRowStyle ForeColor="#585880" Font-Bold="True"
       BorderWidth="1pt" BorderStyle="Solid"
       cssclass="theme_highlighted"></EditRowStyle>

   <HeaderStyle Font-Bold="False" ForeColor="#585880"
       BorderColor="#CCCCCC" BorderWidth="1pt"
       cssclass="theme_header"></HeaderStyle>

   <RowStyle HorizontalAlign="Left" VerticalAlign="Top"
       Font-Bold="False" ForeColor="#585880"
       BackColor="#FFFFFF"></RowStyle>

   <PagerStyle Font-Bold="False" ForeColor="#585880"
       BackColor="#E7E5DB"></PagerStyle>

   <SelectedRowStyle Font-Bold="False" ForeColor="#585880"
       BorderStyle="solid" BorderWidth="2pt" BorderColor="585880"
       cssclass="theme_highlighted"></SelectedRowStyle>

</asp:GridView>

As you can see it defines visual properties for all GridView controls using the same syntax as used to define an instance of a GridView control in an aspx file. This definition of visual properties results in the following visual appearance:

As an example we will change the selected item style with the green borders. Let's remove the borders and use some color to highlight the selected row. We change the SelectedRowstyle entry to:

<SelectedRowStyle Font-Bold="False" ForeColor="#585880"
    BackColor="#FFC0C0"></SelectedRowStyle>

This results in the following appearance:

All visual properties of controls can be changed this way.