SwissChecklist

Checklist: Create DotNetNuke Skin with YAML (CSS-Framework)

YAML ("Yet Another Multicolumn Layout") is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. YAML also integrates well with jQuery, the JavaScript framework of choice in DotNetNuke.

This checklist shows you the steps how to create a custom DotNetNuke skin with YAML.
  • Preparation and Design

    Show Details Show Substeps Show Substeps Show Substeps
  • Choose Layout Concept (fix, flexible, liquid)

    Show Details Show Substeps Show Substeps Show Substeps
    Fixed Layouts use the unit pixel (px). This type of layout neither adjusts to the viewport (visible area of browser) nor to the default font size in web browser.

    Flexible Layouts use percent (%) as unit. This type of layout adjusts automatically to the viewport respectively to users screen resolution.

    Liquid Layouts are based on the units "em" or "ex". Such layouts grow and shrink everything when the user changes the text size (other layouts only modify the text size).

    Note: Fixed font sizes are a problem in many browsers (for example, IE6) because the user often cannot change the settings. For accessibility it is therefore a must to use relative units (em).
  • Create Screendesign (e.g. in Adobe Fireworks or Adobe Photoshop)

    Show Details Show Substeps Show Substeps Show Substeps
  • Ensure the measurement is defined (e.g. width, min-width, max-width)

    Show Details Show Substeps Show Substeps Show Substeps
    min-width and max-width is necessary for flexible or liquid layouts.

    Minimum & Maximum Widths for Flexible Layouts
  • Check Usability

    Show Details Show Substeps Show Substeps Show Substeps
    • Is the font readable? (font size, color, font type)
    • Enough contrast between font color and background color?
    • Look the links like links (clickable)
    • Is the position of the elements as usually? (e.g. dropdown-arrows right of the selection)
    • The main navigation should not have more than 7 links (otherwise create a system navigation for "about us", "contact" etc.)
  • Export the Layout

    Show Details Show Substeps Show Substeps Show Substeps
    Take care of the file type and compression (jpg for photos, png or gif for layout graphics).
  • Convert Layout to a DotNetNuke Skin with YAML

    Show Details Show Substeps Show Substeps Show Substeps
  • Ensure you have a Working DotNetNuke Installation

    Show Details Show Substeps Show Substeps Show Substeps
  • Download current "DotNetNuke & Yaml Base Skin" from http://yaml.dnn.ch

    Show Details Show Substeps Show Substeps Show Substeps
  • Install Skin on your DotNetNuke Portal (do not Apply the Skin yet!)

    Show Details Show Substeps Show Substeps Show Substeps
    Skin Installation in DotNetNuke 4
    1.Go to "Skins" in admin menu"
    2.Click "Upload Skin"
    3.Choose downloaded skin file (.zip)
    4.Apply the skin. Done!

    Skin Installation in DotNetNuke 5
    1.Go to "Skins" in host menu"
    2.Click "Install New Skin"
    3.Choose downloaded skin file (.zip) and click "Next"
    4.This message appear:"This package does not have a manifest. Old Skins and Containers do not contain manifests. If this is a legacy Skin or Container Package please check the check box below and reupload the package." Choose Legacy Skin.
    5.Choose the skin file again and click "Next".
    6.Apply the skin. Done!
  • Start YAML Builder http://builder.yaml.de

    Show Details Show Substeps Show Substeps Show Substeps
  • Build your Screendesign with YAML Builder (adapt the Columns, Widths) as good as possible

    Show Details Show Substeps Show Substeps Show Substeps
  • Copy Generated Code of YAML Builder to the Skin Files

    Show Details Show Substeps Show Substeps Show Substeps
    1. Click on "Get Code" in YAML Builder
    2. Copy in the tab "(X)HTML Code" everything within <body> </body> and paste it on /Portals/0/Skins/YamlBasic to the skin file Blank.ascx.
    3. Usually the code within the tab "my_layout.css" has not to be copied
    4. Copy everything within the tab "basemod.css" and overwrite the content of /Portals/0/Skins/YamlBasic/CSS/Screen/Basemod.css
    5. Copy everything within the tab "patch_my_layout.css" and paste it to /Portals/0/Skins/YamlBasic/CSS/Patches/PatchBlank.css
  • Add a ContentPane and other panes in the DNN skin

    Show Details Show Substeps Show Substeps Show Substeps
    1. open the file /Portals/0/Skins/YamlBasic/Blank.ascx
    2. add the ContentPane in the desired column, e.g. within <div id="col3"> <div id="ContentPane" runat="server"></div> </div>
    3. add more panes, e.g. <div id="NewsPane" runat="server" containertype=L" containername="YamlBasic" containersrc="News.ascx"></div>

    A ContentPane is always necessary that the skin is valid for DotNetNuke!
  • Integrate Navigation Module

    Show Details Show Substeps Show Substeps Show Substeps
    DotNetNuke uses "Solparts Menu" as default navigation module. Unfortunately it generates a lot of (semantically wrong) tables instead of a list of link-items.

    We recommend to use 3rd-party module, for example Snapsis.
  • Integrate DotNetNuke Login

    Show Details Show Substeps Show Substeps Show Substeps
    Add it to the footer:
    <dnn:login runat="server"></div>
  • Adapt your Layout in basemod.css (background-color, margin etc.) and content.css (font-size, links etc.)

    Show Details Show Substeps Show Substeps Show Substeps
  • Optimize Layout for Print

    Show Details Show Substeps Show Substeps Show Substeps
    Layout Adjustments for Printing
  • Add WAI-Aria Landmarks for most important parts of the website

    Show Details Show Substeps Show Substeps Show Substeps
    e.g.

    <div id="header" role="banner"> </div>
    <div id="nav" role="navigation"> </div>
    <div id="col2" role="main"> </div>

    you can find all roles here: http://www.w3.org/WAI/PF/aria/roles#role_definitions
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort