. .

YAML Tutorial: How to create a DotNetNuke skin with YAML?

This tutorial will help you to start creating websites with YAML and DotNetNuke. It shows you step by step the process from a design to a tableless CSS-based skin with YAML. No matter how your design looks like, you can do it with YAML — easy for developers and absolutely accessible for end users.

Note: We do not show you the basics of CSS, but this tutorial helps to get a professional cross-browser skin template that can be used for custom design DotNetNuke projects.



Requirements

  • DotNetNuke 5.x
  • File access to modify skin files (e.g. FTP-Connection)
  • YAML basic understanding (you should at least know what YAML is)
  • DNN skinning basic knowledge (you should have created custom skins already)
  • CSS knowledge
Ready To Go!

Download Skin Package

  1. Download YAML Skin Template
  2. Install Zip File (don't apply skin and containers to the portal yet)
Download YAML DNN-Skin Package

If you need help installing skin and containers, click the help icon for more information Help

Start YAML-Builder

The YAML Builder is a tool for visually creating YAML-based layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creating of grid-based layouts by dragging and dropping sub templates.

The code generated by the builder is based on the file structure of the skin template, so that the complete result can be copied and pasted directly, without modifications. The necessary (X)HTML markup, the screen layout, as well as the layout-specific adjustments for Internet Explorer are all automatically generated.

YAML-Builder

Create Your Layout in YAML-Builder

Take over the dimensions of your screendesign to the YAML Builder:

Screendesign



Fixed layouts are easier to develop compared to elastic or liquid layouts. For this reason we use fixed units in this tutorial. However, YAML Builder also supports 'em' and '%' and the idea of modern webdesign is creating flexible or elastic websites. Please read the corresponding article in the documentation.

Export Layout from YAML-Builder to DNN Skin

  1. Connect to file system of web server (e.g. FTP-Connection)
  2. Navigate to skin path (e.g. /Portals/_default/Skins/YAML-Template)
  3. Click on "Get Code" in YAML Builder and export the generated code to the corresponding files: (use an editor like Dreamweaver or Notepad++):
    YAML Builder Export

     

  • (X)HTML Code: Just copy the code within <body> ... </body> and paste it to Blank.ascx.
  • my_layout.css: replace everything
  • basemod.css: replace everything
  • patch_my_layout.css: replace everything
YAML Builder Export

Add DotNetNuke Panes

  1. Now open Blank.ascx and add necessarily panes within the columns.
  2. Copy this code and paste it to the corresponding column:
    <div id="ContentPane" runat="server"></div>

Example:

Add ContentPane to YAML Skin

DotNetNuke must have at least 1 Pane called ContentPane, otherwise the skin can not be loaded.


Tipp: You can define a default container for each pane, e.g. if you always need a blue box in right column.
Example: <div id="NewsPane" runat="server" containertype="G" containername="YAML-Template" containersrc="News.ascx">Help

How to assign default containers to panes?

  • containertype="G" means that the container is located in /Portals/_default
    containertype="L"     means that the container is located in Portal folder, like /Portals/0 or /Portals/2/
  • containername="YAML-Example" means that the folder where the container files (e.g. News.ascx) are located is called "YAML-Example" (usually same name as skin folder)
  • containersrc="News.ascx" means that the file name of default container is called "News.ascx"

Apply Skin and Containers in DotNetNuke

  1. Navigate to Site Settings (formerly: Portal Settings)
    Portal Settings
  2. Expand "Appearance" section
  3. Assign Portal Skin "YAML-Template - Blank"
  4. Assign Portal Container "YAML-Template"


Now your website should look like this:

YAML Default Layout Skin in DotNetNuke

DotNetNuke skin with default YAML layout properties.

Add DotNetNuke Navigation Module

In order that your skin can display the pages/tabs of DotNetNuke you need to replace the static navigation (generated by YAML Builder within <div id="nav"> ... </nav>) with a DotNetNuke navigation component . Remember that a menu should be rendered as an unordered list (e.g. <ul><li>< a href="/Home.aspx" title="Home" /></li></ul>). Unfortunately, the included navigation provider of DotNetNuke is using tables by default. However, you can adapt the rendering mode by adding some parameters:

<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal" CSSControl="mainMenu">
<CustomAttributes>
<dnn:CustomAttribute Name="RenderMode" Value="UnorderedList"/>
</CustomAttributes>
</dnn:NAV>

There are several other modules or "skin objects" available on Snowcovered or Codeplex. If you need a fully templateable navigation provider we recommend Snapsis CSS NavMenu. This module allows you to build any menu layout and gives you a lot of flexibility.

Customize Layout

In the next step you will customize the YAML default layout. If you're not familiar with the folder/file structure of yaml yet, you should have a look at the documentation: http://www.yaml.de/en/documentation/css-components/the-central-stylesheet.html.

Quick Overview:

  • Screen/Basemod.css (screen layout) --> background color, page width, position of columns etc.
  • Screen/Content.css (print & screen layout) --> font declaration, content elements
  • Screen/Wysiwyg.css (html editor layout) --> can be used for your html editor (e.g. defined in web.cfg with "CssFiles" property for Telerik Rad Editor)
  • Patches/PatchDotNetNuke.css --> fix layout for DotNetNuke admin view (e.g. ControlPanel)
  • Patches/PatchProject.css (IE7 & IE6) --> define here layout specific things for IE7 and/or IE6
    (Tipp: * html #AnyElement will only be rendered by IE 6)
  • Project.css --> central stylesheet (necessary CSS components are integrated with the @import rule)
  • YAML folder --> never touch the core files located in folder "yaml"

Print Layout

Preparing a website for a paper version means a switch from an interactive to a passive medium. Longer content must come to terms with page breaks and links are no longer clickable on paper, so if the corresponding URL is not visible, important information is lost. All these optimizations are already included in YAML and helps you to provide a professional website on any medium.

Learn more about layout adjustments for printing with YAML: http://www.yaml.de/en/documentation/css-components/layout-for-print-media.html

  1. Open your project stylesheet ("CSS/Project.css")
  2. Import one of the prepared print stylesheets:
    /* import print layout | Druck-Layout einbinden */
    @import url(../yaml/print/print_003_draft.css);

Congratulations!

You just got your own DotNetNuke skin with YAML. You can use this process for every kind of layouts.

If you have questions, please have a look at the FAQ's below or read the YAML documentation carefully.

There is also an official Forum for questions about using YAML with DotNetNuke.

 

FAQ

  • Why is my skin not displayed correctly when I rename "Blank.ascx"?

    You also have to rename "Blank.doctype.xml" to render with XHTML 1.0 transitional. Fallback doctype can also be defined in Host Settings of DotNetNuke.

  • Is there also a solution in YAML to optimize my website for the iPhone or other smartphones?

    Just use media queries to adress your mobile Screenlayout, e.g. <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://www.domain.com/css/mobile.css" type="text/css" />In addition you should insert a meta tag for iPhone scaling and rotation settings, e.g.:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

  • Why does the YAML fullheight layout not work with DNN 5.x?

    It works, but you need to add the height of 100% to "form#Form", e.g. body, html, form#Form { height: 100%!important; }

 

Aktuell

29.04.2011

Komplett überarbeitetes Tutorial und neue, optimierte YAML Vorlage für DNN 5.x steht ab sofort zum Download bereit

25.10.2010
YAML Version 3.3 im Basis Skin integriert Release Notes

11.01.2010
YAML Version 3.2.1 mit kleinen Optimierungen veröffentlicht und bereits im DNN&YAML Basis Skin integriert. Release Notes

15.12.2009
Jetzt registrieren und wir informieren dich über Neuigkeiten! weiter »