APPLYING AND MANIPULATING UMBRACO SKINS

Umbraco skins are created by the Umbraco community members and can be installed from the Developer Packages section of the Umbraco back office. Basically, Umbraco skins enable you to change the look and feel of an Umbraco starter kit simply by applying the skin to a starter kit site. In addition, you can customize skins with user-defined text, colors, and images. Umbraco skins build on the best practices approach of Umbraco starter kits by demonstrating the best way to implement styling and layout control in your site.

When you apply a skin to an Umbraco starter kit site, the skin's styles are used in place of the existing starter kit site's styles. The skin simply provides a unique Cascading Style Sheet (CSS) file, including any images required to achieve the layout defined by the CSS. A skin can also add or change small portions of the starter kit site's HTML templates if needed. You can roll back all CSS, images, and HTML changes to the starter kit's default skin for a site because Umbraco creates a backup of the starter kit's default skin when you apply a different skin.

By default, you can only apply skins to the Umbraco starter kits as opposed to an arbitrary Umbraco site as skins depend on the starter kit's layout. Umbraco automatically determines which skins you can apply to the currently installed starter kit and presents these in the skin selector.

You can select and apply a skin (see Figure 1-24) either when you install an Umbraco starter kit or you can do so at a later time.

FIGURE 1-24

To access, install, and customize a skin, follow these steps:

1. Navigate to the Developer section, expand the Packages tree and click the Install skin icon. The available skins display in the right pane.

   Umbraco skins are stored in a central Internet repository so they can be kept current. An Internet connection is required to browse and install a skin.

2. To install a skin, click the skin icon.
3. To customize an installed skin, navigate to the Settings section, expand the Templates tree, select the Starterkit Master template, and then click the Modify Template Skin button on the right pane toolbar. The Umbraco Customize Skin editor will be launched and you can customize the skin with your own text, colors, and images (see Figure 1-25).

   FIGURE 1-25

   

Customizing a Skin

You can customize an Umbraco skin using only the Umbraco Skin editor with no code required. An Umbraco skin may contain dependencies. Think of these as options that enable you to customize the skin for your own site's use. You can use Umbraco skin dependencies to customize a starter kit site's text, colors, and images. In this way a single skin applied to a single starter kit can be unique from every other Umbraco site with the same starter kit and skin because of the customized text, colors, and images.

When you install a skin, the dependencies defined by the skin author can be set using the Umbraco Skin editor. After a skin has been installed it can be customized.

To customize an installed skin:

1. Navigate to the Settings section, expand the Templates tree, and select the “Starterkit Master” template.
2. Click the Modify Template Skin button on the right-pane toolbar. The Umbraco Customize Skin editor launches.
3. You can customize the skin with your own text, colors, and images. Using the Customize Skin editor you can enter text for text dependencies, choose colors for color dependencies, and choose and edit images for image dependencies (see Figure 1-26).

   FIGURE 1-26

   

Modifying a Simple Umbraco Skin

If you're comfortable editing HTML and CSS you can modify a skin further for your own use. At its most basic, an Umbraco skin contains only CSS to achieve the desired changes to a starter kit site's styles. You simply include a reference to the skin's unique CSS file in the starter kit's MasterPage template. Don't worry about the terminology yet; this is just an example and all terms you see now are explained fully a bit later in this book. Using this simple example, you can include the following line in the starter kit's MasterPage template so that any styles defined in the referenced CSS file will automatically apply to the starter kit site:

<link ref=“stylesheet” type=“text/css”  src=“/css/new_skin.css”></link>

When you modify a skin, you may need to add additional elements to a starter kit's MasterPage template in order to apply the desired layout control. To do this, the skin alters the starter kit's default MasterPage template, in this case by adding a single <div> element.

The default Runway starter kit MasterPage template contains this markup:

<asp:contentplaceholder id=“cp_top” runat=“server”>
 <div id=“top”>
<h1 id=“siteName”>
   <a href=“/”>
    <umbraco:Item runat=“server”
                  field=“siteName”
                  recursive=“true” />
    </a>
   </h1>
   <h2 id=“siteDescription”>
     <umbraco:Item runat=“server”
                   field=“siteDescription”
                   recursive=“true” />
   </h2>
    <umbraco:Macro Alias=“RunwayTopNavigation” runat=“server” />
 </div>
</asp:contentplaceholder>

A skin might add a <div> element, the <div id=“menu” class=“container”>, to apply a particular style to the starter kit's navigation sections, as follows:

<asp:contentplaceholder id=“cp_top” runat=“server”>
<div id=“top”>
  <h1 id=“siteName”>
   <a href=“/”>
    <umbraco:Item runat=“server”
                  field=“siteName”
                  recursive=“true” />
    </a>
   </h1>
   <h2 id=“siteDescription”>
    <umbraco:Item runat=“server”
                  field=“siteDescription”
                  recursive=“true” />
   </h2>

  <div id=“menu” class=“container”>
    <umbraco:Macro Alias=“RunwayTopNavigation” runat=“server” />
  </div>
</div>
</asp:contentplaceholder>

In this way an Umbraco skin can insert the HTML needed to achieve the desired styling without affecting the function of the starter kit site in any way.

Typically, a skin should only change the CSS and related images and script for a site. If needed, a skin may also change small snippets of HTML, such as to add an ID to an HTML element or create a new <div> for layout control. In this way, skins are kept as independent of a starter kit site's markup as possible and maintain maximum flexibility. A skin may also introduce a unique set of scripts, generally JavaScript, to add functionality related to the skin. In addition, a skin may include images used for layout and styling.