Themes and skins

As we have seen the master page affect the general structure of a series of pages within an application (or site) website. However, almost always in the implementation of a site you need to manage other elements that can change from page to page, but must remain stable within the same page (like the font of the text). In such scenarios are a very useful tool called Themes.

If you're familiar with Cascading Style Sheets (CSS) you will not be difficult to understand the functioning of the issues. The two techniques are similar because both in fact you can define the visual style of our web pages. It 'can use themes to specify styles, graphics and other elements in the pages of our site.

The themes are basically text files that specify the characteristics that the elements of a page must assume ASP.NET and it includes several default, although you can of course define your own.

Proceed with an example. Create a new web form (I call it EsempioTemi.aspx) and then we click the right mouse button on our project and choose Add ASP.NET Folder option and choose the folder type as a Theme

This leads to the creation of the folder inside App_Themes with a default folder (called Theme1)

Rename the folder Theme1 in Default and click on it with the right mouse button, adding a new element of type StyleSheet (style sheet). We call the same default.css

At this point we have to set the characteristics of our style sheet. If we double click on it we will see that only contains a body tag

To add new items click on the Add Style Rule Menu Styles

This opens the following window

Suppose you want to add a H1 element to our style sheet. Element select in the dropdown menu and click on the h1 element> button to place it in the Style rule hierarchy list

Click OK once we see that the stylesheet is changed as follows

To edit the item just inserted we click with the right mouse button on its tag and choose Build Style option. This will open the Modify Style dialog, where we're going to set some properties at will

After clicking OK we see our choices included in the stylesheet

We test our theme now by adding to the web form created at the beginning of the lesson Directive Theme and writing something in h1 tags

The text that I entered I was testing the application style and it will be displayed in the browser according to our style sheet IPOST

The same thing will happen for all elements of our enclosed in h1 tags. Clearly we have used this tag as an example but in principle in a similar way you can customize all the elements of a web form.

Finally I will touch briefly on the so-called skin. These elements are a way to configure some properties of a group of controls. For example, you might want to define different color schemes for a particular type of control (like TextBox) characterized by various customizable properties.

By defining the appropriate skin can make available a number of display options for a group of controls without the need to set properties for each instance of each. For example, if a web form TextBox contains ten and want to give them some formatting just define the appropriate skin and assign to each of the text boxes. So the files in a skin defining a specific type of control and the attributes that apply to all instances of the same.

Here's an example. Create a new folder inside the folder called Skins Default seen previously and add a new element to the inside skin type called TestSkinFile

Insert in the generated file customizations for some controls such as the following

In this way, when we add a Web form components of the skin, they will take the features set. Obviously this is done so that the skin must be declared within the page, similar to what was done previously for the theme.

• <<Previous Lesson
• Help Index
• Next Lesson>>