Articles

How to style the Nav Menu v2 for DotNetNuke 5. Covering CSS Control, how to create a multicolor menu, an image only menu, plus an image and text menu using HTML separators. Advanced techniques to help you style the DNN Nav Menu exactly as you require.

The videos contain:

• Video 1 - Introduction and Setup
• Video 2 - How to Style the NavMenu using CSS Control Class
• Video 3 - How to Target and Style First and Last Menu Items and Sub Menus (MultiColored Menu)
• Video 4 - How to Style Single Menu Items using IDs and Specific Paths
• Video 5 - How to Style Menu Items in a Specific Path (Sub Menus)
• Video 6 - How to Create an Image Only Menu
• Video 7 - How to Create an Image Only Menu, Removing Text and Displaying Images
• Video 8 - How to Display the Admin and Host Menus in an Image Only Menu
• Video 9 - Styling the Sub Menu of a Root Image Only Menu
• Video 10 - How to Create a Button Menu (Using HTML Separators)
• Video 11 - Styling the HTML Separators for the Button Menu

Total Time Length: 96min 44secs

In this tutorial we demonstrate how to package a skin for DotNetNuke 5. This method is the new method which includes a .dnn manifest file

The new DotNetNuke 5 method provides additional options when installing. For instance, you can display release notes and a license which the user must agree to before they can install the skin. It also provides the possibility to automatically install any skin objects that your skin requires at the same time, for instance if you are using a menu.

This makes the installation process for the end-user much more streamlined and much less prone to errors. However this method of packaging requires a little more work from the skin developer and that is what we cover in detail in this tutorial.

The videos contain:

• Video 1 - Introduction, How to Configure the DotNetNuke 5 Skin Package
• Video 2 - How to create thumbnail preview images for a skin
• Video 3 - How to Create the Skin, Container, Skin Object Installation Packages
• Video 4 - How to combine the Contents of the Skin, Container, Skin Object Packages
• Video 5 - Skin Package .dnn Manifest File
• Video 6 - Merging the .dnn Manifest Files
• Video 7 - Creating, Installing and Testing the Skin Installation Zip Package
• Video 8 - How to Create a Skin .dnn Manifest File Using the Components Method

Total Time Length: 89min 13secs

In this free video tutorial we demonstrate how to install skins and containers in DotNetNuke 5.

If you have used an earlier DotNetNuke version, the installation has changed slightly, or if you are a beginner to DotNetNuke this should help you get up to speed quickly.

The videos contain:

• Video 1 - How to Install a Skin in DotNetNuke 5
• Video 2 - How to Test a Skin, How to Auto Install a Skin

Total Time Length: 18min 14secs

In this tutorial we demonstrate the DotNetNuke NavMenu. The NavMenu is the default menu that comes with DotNetNuke, we demonstrate how to configure and setup the NavMenu in your DotNetNuke skins and how to create a horizontal menu, vertical menu and both a horizontal and vertical menu on the same page.

To begin the tutorial we demonstrate how to create a basic 1pane simple skin and add the NavMenu to your skin. The first menu we create is a horizontal menu, we show you how to add a background faded image to the menu, how to set the styling for hover over, the breadcrumb trail styling for the menu, (ie. the currently selected page) and how to work with the various attributes that are available for the NavMenu.

Following this we create a vertical menu and then demonstrate how to display both a vertical and horizontal menu on the same page. To finish we show you the attributes that are available for configuring which menu items should display when two menus are presented on a page.

The videos contain:

• Video 1 - Introduction, Adding a Horizontal Nav Menu to a Skin
• Video 2 - An Overview of the Nav Menu Token Attributes
• Video 3 - Initial Background Styling and Positioning for the Menu
• Video 4 - How to Style the Root Menu Items
• Video 5 - Styling the Currently Selected, Mouse Over and Sub Menu Items
• Video 6 - Styling the Sub Menu
• Video 7 - How to Create a Vertical Menu Skin
• Video 8 - How to Style the Vertical Menu
• Video 9 - How to Display a Vertical and Horizontal Menu
• Video 10 - How to Configure the Display of 2 Nav Menus
• Video 11 - Configuring Which Pages to Display in the Vertical Menu

