Umbraco User's Guide

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 ...