Using Themes in Asp.NET
When we want to make changes to the appearance of our website, we do not deal with all the pages one by one. Various techniques have been developed in Asp.Net to easily change the appearance of all pages. For example, using a masterpage file, external css file or user control file.
One of the methods used to control the appearance of pages from a single place is using themes. By creating a theme on our Asp.NET site, we can determine how the objects will look, and we can easily change them when necessary.
In addition, by creating more than one theme for a site, we can ensure that different themes are applied in different situations. For example, we can give the visitor the chance to choose the theme.
Creating Theme
Themes are kept in a special folder called App_Themes. Therefore, if this folder has not yet been created on our site, we must first create this folder.
To create the App_Themes folder, right-click the site name in the Solution Explorer panel and click "Add - Add Asp.Net Folder - Theme ".
The App_Themes folder and a folder for the theme (Theme1) will be created in it. We can change the name of Theme1 if we wish, because this name will also be the name of the theme.
The files of the themes on our site are kept under App_Themes in the folder of that theme.
A theme can have a skin file and a style file.
Using Skin File
Asp.Net server controls' appearances are determined in these files. A single skin file or multiple skin files can be created for a theme.
To create a skin file, right-click on the folder of that theme and click Add - Skin File commands.
Two sample controls have been added as comment lines in the created skin file, and we can delete these lines if we wish.
The appearances of the server controls are determined in the skin files. E.g:
<asp:Button runat="server" BackColor="red" ForeColor="yellow" />
If we add a line like this in our skin file, all the buttons on the pages where this theme is applied will be created with the specified properties.
As you can see, all the features of the server controls can be determined here, except for the id feature, and it can be ensured to be valid on the pages where the theme is applied. Becouse of each of the controls will already be given a different id within the web pages, it would be wrong to specify an id in the skin file.
The intellisense feature does not work in skin files, so it does not help us while writing the codes. For convenience, we can write the codes on another page and copy them here.
Using SkinID Property
The SkinID property is used to create multiple skins for a control in our skin file.
For example, let's create 4 different views in the skin file for the button control. To distinguish these skins from each other, let's give the SkinID properties of 3 of them b1, b2 and b3 values. Let's not use SkinID in one of them:
<asp:Button SkinID="b1" runat="server" BackColor="red" ForeColor="yellow" />
<asp:Button SkinID="b2" runat="server" BackColor="blue" ForeColor="yellow" />
<asp:Button SkinID="b3" runat="server" BackColor="black" ForeColor="white" />
<asp:Button runat="server" BackColor="white" ForeColor="black" />
Skins with a SkinID applied are called Named Skin, and a view without a SkinID is called Default Skin. Only one Default Skin can be created for a control. Named Skin, on the other hand, can be created as many times as desired with different names (SkinID).
In this case, when creating buttons on the page or pages on which the theme is applied, the skinID property should specify which appearance will be applied to that button. If not specified, the default skin is applied to that button. If there is no default skin, no skin is applied and the button is displayed in its original form.
EnableTheming Property
On a theme applied page, it is sometimes desirable to exclude a control and not apply the properties in the theme. In this case, the EnableTheming property of that control is set to False so that the theme is not applied.
<asp:Button id="Button1" runat="server" EnableTheming="False" />
Applying CSS to Themes
Only the properties of the server controls can be set in the skin file, not the properties of the html elements.
We can create a css file of the theme to specify the properties of the html elements.
For this, right click on the folder of that theme and click Add - Style Sheet command. Then we can write the styles we want in this file.
This style file will only be valid on pages where that theme is applied.
Applying Theme to The Page
To apply a theme to a page, it is sufficient to add a statement like Theme="Theme Name" to the page notification line of that page.
<%@ Page Title="Tema Kullanımı" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="temaliDosya.aspx.cs" Inherits="temaliDosya" Theme="Theme1" %>
Applying Theme to The Website
If we want to apply the theme to the entire website, that is, to all pages, we can do this in the web.config file as follows.
It will be sufficient to add the line shown in bold in the system.web node in the web.config file.
<system.web>
<pages theme="theme1"></pages>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
In this way, when we apply a theme to the entire site, if we want some pages to be excluded, it will be sufficient to set the EnableTheming property to false in the page notification line of those pages.
<%@ Page Title="Home Page" EnableTheming="false" ...
The features specified in the theme will not be valid on this page.
using asp.net themes, using more than one theme, creating themes on the website, what is skinID, what happens if there is no default skin, changing theme by code in Asp.Net
EXERCISES
There are no examples related to this subject.
Read 918 times.