. .

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 6.1 or newer
  • File access to modify skin files (e.g. FTP or WebDAV 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!

Install YAML 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

Start Thinkin' Tags - The new YAML Builder Tool

Since October 2012, a new tool is online for visually creating YAML 4 based layouts, called Thinkin' Tags. It allows 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 can be copied and pasted directly to the Skin Template. The necessary (X)HTML markup, the screen layout, as well as the layout-specific adjustments for Internet Explorer are all automatically generated.

It will take some time to get familiar with Thinkin' Tags. If you don't have the time, you can skip this and work directly with code examples on YAML.de.

Thinkin' Tags

Create Your Layout in Thinkin' Tags

Drag YAML modules you need to index.html (for example, the columns module) and take over the dimensions in the Screen layout mode:

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 Thinkin' Tags 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 "Export Project" in Thinkin' Tags (bottom left corner) and open the ZIP file
    Thinkin' Tags Export
  4. Open the following files and copy-paste the values:
    • index.html: Just copy the code within <body> ... </body> and paste it to default.ascx.
    • css/screen/layout.css: replace everything
    • css/screen/typography.css: replace everything
YAML Builder Export

Add DotNetNuke Panes

  1. Now open default.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"
  4. Assign Portal Container "YAML-Template"

Add DotNetNuke Navigation Module

DotNetNuke provides a good menu provider (DDR Menu) which can render a menu as you need it. You can use XSLT, Token or Razor templates for the menu. In our skin package, we already included a menu template that generates an unordered list. You can add following line to the default.ascx:

<dnn:MENU MenuStyle="nav/main" NodeSelector="*,0,0" runat="server" />

Note: If you get an error message, try installing the RazorHost module (from "Host > Extensions > Available Extensions"). We use a DDRMenu Template that uses Razor to generate the menu.

If you need more control over the menu, you find the DDRMenu documentation here.

Customize Layout

In the next step you will customize the YAML default layout.

Quick Overview:

  • css/screen/layout.css (screen layout) --> background color, page width, position of columns etc.
  • css/screen/typography.css (print & screen layout) --> font declaration, content elements
  • 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.

  1. Open your project stylesheet ("css/print/Project.css")
  2. Uncomment the line that includes the print css in default.ascx (line 60 by default):
    <dnn:DnnCssInclude runat="server" FilePath="css/print/layout.css" Priority="140" PathNameAlias="SkinPath" />
  3. Adapt css/print/layout.css as you need

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.

 

 

News

2013-01-24
Optimized DNN 7  YAML Template for is ready to download.


2012-10-23
Optimized YAML 4 Template for DNN > 6.1 is ready.


2011-04-29
Revised tutorial and optimized YAML template for DNN 5.x


2010-10-25
New YAML version 3.3 released and implemented in base skin --> ready to use with DotNetNuke. Release Notes


2009-12-15
Register now and we'll inform you about news! Register