Using Themes and Skins

PRADO has intrinsic support for themes. By using themes, we can better separate logic and presentation, and we can also change the overall appearance of our blog system more easily.

Creating Theme

We first create a new directory themes. This is the parent directory of all themes for a particular PRADO application. Any subdirectory under this directory will become a theme whose name is the subdirectory name.

To create a theme named Basic, we create a subdirectory theme/Basic. Under this directory, we may place theme-dependent stylesheet files, Javascript files, images, and skin files.

Info: The themes directory must be Web-accessible, like the assets directory. Do not place sensitive data files under this directory. You can change the name or location of this directory by configuring the TThemeManager module in the application configuration.

Creating Stylesheet File

Under the themes/Basic directory, we create a CSS stylesheet file named style.css. When a page uses this theme, PRADO will automatically import this stylesheet to the page. The same occurs for Javascript files.

The CSS file is shown as follows. 

body {
	font-family: verdana, 'trebuchet ms', sans-serif;
	font-size: 10pt;
	background: white;
}
#page {
	margin: 0 auto 0 auto;
	width: 600px;
}
#footer {
	text-align: center;
	margin-top: 10px;
	padding: 10px;
	border-top: 1px solid silver;
}
.post-box {
	margin-bottom: 10px;
	padding: 5px;
}
.post-box h3 {
	padding: 5px;
	font-size: 13pt;
	background: lightgray;
}
.post-box a {
	color: black;
	text-decoration: none;
}
.post-box a:hover {
	color: red;
}

Creating Skin File

We use skins to initialize the properties of PRADO controls. Skins are stored as skin files (suffix name .skin) under a theme directory. Each skin file can contain multiple skins for one or several types of control.

As a test, we will try to create a skin that changes the background color of the link buttons in the page footer. We create a file named button.skin under the theme directory themes/Basic. 

<com:THyperLink SkinID="MainMenu" BackColor="lightgreen" />

The button.skin skin file contains only one skin for THyperLink controls whose SkinID property is MainMenu. The skin sets the background color of the control to be light-green.

Accordingly, we need to modify protected/common/MainLayout.tpl so that the link buttons in the footer use MainMenu as their SkinID. 

......
<div id="footer">
......
<com:THyperLink Text="Home" SkinID="MainMenu"
	NavigateUrl="<%= $this->Service->DefaultPageUrl %>" />

<com:THyperLink Text="New Post" SkinID="MainMenu"
	NavigateUrl="<%= $this->Service->constructUrl('posts.NewPost') %>"
	Visible="<%= !$this->User->IsGuest %>" />
......
</div>
......
Info: The syntax for skin files is very similar to that of PRADO templates. Each <com:> tag defines a skin for a particular type of control. PRADO automatically aggregates all skin files in a theme and applies them when a themed page is being rendered.

Using Theme

To use the theme we just created, we modify the application configuration as follows. As we see, the Theme property for all pages is set as Basic, the name of the theme we created. 

......
  <services>
    <service id="page" class="TPageService" DefaultPage="posts.ListPost">
      <pages MasterClass="Application.layouts.MainLayout" Theme="Basic" />
    </service>
  </services>
......
Info: It is possible to specify different themes for different pages, and this can be done either in application/page configurations or programmatically (note Theme a page property). For the latter, it is must be done in onPreInit() method of the page because PRADO applies a theme to a page early in the page lifecycle.

Testing

To see how our blog pages look like, visit the URL http://hostname/blog/index.php. We shall see the font, layout, borders are changed in the page. Also, the link buttons in the footer have light-green background.