This tutorial demonstrate the ASCX method of DotNetNuke skinning. This is the method that the professional DotNetNuke skinners use as it is much quicker to build skins in this way.

We explain the concepts of DotNetNuke ASCX skinning, how to setup Visual Web Developer Express to enable the skin token attribute suggestions, how to use ASCX skin tokens, how to make quick edits to tokens and instantly see them on your DotNetNuke website, how to display two tokens of the same type - for instance two menus, how to use skinpath for images, how to view the attributes that are available for a skin token, how to speed edit CSS code, how to quickly create additional skins using the ASCX method and instantly view them within your DotNetNuke installation, and finally how to work with ASCX Containers.

The videos cover:

• Video 1 - Introduction, Pros and Cons of ASCX Skinning
• Video 2 - Introduction to ASCX Skin Code and Setup in VWD Express
• Video 3 - How to Edit The ASCX Tokens, Configuring the Search Token
• Video 4 - How to Display 2 Nav Menus, How to Use SKINPATH for Images
• Video 5 - Skin CSS Code Speed Editing in ASCX skins
• Video 6 - Containers ASCX skinning

This is a special 34 page resource to help you learn how to use colors within CSS when designing your DotNetNuke skins.

The Color Reference Guide has been designed to give you a better idea of how the different color systems work, how to use the Hex Triplet system and the 3 character Hex CSS Shorthand.

This book comes in pdf format so you can easily refer back to it at your leisure.

This tutorial demonstrates how you can use the styles drop down list in the FCK editor to format the text.

Using the styles drop down list allows you to quickly apply CSS classes from your skin.css file and should help to ensure that administrators do not use bad practices for styling text, such as using font tags.

The videos contain:

• Video 1 - Styling the Background of the Style Dropdown List in the FCK Editor
• Video 2 - List of Available Styles for the FCK Editor
• Video 3 - Dynamic Styles in the FCK Editor
• Video 4 - How to Create Custom Styles
• Video 5 - Creating Class Styles in the Style Dropdown List
• Video 6 - How to Customise Block Quotes with Different Classes

Total Time Length: 48mins

This tutorial demonstrates how to create your own HTML templates for the FCK Editor in DotNetNuke.

HTML templates are really useful for adding repetitive content into a page; they can give you a starting point when adding content to the page, you do not need to start from scratch, you can simply select a template as a starting point and then edit the content within the template. This will help to reduce errors created by content editors.

The videos contain:

• Video 1 - Introduction, the FCKtemplates.xml file
• Video 2 - How to Create a Custom HTML Template

Total Time Length: 16mins

This tutorial demonstrates how to alert content administrators when adding incorrect HTML content to a DotNetNuke portal.

Alert styles is a new concept we have been working on for ensuring that the content administrators of a DotNetNuke portal add content using good practices.

Time Length: 10mins

This tutorial demonstrates how to configure the content area in the FCK Editor to display the same text styles as your skin.css file.

Configuring the FCK Editor in this way makes it easier to edit the content in your site and ensure that it is correctly styled.

The tutorial shows how to solve problems such as unreadable text when editing with skins that have a dark background colour, as well as how to style the Link Gallery, Image Gallery and Custom Options FCK Editor pages.

The videos contain:

• Video 1 - Introduction, Configuring the Default Editor Display Mode
• Video 2 - Fixing Text Display Problems, Creating a Custom FCK Body ID
• Video 3 - Styling the Image Gallery, Link Gallery, Custom Options FCK Editor Pages
• Video 4 - Configuring an Instance, Module or Portal FCK Editor Display Mode

Total Time Length: 31mins