Articles

Current Articles | Categories | Search | Syndication

Articles from Tutorials: Skinning
In this tuotorial, we demonstrate how to convert the standard DotNetNuke Announcements module into a jQuery Animated Content Slider. We show you how to adapt the announcements module layout template code and how to implement the jQuery files and CSS.

The jQuery animation allows you to present your announcements in a visually impressive and intuitive way. See the DNN jQuery Announcements Slider in action.

In this tutorial we cover:

Video 1 - Preparing the Announcements Module and adding the jQuery Files
  • Creating a new page on your DNN website to contain the slider
  • Adding the Announcements Module to the page
  • How to create new announcements
  • How to add the required files to your skin folder
Time Length: 6min 23sec

Video 2 - Adding the jQuery and CSS Styles
  • Opening the demo code
  • Adapting the Announcements module template code
  • How to add the jQuery scripts to your skin ASCX file.
  • How to add the slider control code to your skin ASCX file.
  • How to add the required CSS styles into your skin.css file
  • Making the page live
  • Testing the jQuery Announcements module.
Time Length: 7min 30secs

Total Time Length: 13min 53secs
Read More..
This video tutorial is the first in a series showing you how to convert the standard DotNetNuke Announcements module into a jQuery Animated Content Slider. We show you how to adapt the announcements module layout template code and how to implement the jQuery files and CSS.

The jQuery animation allows you to present your announcements in a visually impressive and intuitive way. See the DNN jQuery Announcements Slider in action.

In this first tutorial we cover:

Video 1 - Preparing the Announcements Module and adding the jQuery Files
  • Creating a new page on your DNN website to contain the slider
  • Adding the Announcements Module to the page
  • How to create new announcements
  • How to add the required files to your skin folder
Time Length: 6min 23sec
Read More..
In this tutorial we provide a detailed demonstration of how to implement and customize the DDR Menu by DNN Garden. The DDR Menu comes complete with 6 different menu styles such as TreeView and Mega-Menu. The menus can simply be installed as a direct replacement for the standard DNN Solpart or DNN Nav menus to aid in search engine optimization. We show you how to achieve the best from each menu and how to fully customize the Mega menu styling to match your skin.

The videos contain:
  • Video 1 - Introduction, Downloading, Installation and Skin Setup
  • Video 2 - Adding the DDR Menu to a Skin and How to Change Animation Settings
  • Video 3 - Implementing the DDR Treeview Menu
  • Video 4 - Implementing the DDR Superfish and Mega Menu
  • Video 5 - Styling the DDR Mega Menu
  • Video 6 - Styling the Mega Menu and Using the Menu Module
Total Time Length: 55min 38secs
Read More..
In this tutorial we review and walk you through the Nucleus Skin Designer for DotNetNuke. We adapt the included Reactor skin and show you how to create a custom skin to your own requirements, No HTML knowledge required, ideal for beginners!

The videos contain:
  • Video 1 - Introduction, Installing the Module, Applying a Nucleus Skin
  • Video 2 - The Nucleus Menu, Adding and Removing Optional Tokens, Styling a Skin
  • Video 3 - Using the Nucleus Skin Designer Inspector, Styling the Nav Menu
  • Video 4 - Designing Containers with Nucleus Skin Designer
  • Video 5 - Designing and Applying Containers to a DNN Skin
Total Time Length: 51min 31secs
Read More..
In this tutorial we demonstrate how to use Super Stylesheets in DotNetNuke for quickly and easily designing the layout of your DotNetNuke skin.

Super Stylesheets are ideal for both beginner and experienced skin designers, the advantage of Super Stylesheets is that you can easily create a skin layout which works in all browsers without the need to learn complex CSS techniques.

We show you how to build a skin from the very beginning using Super Stylesheets.

The videos contain:
  • Video 1 - Introduction to the Super Stylesheets DNN Layouts and Initial Setup
  • Video 2 - Setting Up the Skin Layout Template Code
  • Video 3 - Using the ThreeCol-Portal Layout Template for a Skin
  • Video 4 - How to Add Tokens to the Skin
  • Video 5 - Setting Background Colors for Content Panes and Creating CSS Containers
  • Video 6 - How to Create a Footer Area and Reset the Default Styles
  • Video 7 - How to Style the Text in the Content, Left and Right Panes
  • Video 8 - SEO Skin Layouts for DotNetNuke Tokens
  • Video 9 - Creating Several Skin Layouts Using the Layout Templates
  • Video 10 - Further Layout Templates and MultiLayout Templates
  • Video 11 - SEO Layout Template Skins
  • Video 12 - Final SEO Positioning of the Skin Code
Total Time Length: 97min 53secs
Read More..
In this tutorial we demonstrate how to use Skin Object Tokens in DotNetNuke v5 and above. Skin Object tokens are a new skinning method introduced in DotNetNuke 5 for adding tokens into a DotNetNuke skin.

A Skin Object Token is a web user control, it covers skin elements such as the logo, menu, search, login links, date, copyright, languages, links, banners, privacy, terms of use etc.

This new Object token method has been introduced into DotNetNuke with the idea of making it simpler to add a skin object into a DotNetNuke skin.

The videos contain:
  • Video 1 - Introduction to HTML Object Token Skinning
  • Video 2 - Basic Styling of a Skin and Creating Multiple Content Panes
  • Video 3 - Styling, Control Panel, Login and Register Skin Object Tokens
  • Video 4 - Packaging, Installing, Testing and Viewing the ASCX Version of the Skin
  • Video 5 - Viewing the Attributes for Skin Object Tokens, Logo Token, Search Token
  • Video 6 - Breadcrumb Token, Text Token and Localization, Links Token
  • Video 7 - More Skin Tokens and Token Replacement
  • Video 8 - Demonstration of the Object Tokens and Bug Fixing
Read More..
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
Read More..
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
Read More..
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
Read More..
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
Read More..
Paging - Page: 1 of 7
Used
By
Testimonials