Umbraco - Web developer skinning documentation

Click here to load reader

  • date post

    02-Apr-2015
  • Category

    Documents

  • view

    3.056
  • download

    1

Embed Size (px)

Transcript of Umbraco - Web developer skinning documentation

UMBRACO I/S

Umbraco SkinsCreating a skin for UmbracoUmbraco 12/23/2010

This document walks through the different components of a skin for Umbraco. It is based on the Umbraco Simple Starter Kit which serves as a simple base for applying your own skins. Important note: The descriptions and screen shots in this document are preliminary, based on a beta version, and are subject to change prior to final release.

ContentsAbout Skins ........................................................................................................................................................ 4 How do Skins Work in Umbraco? .............................................................................................................. 4 What Can a Skin Change? .......................................................................................................................... 4 How Do You Customize a Skin? ................................................................................................................. 5 Changing Skins ........................................................................................................................................... 6 Advanced Skins .............................................................................................................................................. 7 The Structure of a Skin .................................................................................................................................. 9 What Does a Skin Package Contain? ......................................................................................................... 9 Supported Website Starter Kits ................................................................................................................... 10 Applying a Skin from the Installation Wizard .............................................................................................. 11 Creating Skins .................................................................................................................................................. 12 Steps to Create a Skin .................................................................................................................................. 12 Required Files .......................................................................................................................................... 12 The Skin Manifest .................................................................................................................................... 13 Optional Files ........................................................................................................................................... 16 Packaging the Skin ................................................................................................................................... 16 Testing the Skin ........................................................................................................................................... 16 Submitting the Skin to the Repository ........................................................................................................ 17 Enabling a Starter Kit to Support Skins .................................................................................................... 17 Walkthrough: Creating a Skin for Simple Starter Kit ...................................................................................... 18 Step 1 Install the Starter Kit Developer Package .................................................................................. 18 Step 2 Create a Stylesheet .................................................................................................................... 18 Step 3 - Modifying the Template HTML .................................................................................................. 18 Step 4 - Preparing and Packaging the Skin ............................................................................................. 18 Step 5 - Testing a Skin .............................................................................................................................. 19 Advanced Skin Tasks .................................................................................................................................... 19 Altering Template Markup ...................................................................................................................... 19 Allowing for User customization of a Skin ............................................................................................... 20 Reference......................................................................................................................................................... 22 Dependency Types ...................................................................................................................................... 22 Text .......................................................................................................................................................... 22 Image ....................................................................................................................................................... 22 2 umbraco.org | About Skins Beta | Umbraco I/S

Color ............................................................................................................................................................ 22 Option .......................................................................................................................................................... 23 Slider ............................................................................................................................................................ 23 Task Types ................................................................................................................................................... 23 ModifyCSS Task........................................................................................................................................ 23 ModifyTemplate Task .............................................................................................................................. 24 AddStyleSheetToTemplate Task .............................................................................................................. 25

3

umbraco.org | About Skins Beta | Umbraco I/S

About SkinsHow do Skins Work in Umbraco? When you apply a skin to an Umbraco site, the skins styles are used in place of the existing sites styles. This is accomplished simply by providing a unique CSS file for the skin, including any images required to achieve the layout defined by the CSS. A skin can also add or change small portions of the sites HTML Templates if needed. In addition, a skin can be customized by the user by adding such items as custom label text or custom logo images. All CSS, images, and HTML changes can be rolled back to the default skin for a site as Umbraco creates a backup of the default skin when a new skin is applied. By default, skins can be applied to the Umbraco Starter Kits; Simple, Blog, Personal, and Business. In order to apply or change a skin, the user simply navigates to the Settings section, selects the Master Template, then clicks the Modify Template Skin button. Umbraco will launch the Skin Customization dialog in the Canvas Editing mode.

What Can a Skin Change? The recommend approach is that a skin changes only 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 element or create a new for layout control. In this way, skins are kept as independent of a sites markup as possible and maintain maximum flexibility. A skin may also introduce a unique set of script, generally javascript, to add functionality related to the skin. In addition, a skin may include images used for layout and styling. Skin Example For example, in the default Starterkit.Master Template contains this markup:

4

umbraco.org | About Skins Beta | Umbraco I/S

A skin might add a element to apply a particular style to the navigation sections, as below:

Notice in both cases the markup remains unchanged with the exception of the added by the skin to apply a particular style to the given element, in this case the umbTopNavigation macro rendered output. In each case the underlying Document Types and Content remain unchanged. In order to apply the skin, the user only needs to select the desired skin from the Skin dashboard in the sites Settings section. The markup, styles, and images associated with the skin are automatically applied by Umbraco. How Do You Customize a Skin? A skin can be further customized by editing the sites Homepage in Canvas mode. Once the sites Homepage is opened in Canvas, the customize skin button will open an dialog containing any properties that can be customized.

The dialog will contain input fields for any custom properties the skin contains.

5

umbraco.org | About Skins Beta | Umbraco I/S

Once a user inputs or selects the custom property values and clicks OK, the new values are used in place of the default values. These custom properties my be anything from text, as above, to images and color pickers. An example of an image dependency type is shown below:

Changing Skins By clicking on the change skin link the user can easily select a different skin available for the current Template, or remove the skin by selecting the I prefer not to install a skin link. By clicking the customize link the user is returned to the customize skin dialog above.

6

umbraco.org | About Skins Beta | Umbraco I/S

Advanced SkinsA skin is located in a unique folder which contains all required files. Umbra