SwissChecklist

Checkliste: 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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

  • Choose Layout Concept (fix, flexible, liquid)

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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)

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    min-width and max-width is necessary for flexible or liquid layouts.

    Minimum & Maximum Widths for Flexible Layouts

  • Check Usability

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    • 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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

  • Ensure you have a Working DotNetNuke Installation

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

  • Copy Generated Code of YAML Builder to the Skin Files

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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.)

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen

  • Optimize Layout for Print

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    Layout Adjustments for Printing

  • Add WAI-Aria Landmarks for most important parts of the website

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

  • Neuer Schritt

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
Diese Checkliste verwenden

Vorschau/Drucken

Verwenden

Verändern

Sortieren

Vorlage Löschen