Sitefinity CMS
Contents
Working with Themes Send comments on this topic.
See Also
Designing with Sitefinity > Themes and Skins > Working with Themes

Glossary Item Box

Themes allow quick change of the presentation and layout of a page using a combination of style sheets (.css) and skin (.skin) files, as well as graphics. In this QuickStart, the following items will be created:

  • Test project in Sitefinity; 
  • Simple page template for the site; 
  • Page using the template;
  • Theme using both .css and .skin files for the page template;

Finally, some content will be added to the page to see the theme applied.

 

Adding a New Project to Sitefinity

To create a new project in Sitefinity:

  1. Launch Sitefinity Project Manager by selecting Start Menu > All Programs > Telerik > Sitefinity 3.2 > Sitefinity 3.2.
  2. Click Create New Project. 
  3. Set the new project name to QuickStart, and then click Next.
  4. Below the title "Select a template" select the first radio button: "Use no template" and click Create this project.
  5. When the project has been created, click Go to administer the project.
  6. When asked what database to use, select your database, and then press Continue.
  7. If your database is SqlExpress ,give the admin user a password and an e-mail address, and then press I’m done (see Figure 1). If it is other type of database, set the connection and then press  I’m done.

  8.  Sign in as admin.Registering the Administrator

    Figure 1

 

Creating the Master Page Template

Create a master page called MasterPage1.master and save it to the C:\ folder. 

For details, see Working with Master Pages.  

Modify the code of the master page as follows:

MasterPage1.master Copy Code
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
   <title>My Master</title>
</head>
<body>
 <form id="form1" runat="server">
   <div id="sidebar">
       <asp:contentplaceholder id="SidebarContent" runat="server" />
   </div>
   <div id="main">
       <asp:contentplaceholder id="MainContent" runat="server" />
   </div>
 </form>
</body>
</html>

 

Adding the Page Template to the Web Site

To make the master page available to a Web site:

  1. Open the Administration panel for the QuickStart Web site in your browser. You will find it at http://localhost/QuickStart/admin/.  
  2. Sign in as admin with the password you gave it earlier.
  3. Click Pages from the main menu to access the Page Manager.
  4. Click Templates to access the master pages area.
  5. Click Upload Master Page to generate the template.
  6. Set Template Name to MyMaster and Master Page to C:\MasterPage1.master. (See Figure 2)
  7. Click Upload this master page

    Themes - Uploading a Master Page 

    Figure 2 

 

Opening the QuickStart Web Site in Visual Studio

  1. Start Microsoft Visual Studio if it is not already open.
  2. Select File > Open > Web Site.
  3. Select File System from the choices on the left.
  4. Browse to the folder where the QuickStart site has been created (by default, this is C:\Program Files\Telerik\Sitefinity3.2\WebSites\QuickStart). (See Figure 3)
  5. Click Open.

     Themes - Opening the Project in VS

    Figure 3 

 

Creating the Theme

  1. Right-click to select the App_Themes folder in the Solution Explorer and then select Add ASP.NET Folder > Theme.
  2. Name the new folder MyTheme.
  3. Right-click to select the MyTheme folder, and then select Add New Item.
  4. Select the Style Sheet template.
  5. Name the new item MyStyles.css. (See Figure 4)
  6. Click Add.

     Themes - Adding a Css File

    Figure 4

  7. Right-click to select the MyTheme folder, and then select Add New Item.

  8. Select the Skin File template.

  9. Name the new item MySkin.skin. (See Figure 5)

  10. Click Add. 

     Themes - Adding a Skin File

    Figure 5

 

Adding Code to the Style Sheet

The code in the style sheet defines a basic layout for pages based on the MyMaster template; it also defines how <h1> text is rendered.

  1. Open the MyStyles.css page in Visual Studio.
  2. Replace its code with the following, and then save the file:

     

    MyStyles.css Copy Code
    #sidebar
    {
          float:left;
          padding : 10px;
          margin-right : 10px;
          border : 1px solid red;
    }
    #main
    {
          float: left;
          padding : 10px;
          border : 1px solid green;
          width : 700px;
    }
    h1
    {
          font-family : Arial;
          font-size : x-large;
          color : Red;
    }

     

 

Adding Code to the Skin

The code in the skin defines how <asp:hyperlink> elements will be rendered.

  1. Open the MySkin.skin page in Visual Studio.
  2. Replace its code with the following, and then save the file:

     

    MySkin.skin Copy Code
    <asp:HyperLink runat="server" BackColor="AliceBlue" Font-Bold="true" Font-Underline="false" />

     

Creating a Page and Applying the Theme

  1. Open the Administration panel for the QuickStart Web site in your browser. You will find it at http://localhost/QuickStart/admin/.
  2. Sign in as admin with the password admin.
  3. Click Pages in the Dashboard to access the Page Manager.
  4. Click Create a Page.
  5. Name the page Themes.aspx. Leave the other properties at their default.
  6. Click Create this page.
  7. Choose MyMaster from the Page Template drop-down box, and MyTheme from the Theme drop-down box. (See Figure 6)
  8. You will see the red and green outlines around the content areas of the page as set by the style sheet.
  9. Click Publish.

     Themes - Creating a Page

     Figure 6

 

Adding Content Styled by the Theme

  1. With the Themes page selected in Page Manager, click Edit this Page.
  2. Add a Generic Content control from the Add Controls section on the right, the Generic Content group, and place it at the MainContent content area.
  3. Click Edit on the Generic Content control.
  4. Type This is a Css-styled H1 in the text box.
  5. Select the text, and style it as Heading 1. (See Figure 7)

    Themes -Styling the Generic Content 

    Figure 7

  1. Click I’m done. You will see the text rendered as large, red text as it is set in MyStyles.css.
  2. Add a Hyper Link control from the Navigation group of the Add Controls section, and place it at the MainContent content area.
  3. Click Edit on the hyperlink control.
  4. Set the Text property to "This is a skinned hyperlink". (See Figure 8)

    Hyperlink Control 

    Figure 8

  1. Click I’m done.
  2. Click Preview.
  3. You will see the hyperlink in bold text with a light blue background and no underline as set in MySkin.skin. (See Figure 9)
  4. Click Publish.

    Themes - Preview of Styled Content

    Figure 9

     

See Also