ASP.NET Application Theme Management

ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages. When you develop a website, you sometimes want to offer visitors several different appearances so that everyone can find happiness. This goes from the layout to the customization of controls through changes in the Fonts used for your texts.

With ASP.NET, you will be able to develop your sites and on the side describe a series of appearances, called themes. These themes will allow you to define the appearance of your pages and your controls in order to easily apply them to one or more pages to see all your web application in e-commerce website design specifically.

The good news for developers is ASP.NET tooling is consistent – no matter what be your development tooling. What CLI can do over commands is exactly what Visual Studio does visually. Take a look at some of the app templates supported by ‘dotnet new’ CLI tooling – you’ll see corresponding similar templates on doing File | New in Visual Studio. Some of the app templates are what you expect from ASP.NET – some are unexpected; we’ll break things down.

Elements of a theme:

A theme consists of a set of elements that are:

• Appearances
• Style Sheets (CSS)
• Images and other resources like text files.

The elements listed above are not all required to define a theme. A theme will have at least appearances.

Appearances:

Appearances allow you to set a set of properties for one or more controls. When I talk about controls, I am referring to ASP.NET controls such as TextBox, Label, Calendar, GridView, and so on. And when I talk about properties, of course I want to talk about the properties of controls such as BackColor, ForeColor, BorderColor, and so on.

It is important to know that you can not use any property of a control. Only properties with the attribute ThemeableAttribute to true can be redefined.

For example, you will not be able to use the CommandName property of the Button control or the DataSource property of the GridView control.

To define a set of appearances for a theme, we will use a file of type Skin (extension .skin).Before giving you an example of appearance in a skin file, you must first know that there are two types of control appearances:

• The default appearance: in this case, we will define a set of properties for a control (example TextBox) and if we apply the theme to a page, the appearance will apply to all controls of the same type of the page in question (in our case to all TextBox).
• The named appearance: the named appearance will be identified by a name that will be placed in the SkinID property. All the controls of the same type of a web page which will have as SkinID the same name will thus have the defined appearance.

Style Sheets (CSS)

In addition to defining appearances in a theme, you can add your own style sheets (CSS). Below is a small example that defines the background color of the page and the color used for the font.

Images and other resources

It is also possible to include resource files related to a theme, such as images, text files, audio, video, etc. In general, your resource files will be in a subfolder of your Themes folder but this is not a requirement. These files may be in a folder outside the themes folder.

The scope of the themes: Before entering the heart of the matter as some are waiting impatiently, we have yet to speak of a final point which is the scope of the themes.

Page Themes: A page theme is represented by a theme directory consisting of control appearance files, style sheets, and resource files.

Global themes: The global theme is a theme that can be applied to all websites of a server. Like page themes, you have control appearance files, style sheets, and resource files.

Unlike page themes, global themes are stored in a global directory of the Web server called Themes.

Since between the creation of a page theme and that of a global theme, there is no difference except where the topics are, the following example will be based on the page theme principle.Creating its first theme.

Now that you know almost everything about themes, we’ll see how to use them in your web pages using Visual Studio.

Creating the theme management directory

Once the project is created, we will add the directory that manages the ASP.NET themes. To do this, right click on your project in the “Solution Explorer” window and click on “Add / Add ASP.NET Folder / Theme”. The App_Themes directory is the basic directory for managing your themes. Moreover, during the creation of this directory, Visual Studio created at the same time the Theme1 directory representing your first starting theme. We will use this directory to establish our first theme by renaming it MyFirstTime.

Creating our Skin file:

We will now create our Appearance file using a .skin file; right click on the Theme1 directory and select “Add / New Item …” In the dialog box, select the file of type .skin and name the file myApparence.skin. Now that the Appearance file is created, we will define the following things:

• Label named: text in bold and underlined.
• Named image: represented by an arrow that will be placed in front of our named label.
• Default label: bold text.
• Default TextBox: dashed and green border.
• Default button: purple background color and white text color.

Creating our style sheet:

We will also create our style sheet (Right click on the myFirstTime directory and select “Add / New Item ….” Then in the dialog box, select the file of type Style Sheet and name the myStyle.css) with will have the following properties:

• Gray wallpaper.
• Verdana font size 12.
• The paintings will have a gray continuous border of 2 pixels.

Applying the theme to a web page:

Let’s go to the creation of our page aspx which will represent a form (without processing logic behind) so that the user can insert his name, first name and email address. By the way, you will see three buttons that will change the theme dynamically (but it’s not for now).

Dynamic change of theme: Previously, we initialized the theme via the designer but it is quite possible to modify it during the execution of the Web application. To do this, simply set the Theme property of your Page object with the name of the theme to use. Note that this can only be done at the time of the PreInit event or before this event.

Conclusion: After customizing controls with appearance files, wrapping your pages with style sheets, and finally inserting resource files into your pages, you could see the full range of ASP.NET 2.0 with its theme management. Above all, you have seen how easy it is to create multiple graphical templates in a very short time and well separated from your business code.

Author Bio:

Junaid Ali Qureshi is leader/representative/frontrunner of an expert magento development team and an experienced digital marketing specialist dedicated to develop intuitive, well crafted, smart websites having blistering opening on search engine(s) making time and money worthwhile. His current ventures include magentodevelopers.online ,Elephantation, eLabelz, Smart Leads.ae, Progos Tech and eCig.