|
Article relates to
|
Sitefinity 2.7
|
|
Created by
|
Rebecca, Telerik
|
|
Last modified
|
Nov 14, 2006
|
Themes and Skins in Sitefinity
There are several approaches to changing the look and feel of Sitefinity:
-
ASP.NET2.0 Themes are supported by Sitefinity
In the
Default.aspx
you can set the theme for the whole web site like this:
<%@Page
Theme="Outlook"
Language="c#"Inherits="TelerikCmsProject.DefaultPage"CodeFile="Default.aspx.cs" %>
Please refer to
ASP.NET Themes and Skins Overview
for more information on ASP.NET 2.0 themes.
This collection of property settings allows you to define the look of pages and controls, and then apply the look consistently across pages in a Web site.
When creating a new Web site, the Sitefinity Project Manager copies files from
Sitefinity2.7\ProjectManager\Controls\Wizard\Themes\[selected theme]
to the project root directory, mostly these are the Common and Img folders. You can change these folders (files) at any time.
- Themes of Individual User Controls
The
RadControls
that are integrated in Sitefinity use a different theme mechanism than the stand-alone RadControls. The resource files for Sitefinity RadControls themes are in
[project_root]\RadControlsResources\[theme]\[RadControl]
.
The paths to these files are set in the
RadControl
codebehind.
When working with an existing web site project, you can easily set/change the Theme of a supporting control using the Property Grid from the Page Editor or the Layout Editor respectively.
To add a new theme, do the following:
- create a new folder for the theme and place in it theresource files for each control;
- set your own theme by changing the
Helper.cs
file and
ThemeEnum.cs
file in your project.
Add the new theme in the enumerator:
using System;
namespace Telerik.ContentManagement.Controls
{
public enum CmsThemes
{
NotSet,
Default,
GrassyGreen,
MonoGraphic,
Test
}
}
- add a case for the new theme in
Controls\RadControls\Helper.cs
method
GetThemeFolder
:
case CmsThemes.Test:
{
themeString = "Test";
break;
}
You can use the
Skins
of RadControls, for example the RadMenu
like this:
- Go to the
Control Properties
tab for the RadMenu
instance
.
- Select
Menu – RadMenu
from the dropdown list
.
- Clear the
EnableTheming
checkbox.
- Find the
Skin
property.
- Set
CssBrick
skin, for example. You can find all the available skins for the menu in this folder
~/RadControls/Menu/Skins
.
