DNN Creative Magazine for DotNetNuke

Creating a DotNetNuke jQuery Announcements Slider (Video Tutorial))

andyadmin — Mon, 20 Jun 2011 10:00:00 GMT

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

Creating a DotNetNuke jQuery Announcements Slider (Video 1 of 2)

andyadmin — Thu, 19 May 2011 10:00:00 GMT

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

DNN Garden - DDR Menu for DotNetNuke - 6 Videos

andyadmin — Tue, 02 Nov 2010 10:49:00 GMT

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

DotNetNuke Nucleus Skin Designer Tutorial - 5 Videos

andyadmin — Thu, 02 Sep 2010 10:20:00 GMT

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

Skinning with DotNetNuke 5 Super Stylesheets Layouts - 12 Videos

creativehost — Tue, 04 May 2010 04:46:00 GMT

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

Skin Object Tokens for DotNetNuke 5 - 8 Videos

creativehost — Sat, 03 Apr 2010 08:37:00 GMT

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

Nav Menu v2 for DotNetNuke 5 - 11 Videos

creativehost — Wed, 06 Jan 2010 03:29:00 GMT

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

How to Package a Skin for DotNetNuke 5 - 8 Videos

creativehost — Mon, 21 Sep 2009 02:24:00 GMT

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

How to Install a Skin in DotNetNuke 5 - 2 Free Videos

creativehost — Tue, 01 Sep 2009 09:25:00 GMT

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

DotNetNuke Nav Menu Skinning - 11 Videos

creativehost — Tue, 04 Aug 2009 09:00:00 GMT

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

DotNetNuke ASCX Skinning for Professional Skinners - 6 Videos

Richard Wootton — Mon, 29 Jun 2009 17:19:00 GMT

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

Color Reference Guide

Richard Wootton — Mon, 01 Dec 2008 07:01:00 GMT

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.

FCK Editor Formatting Style Definitions in DotNetNuke - 6 Videos

creativehost — Wed, 01 Oct 2008 05:10:00 GMT

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

FCK Editor HTML Templates in DotNetNuke - 2 Videos

creativehost — Wed, 01 Oct 2008 05:05:00 GMT

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

DotNetNuke Content Administrator Alert Styles - Video

creativehost — Wed, 01 Oct 2008 04:53:00 GMT

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

FCK Editor Skin Styles Preview in DotNetNuke - 4 Videos

Richard Wootton — Tue, 02 Sep 2008 05:20:00 GMT

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

How to Change the FCK Editor Skin in DotNetNuke - 2 Videos

Richard Wootton — Tue, 02 Sep 2008 05:12:00 GMT

This tutorial shows how to change the skin of the FCK Editor.

The tutorial demonstrates how to download a new FCK Editor skin and upload it to your DotNetNuke portal. We then show you how to edit the web.config file settings to allow the new skin to be selected within the FCK Editor. Finally we demonstrate how to apply the new skin to the FCK Editor in DotNetNuke.

The videos contain:

Video 1 - Introduction, Uploading FCK Skins, Making the Skins Available
Video 2 - Applying the FCK Editor Skin to the DotNetNuke Portal

Total Time Length: 13mins

How to Create Print Stylesheets for DotNetNuke Skins - 7 Videos

creativehost — Mon, 04 Aug 2008 01:18:00 GMT

This tutorial demonstrates the steps to create a printable view of your web pages, so a user can simply go to the file menu in their browser window and select print. This presents the user with a printable, user friendly, readable page.

The tutorial shows you how to create a print stylesheet for your DotNetNuke skin, how to format the layout of the print stylesheet, how to change the text font so that it is suitable for reading when printed out, how to set the width of the stylesheet, how to format links, and also how to display the full URL of a link next to a text link so that it can be viewed on the printed page. Finally, we demonstrate how to select which content to make available for printing and how to remove content not required for printing, this is an essential technique for removing elements such as the menu and login links which are not required for a printed page.

The videos cover:

Video 1 - Introduction, Considerations, Setup
Video 2 - Current Print Preview, Creating the Print CSS
Video 3 - Remove Elements from the Printed Page
Video 4 - Repositioning the Content, Removing Content Styling
Video 5 - Styling the Content Pane, Re-styling the Headings
Video 6 - How to Style Links for the Printed Page
Video 7 - Styling Unordered lists, Method Two for Print Stylesheets using Javascript

Total Time Length: 50mins

CSS Reference Book - 112 page PDF

creativehost — Mon, 04 Aug 2008 01:14:00 GMT

The CSS reference book is a special 112 page resource to help you learn how to use CSS for your DotNetNuke skins.

The CSS reference book demonstrates all of the currently supported CSS properties used within CSS 2.1.

The book comes in pdf format, so this makes it easy to quickly search for a CSS property and find the information you require, complete with examples and images.

Dark Ritual - Free DotNetNuke CSS Skin

Richard Wootton — Mon, 30 Jun 2008 09:53:00 GMT

Dark Ritual is a free, tableless, fixed width, XHTML compliant website. This skin comes with 2 layouts in 2 versions:

Index 3 pane skin with text header
Index 3 pane skin with logo
Admin 1 pane skin with text header
Admin 1 pane skin with logo

It also comes with 3 containers:

h1 title
h2 title
transparent, no title container

Bitter Sweet - Free DotNetNuke CSS Skin

Richard Wootton — Mon, 30 Jun 2008 08:00:00 GMT

Bitter Sweet is a free, tableless, fixed width, XHTML compliant website design. This skin comes with 2 layouts in 2 versions:

Index 2 pane skin with text header
Index 2 pane skin with logo
Admin 1 pane skin with text header
Admin 1 pane skin with logo

It also comes with 3 containers:

h1 content pane
h2 right pane
transparent, no title container

Greenery - Free DotNetNuke CSS Skin

Richard Wootton — Mon, 30 Jun 2008 08:00:00 GMT

Greenery is a free, tableless, W3C-compliant website design. This skin comes with 3 variations

greenery – index (main skin)
greenery – index_submenu (main skin with a sub menu in the right pane)
greenery – admin (single pane skin for use with admin pages)

It also comes with 2 containers:

h1 title
transparent, no title container

Zenlike - Free DotNetNuke CSS Skin

Richard Wootton — Mon, 30 Jun 2008 08:00:00 GMT

Zenlike 1.0 is a free, lightweight, tableless, fluid W3C-compliant website design. This skin comes in 2 different types:

index_with_logo - uses the logo from the admin menu / site settings
index - uses text for the site header which you can edit in the skin files

It also comes with 5 containers:

h4 title box
h4 title no bot line
h4 title with bot line
top pane h3 title
transparent no title

Lazy Days - Free DotNetNuke CSS Skin

Richard Wootton — Mon, 30 Jun 2008 08:00:00 GMT

Lazy Days is a free, tableless, W3C-compliant website design.This skin comes in 3 variations:

index – a 2 pane fluid skin
index_sub_menu - a 2 pane fluid skin with a sub menu
1 pane – a 1 pane fluid skin, suitable for the administration area in DotNetNuke

It also comes with 6 containers:

h1 title gradient
h1 title
h2 title gradient
h2 title
h3 title
transparent no title

How to style and skin the search box in DotNetNuke - 2 Videos

creativehost — Tue, 29 Jan 2008 19:52:00 GMT

In this video tutorial we demonstrate how to style the search box in DotNetNuke skins. We walk you through how we applied the styling to the search box in the free ‘internet sharing’ skin.

This covers how we expanded the width of the search box, how to use a graphic for the search box, how to style the text that the search box uses, how to style the search link as a button and how to replace the search link with an image.

How to create a DotNetNuke CSS skin from an XHTML template (part 2) - 7 Videos

creativehost — Wed, 02 Jan 2008 10:59:00 GMT

This tutorial is part 2 of the How to create a DotNetNuke skin from an XHTML template tutorial.

In Part 2 of the tutorial we cover how to create the containers, semantically coding the content, styling and formatting the content, overriding the DotNetNuke default classes, how to easily add the additional skin layout variations, and how to setup and create a print.css file so that you can style your own print layout of the skin.

The videos cover:

Video 1 - Creating the containers
Video 2 - Text styling and overriding the default DotNetNuke styles
Video 3 - Styling the header tags
Video 4 - Styling content based on the content pane location
Video 5 - Creating layout variations
Video 6 - Creating an additional styled menu
Video 7 - How to create a print layout (print.css)

Total Time Length: 60mins

How to create a DotNetNuke CSS skin from an XHTML template (part 1) - 6 Videos

creativehost — Mon, 03 Dec 2007 04:43:00 GMT

In this tutorial we demonstrate how to convert a free open source XHTML pure CSS template into a DotNetNuke skin.

We demonstrate how to convert the andreas01 template created by Andreas Viklund.

This tutorial is in two parts, part 1 covers how to transfer the structure of an XHTML template into a DotNetNuke skin and how to adapt it to create the content panes, the menu and various DotNetNuke tokens.

The videos cover:

Video 1 - Introduction and preparations
Video 2 - Creation of content panes
Video 3 - Login links and packaging skin
Video 4 - How to fix layout display problems
Video 5 - How to create the menu
Video 6 - Adding the search box and validating the skin

Total Time Length: 52mins

Internet Sharing – Free DotNetNuke CSS Skin

creativehost — Tue, 30 Oct 2007 03:59:00 GMT

This free XHTML / CSS website template is available to use without any limitations. It can be used on a non-commercial site as well as on a commercial one.

The skin contains six content panes:

Top pane
Content pane
Content left pane
Content mid pane
Content right pane
Right pane

And also comes with 6 containers:

h1 container
h2 container
h3 container
h3_lowercontent_panes
h3_right_pane
transparent, no title container

Pure CSS SEO Layouts for DotNetNuke skins - 7 Videos

creativehost — Thu, 27 Sep 2007 09:54:00 GMT

In this tutorial we demonstrate how to create pure CSS skin layouts that are Search Engine Optimized. We achieve this by taking advantage of using absolute positioning and floats.

This technique was developed for the new DNN Creative skin. Following the release of the DNN Creative skin we received several enquiries regarding how we placed the main text content at the top of the source code and the less important content towards the end.

Ordering the source code helps search engines to easily find and index the important content of your website and therefore will help to improve your search engine results.

In this tutorial we demonstrate the techniques using a stripped down version of the DNN Creative skin.

The videos cover:

Video 1 - Introduction, file preparations and initial styling
Video 2 - Creating the content panes
Video 3 - Layout of the content panes
Video 4 - Styling the content panes and footer
Video 5 - Positioning the content panes and menu
Video 6 - Positioning additional skin tokens
Video 7 - Positioning horizontal banner pane and IE hacks

Total Time Length: 64mins

Multiple skin layouts using skinname.css - Video

creativehost — Thu, 27 Sep 2007 09:49:00 GMT

This tutorial is part 2 of the Pure CSS Search Engine Optimized Skin Layouts tutorial. We previously demonstrated how to create a 3 pane skin using floats and absolute positioning. We are now going to demonstrate how to create multiple skin layouts using a skinname.css file.

Using the skinname.css file technique allows you to easily create variations of skins while also reducing the amount of code placed in the skin.css file.

In this video tutorial we create a 2 pane version of the CSS skin using minimal code changes.

Time Length: 8mins

Curiously Green - Free DotNetNuke CSS Skin

creativehost — Mon, 06 Aug 2007 08:46:00 GMT

Curiously.green1.0 is a free, lightweight, tableless, W3C-compliant skin. This skin comes in 2 different types:

with_logo - uses the logo from the admin menu / site settings
no_logo - uses text for the site header which you can edit in the skin files

It also comes with 5 containers:

h1 container
h2 container
h3 container
transparent, no title container
box (a highlighted container)

FreeStyle – Free DotNetNuke CSS Skin

creativehost — Mon, 06 Aug 2007 08:42:00 GMT

FreeStyle is a free XHTML compliant pure CSS skin. This skin comes in 2 different types:

index_logo - uses the logo from the admin menu / site settings
index - uses text for the site header which you can edit in the skin files

It also comes with 4 containers:

h1 container
h2 container
h3 container
transparent, no title container

Summer Breeze – Free DotNetNuke CSS Skin

creativehost — Mon, 06 Aug 2007 08:39:00 GMT

Summer Breeze is a free XHTML pure CSS skin. This skin comes in 2 different types:

index_logo - uses the logo from the admin menu / site settings
index - uses text for the site header which you can edit in the skin files

It also comes with 4 containers:

h1 container
h2 container
h3 container
transparent, no title container

Andreas 09 – Free DotNetNuke CSS Skin

creativehost — Mon, 06 Aug 2007 08:35:00 GMT

Andreas 09 is a free XHTML/CSS skin. This skin comes with 3 different layouts and 7 colours:

3 panes
2 panes with the side menu on the left
2 panes with the side menu on the right

It also comes with 4 containers, they are automatically styled depending on the pane you insert them into:

h1 container
h2 container
h3 container
transparent, no title container

Andreas 01 – Free DotNetNuke CSS Skin

creativehost — Mon, 06 Aug 2007 08:31:00 GMT

Andreas 01 is a free XHTML/CSS skin. This skin comes with 3 different layouts:

3 panes
2 panes with the menu on the left
2 panes with the menu on the right

It also comes with 4 containers:

h1 container
h2 container
h3 container
transparent, no title container

XHTML Compliant DotNetNuke 4.4. and 4.5 part 2 - 2 Videos

creativehost — Fri, 27 Apr 2007 09:04:00 GMT

In this tutorial we continue the XHTML compliance tutorials from issue 19. Since the tutorials were released, a few additional code changes were discovered through discussions in the forum on DNN Creative, so, this tutorial outlines those additional changes.

In the issue 19 tutorials we used DotNetNuke v4.4, for this tutorial we use v4.5.1 and we outline any differences between the 2 versions.

We also demonstrate how to enable the account login module to become XHTML compliant, this involves editing the core code using Visual Studio 2005. We have created a separate tutorial so that you can learn how to install the DotNetNuke source code using Visual Studio 2005.

How to create an XHTML Compliant DotNetNuke 4.4 - 3 Videos

creativehost — Wed, 28 Feb 2007 03:04:00 GMT

DotNetNuke has always caused problems by generating non-compliant XHTML code, so even if your skin is fully XHTML compliant, your DotNetNuke portal will not pass the W3C XHTML validation tests because the core code generates non-compliant code.

In these 3 video tutorials we walk you through the steps needed to enable your DotNetNuke installation to become XHTML compliant. These steps will only work with the latest 4.4.x version of DotNetNuke.
How to create an XHTML Compliant DotNetNuke 4.4

How to select DOC TYPES in DotNetNuke 4.4.x - Video

creativehost — Wed, 28 Feb 2007 02:58:00 GMT

In the latest version of DotNetNuke 4.4 .x, a new function has been introduced which allows you to change the DOC TYPE of a document directly within a skin. This is essential for CSS skins.

The video covers:

How to switch DOC TYPES in DNN 4.4
Preparations
Viewing the current render mode
How to create a doctype.xml file
How DotNetNuke uses the doctype.xml file
Testing the new skin
Confirming standards compliance mode and quirks mode for the skins installed on the portal

Time Length: 9min
How to select DOC TYPES in DotNetNuke 4.4.x

How to fix the [DROPDOWNACTIONS] token bug in DotNetNuke 4.4.1

creativehost — Wed, 28 Feb 2007 02:51:00 GMT

In previous skinning tutorials, when working with pure CSS skins, we recommended to remove the Solpart Menu from a container and to use the [DROPDOWNACTIONS] token instead as it provides a performance benefit.

In the latest version of DotNetNuke 4.4.1 there is currently a bug with the [DROPDOWNACTIONS] token. There is however a simple fix ...
How to fix the [DROPDOWNACTIONS] token bug in DotNetNuke 4.4.1

Free DotNetNuke CSS Skin - 'Simple Red Leaf'

creativehost — Wed, 28 Feb 2007 02:47:00 GMT

(Updated March 2007 for DNN 4.4)

The aim of this skin is to provide a clean, simple, search engine friendly and accessible skin.

The layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.

The skin takes advantage of the features that CSS layout designs provide:

Accessibility, Flexibility, Print View, Search Engine Friendly, Small File Size, Browser Compatible, etc.

Reducing the DotNetNuke CSS file sizes

creativehost — Wed, 28 Feb 2007 02:46:00 GMT

(Updated March 2007 for DNN 4.4)

This tutorial outlines how you can reduce the overall size of your CSS files and therefore the page load time of your DotNetNuke portal by editing the CSS files.

It is possible to reduce the default.css file from 17K to 12K by using CSS shorthand techniques and editing the code so that it passes the W3C CSS Validation Test.

Example free CSS file included for download.
Reducing the DotNetNuke CSS file sizes

Troubleshooting DotNetNuke skins - 2 Videos

creativehost — Fri, 01 Dec 2006 04:32:39 GMT

Techniques, tips and tricks to help you skinning in DotNetNuke. Layout, Solpart menu, CSS, class, id problems all solved with these easy troubleshooting techniques. Learn and get more from your DotNetNuke skins.

The videos cover:

Video 1 – Introduction, Edit CSS, troubleshooting
Video 2 – CSS layouts, images, id and classes and additional tips

Total Time Length: 17mins

Troubleshooting DotNetNuke Skins

Incorporating Google Adsense into DotNetNuke - 4 Videos

creativehost — Wed, 02 Aug 2006 04:10:26 GMT

In this tutorial we demonstrate how to incorporate Google Adsense into DotNetNuke websites.

In particular, the aim was to build a DotNetNuke website which would allow an administrator with little or no experience of DotNetNuke to:

Easily choose what type of Adsense ad they wish to display on the page, for example a square ad or banner ad
Easily choose the location on the page for the Adsense ad
and all of the Adsense ads need to blend within the text content of the page

In these 4 video tutorials we walk you through, step by step, how to integrate Google Adsense with DotNetNuke skins. We demonstrate how to incorporate Adsense into the Free Simple Red Leaf CSS skin. You can see an example of the Adsense skin in action by watching the introduction video below. The code is available for download with the videos.

The videos cover:

Video 1 – Introduction and demonstration
Video 2 – Skin setup and Google Adsense setup
Video 3 – Adding Adsense square ads and blending with the text
Video 4 – Adsense coloured containers and banner ads

Total Time Length: 33mins

View video 1 to watch an introduction to the tutorial (4.4MB)

Watch all videos: Incorporating Google Adsense into DotNetNuke

Horizontal CSS menus in DotNetNuke using the HouseMenu - 7 Videos

creativehost — Wed, 02 Aug 2006 03:54:03 GMT

In this tutorial we demonstrate how to create 3 horizontal CSS menus using the HouseMenu created by Tim Rolands from the House of Nuke.

We walk you through step by step, editing the free Simple Red Leaf CSS skin, and convert it to use horizontal menus. All of the skin code is available for download with the videos.

The menus

We explain how to create a:

Single horizontal menu that just displays the root items of the menu

Horizontal menu with a sub menu

Horizontal menu that uses images for the buttons with a sub menu

The videos cover:

Video 1 – Introduction and demonstration
Video 2 – Creating the layout initial configuration for a horizontal CSS menu
Video 3 – Styling the horizontal root menu
Video 4 – Configuring the horizontal sub menu
Video 5 – Styling the sub-menu and setting up for all root menu items
Video 6 – Pros and Cons, Creating a submenu using images to create a button effect
Video 7 – Styling the image menu

Total Time Length: 65mins

View video 1 to watch an introduction to the tutorial (3.8MB)

Watch all videos: Creating Horizontal CSS menus in DotNetNuke using the HouseMenu

Incorporating sIFR (Scalable Inman Flash Replacement) with DotNetNuke skins - 7 Videos

creativehost — Mon, 03 Jul 2006 00:00:00 GMT

How many times have you wanted to use a font other than the generic fonts that we are forced to use for web pages?

This video tutorial (54 mins) demonstrates a technique which allows you to use any font you require for your text headings.

The user does not need the font installed on their machine.

Some designers use the technique of using images for their headings just so that they can incorporate different fonts into their designs. The problem with this is that you need to create a new image for every single title that you wish to create. This is a chore and defeats the object of using a dynamic content management system such as DotNetNuke.

Welcome to sIFR (Scalable Inman Flash Replacement). sIFR has been around for a while now, but there are minimal DotNetNuke sites implementing this technique. Using sIFR can give your website the extra design edge and help you to move away from the generic DotNetNuke designs that you tend to see.

Semantic code and header tags within DotNetNuke skins

creativehost — Sun, 02 Jul 2006 00:00:00 GMT

This tutorial discusses the use of header tags and semantic code within DotNetNuke skins.

Using header tags can increase accessibility, enabling for instance speech browsers to understand the content of your pages, as well as the added benefit of enabling search engines to easily index your content. Header tags allow search engines to identify the topic of your website page, which should improve your search results.

The overall theme here is to allow various browser types / search engines to easily understand and interpret the content within your website pages and to create semantic code.

We analyze 5 pro websites for their design techniques and then apply these techniques to a DotNetNuke skin.

This tutorial is available as a 40 page PDF book.

DotNetNuke Skinning Toolkit

creativehost — Mon, 05 Jun 2006 00:00:00 GMT

The Free DotNetNuke Skinning Toolkit is an additional resource website that has been created by DNN Creative Magazine as issue 10 of the magazine.

The 98 page Skinning Toolkit demonstrates all of the skin classes within DotNetNuke so that you can easily view, search and learn how to style the various elements within a DotNetNuke skin.

In particular learn how to style the Solpart Menu, TreeMenu, Module Settings Menu, FileManager, Wizard, Main DNN classes (breadcrumbs, login links etc.)

Introduction to CSS and inheritance in DotNetNuke skins

creativehost — Sat, 03 Jun 2006 00:00:00 GMT

One of the regular problems skin designers come across when creating their own skins is un-explained styles appearing in their designs.

This tutorial explains the various CSS files that are used within DotNetNuke and how inheritance works between each of the CSS files for styling your DotNetNuke skins.

Once you understand inheritance you can reduce the amount of code required to create a DNN skin and therefore decrease the load time of a page.

Free example CSS files are included for download.

How to create CSS containers in DotNetNuke - 4 Video Tutorials

creativehost — Tue, 02 May 2006 08:16:04 GMT

This tutorial is a step by step guide covering how to create the free ‘Simple Red Leaf’ pure CSS layout containers

You can view the skin live here: http://skins.dnncreative.com

The containers are created using just CSS (no tables) and make use of CSS for the layout and styling the titles.

The tutorial consists of 4 videos detailing how to create CSS containers for DotNetNuke using Visual Web Developer Express Edition.

The videos cover:

Video 1 – Introduction, demonstration of containers
Video 2 – Preparations, first CSS container, the transparent containers
Video 3 – Boxed containers, ids and classes with containers
Video 4 – Finishing touches, spacing, testing, fixing with hacks and completion of containers

Total Time Length: 34min 41secs

View video 1 to watch an introduction to the tutorial. (2.7MB)

The SolPart Menu Uncovered

creativehost — Tue, 02 May 2006 07:52:04 GMT

Contrary to popular knowledge, the SolPartMenu provides full capabilities for options including root menus, child menus, vertical displayed menus and more. Knowing these flexibilities exist leads the designer into better and more adaptable website skins, as well as more robust and friendly navigation systems not ordinarily realized by most DNN users.

This article provides a deeper insight, as well as a few suggestions into the standard, yet not so well known, attributes of the SolPartMenu Skin Object.

Styling and formatting (part 2) – Text/HTML module and FCKEditor – part 12 - 9 Video Tutorials

creativehost — Tue, 02 May 2006 00:00:00 GMT

Continuing our series on How to build a DotNetNuke website, we expand on the previous tutorial (Styling and formatting in the Text/HTML module) and add content to the Home and Portfolio pages of the Vortex Music website.
The first three videos of this tutorial focus on the Home page, in particular working with the Text/HTML module and the FCKEditor. We demonstrate the best practices when working with the Text/HTML module as well as working with images, uploading files and formatting the text.

The second half of the tutorial (6 videos) focuses on the portfolio page. We demonstrate how to programme the skin.css file and the FCKEditor so that you can quickly and easily create the Portfolio credits list. This page is created using just CSS, no tables are used and no images or formatting are placed in the source code of the page. The Portfolio page is styled completely using the skin.css file.

To see this in action and for a more detailed explanation, view:
Video 1 – Introductions and Examples (10.8MB)

The videos cover:

Video 1 – Introduction and Examples
Video 2 – Keyword Research, Text/HTML module, FileManager and images
Video 3 – Adding content, working with containers, quick tips, completion of Home page
Video 4 – Introduction to the Portfolio page
Video 5 – Setting the first portfolio properties in the skin.css file
Video 6 – Creating portfolio items for the right side
Video 7 – Grouping classes, completing all portfolio items, adding styles to FCKEditor
Video 8 – Wrapping problems and solutions
Video 9 – Finishing touches to the portfolio page

Total Time Length: 68min 46secs

Styling and formatting in the Text/HTML module - part 11 - 8 video tutorials

creativehost — Mon, 03 Apr 2006 00:00:00 GMT

Continuing our series on How to build a DotNetNuke website, we are now going to explore adding content to the Vortex Music website.

This tutorial focuses on the methods you can use to add content to your website using the Text/HTML module.

In particular using the FCKEditor in combination with calling classes from the skin.css file to format the text and images within the Text/HTML module.

The video tutorials demonstrate step by step how you can create CSS classes to format your images and text.

The videos cover:

Video 1 – Introduction and practices to avoid
Video 2 – First CSS styling and setting up the FCKEditor
Video 3 – CSS styles for images and quotes
Video 4 – CSS styles for images with captions
Video 5 – FCKEditor and setting up a styles list
Video 6 – Using the FCKEditor to call styles from the skin CSS file

Total Time Length: 61min

We demonstrate how you can create the following layouts without using any additional containers or tables...

How to create a pure CSS skin in DotNetNuke - 9 Video Tutorials

creativehost — Mon, 03 Apr 2006 00:00:00 GMT

This tutorial is a step by step guide for how to create the free ‘Simple Red Leaf’ pure CSS layout skin.

You can view the skin live here: http://skins.dnncreative.com

The layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.

The tutorial consists of 9 videos detailing how to create a CSS skin for DotNetNuke using Visual Web Developer 2005 Express Edition.

The videos cover:

Video 1 – Introduction, Preparations, Explanations
Video 2 – Setting up the layout skeleton of the CSS skin
Video 3 – Viewing the initial layout and setting the DOC Type
Video 4 – Setting first properties in the skin.css file
Video 5 – Setting up the layout of the skin using CSS
Video 6 – Finishing touches to the CSS skin layout
Video 7 – Styling the HouseMenu
Video 8 – Testing in browsers and fixing with hacks
Video 9 – Viewing, finishing touches, completion of CSS skin

Total Time Length: 78min 44secs

How to remove the Solpart menu from a container - part 9 – Video Tutorial

creativehost — Wed, 01 Mar 2006 14:12:28 GMT

This is a continuation of our series on How to build a DotNetNuke website.

This video tutorial explains the simple steps for removing the default Solpart menu within a container and replacing it with a drop down list.

The main reason we need to remove the Solpart menu is because the Solpart menu is not compatible with a XHTML Transitional Doc Type.

We need to set up DotNetNuke to use a XHTML Doc Type so that we can successfully implement features such as:

Font-resizing
Pure CSS layout skins (no tables)

Time Length: 4min 13secs
Download Size: 4.2MB

How to Test a DotNetNuke Skin

creativehost — Wed, 01 Mar 2006 06:42:55 GMT

It’s essential to test your DotNetNuke skin in a variety of configurations to ensure it is error free and compatible with as many browsers as possible.

This tutorial provides some of the key elements and tools that you can use to test your DotNetNuke skins.

Covering:

Images
Font Sizes
Web Developer Tools
Browser Testing
Validating Skins
W3C's Online Tools
Validating HTML via File Upload
Validating CSS via File Upload
Web Developer Tool and Conclusion

Browser Quirks, Standard Compliance modes and Doc Types

creativehost — Wed, 01 Mar 2006 06:26:07 GMT

Quirks and Standards Compliance modes are the two methods that browsers can use to interpret your CSS. It’s one of the important considerations if you are implementing a pure CSS skin or using font-resizing techniques.

This tutorial covers:

Quirks and Standards Compliance modes
Switching modes
DOC TYPES Document Type Definition (DTD)
Which XHTML DTD is suitable for DotNetNuke?
How do we set DotNetNuke to use XHTML 1.0 transitional DTD?
Pros and Cons

The tutorial also includes a Default.aspx file for you to download so that you can quickly set your DotNetNuke installation to use XHTML 1.0 Transitional.

XHTML and best practice coding for skins and modules in DotNetNuke

creativehost — Wed, 01 Mar 2006 06:13:15 GMT

This tutorial explains XHTML and how to improve your skin and module coding standards by implementing the XHTML rules. It covers:

Examples
Why bother with XHTML compliant code? What’s it all about?
How does this affect DotNetNuke?
The XHTML standards also need to be adhered to by module developers. Why?

And further resources.

Minimising and creating efficient CSS code in DotNetNuke

creativehost — Wed, 01 Mar 2006 00:00:00 GMT

This tutorial is intended for people who are familiar and comfortable with CSS.

We look at some of the techniques that are available within CSS to minimise the size of our CSS stylesheets and to write more efficient code.

In particular focusing on:

CSS Shorthand
Grouping Classes
Colour Shorthand

– This is a good performance enhancement for any DotNetNuke skin.

How to create resizable text in DotNetNuke - part 10 - 5 Video Tutorials

creativehost — Wed, 01 Mar 2006 00:00:00 GMT

Continuing our series on How to build a DotNetNuke website, we demonstrate how to enable the Vortex Music skin to use resizable text.

While viewing a web page using Internet Explorer, if you go to the View menu and select Text Size / Largest, you should see that the text size increases.

The main reason to enable text sizing is to make your site accessible to as many people as possible. Enabling text sizing within your website allows visitors with visual impairments the opportunity to view the content of your site.

A further consideration is that it is law in the US and UK to create accessible sites.

This tutorial contains 5 videos which explain the best method for setting this up with a DotNetNuke skin.

The Skin and Container files are included with the tutorial.

Video 1 - Initial preparations and setting up the skin ready for text sizing. (5min)

Video 2 - Initial Classes and cleaning up the CSS code using shorthand techniques, enabling the menu to use text sizing. Details of the various DotNetNuke CSS files and inheritance problems (15min)

Video 3 - Further classes, enabling the Text / HTML module to use text sizing. Viewing and fixing various browser problems. (9min)

Video 4 - Setting skin objects to use text sizing. Fixing further Internet Explorer sizing problems (9min)

Video 5 - Final classes enabled for text sizing. Further testing and viewing in a variety of browsers. (12min)

How to install and configure the House of Nuke menu for a DotNetNuke skin - part 8

creativehost — Wed, 01 Mar 2006 00:00:00 GMT

This is part of the How to Build a Website in DotNetNuke series.

This tutorial looks at the HouseMenu created by Tim Rolands from the House of Nuke.

The HouseMenu is a free CSS based menu and can be used to replace the standard Solpart menu that comes with DotNetNuke.

The tutorial covers:

Introduction to the features
The Benefits of the HouseMenu over the Solpart Menu
Issues

And comes complete with 4 videos covering:

Video 1 - Demonstration, Installation (5min)
Video 2 - Adding the HouseMenu to a skin (6min)
Video 3 - Designing and configuring the HouseMenu (10min)
Video 4 - Internet Explorer fixes through CSS hacks and comparisons with the Solpart menu (4min)

Skin and Container files are included with the tutorial.

DotNetNuke® Skinning MP3 Interview with Tyler Fawcett

creativehost — Sat, 31 Dec 2005 00:00:00 GMT

This is a 24 minute mp3 interview by Lee Sykes with Tyler Fawcett discussing Skinning.

Tyler Fawcett won the Best Overall and Most Original skin for his Tranquillity Skin in the DotNetNuke skinning competition.

In this skinning interview we discuss planning, colour selection, best working practices along with various other tips and tricks.

Table tricks for search engine optimized skins in DotNetNuke® - Video Tutorial

creativehost — Fri, 30 Dec 2005 00:00:00 GMT

The feature of a search engine optimized skin is to easily guide the search engine spiders through your page to the main content that you wish to be indexed as quickly as possible.

Many web designers do not understand the importance of a search engine optimized skin. You can give your website the extra edge over your competition by ensuring your skin design is fully search engine optimized.

This free video tutorial walks you through two table tricks to help you search engine optimise your skins.

The tutorial also includes a download for all of the code.

Time Length: 12min 12secs
Download Size: 9.5MB

How to create a container for DotNetNuke® - part 7 - 2 Video Tutorials

creativehost — Thu, 29 Dec 2005 00:00:00 GMT

This is part of the How to Build a Website in DotNetNuke series.

This tutorial consists of 2 videos detailing how to create a container for DotNetNuke using Visual Web Developer 2005 Express Edition.

The container files are included with the videos for you to download.

Video 1 - Creating a container: Image Header – White Background

Copying across the files from the DNN-Blue container to use as a reference
Fixing the errors in the default container
Associating the .CSS file with the .htm file so that you can view the changes you make in the CSS file
Explanation of the Tokens and their functions
Renaming of the classes within the table cells
Editing the container.css file
Explanation of the classes
How to edit the classes to change the look of a container
How to add an image to your container
Using gradient images: making use of the repeat function and background colour to take into account any possible overloads of table cells, or instances such as a browser disabling images
Adding the .xml file

Time Length: 10min 26secs
Download Size: 11.5 MB

Video 2

Packaging a container
How to automatically install the container to your DotNetNuke installation
Viewing the container
Explanation of the classes that we created
Create two further containers and an explanation of each of the containers:
Image Header SE White Background container:

This container is similar to the first container except elements of the code and Tokens that we do not need have been stripped out to reduce the file size and page load times

Transparent.htm

This container is completely transparent

Final changes and setting up the containers for release to a production environment

Time Length: 5min 47secs
Download Size: 6.5 MB

How to create a skin for DotNetNuke® - part 6 - 8 Video Tutorials

creativehost — Wed, 28 Dec 2005 00:00:00 GMT

This is part of the How to Build a Website in DotNetNuke series.

This tutorial consists of 8 videos detailing how to create a skin for DotNetNuke using Visual Web Developer 2005 Express Edition.

The skin files are included with the videos for you to download.

Video 1 - Initial preparations and setup in VWD (6min)

Video 2 - Setting up the layout of the skin using tables (14min)

Video 3 - Packaging and uploading the first edit of the skin to a localhost installation (4min)

Video 4 - Creating a skin.xml file and setting the menu to display vertically (3min)

Video 5 - Styling the skin using the skin.css file and methods to quickly view the edits of a skin (6min)

Video 6 - Styling the skin using the skin.css file continued … (working with images) (11min)

Video 7 - Styling the skin using the skin.css file continued … (the menu) (16min)

Video 8 - Styling the skin using the skin.css file continued … (adding the final classes and releasing the skin) (11min)

Introduction to Skinning in DotNetNuke® - part 5 - Video Tutorial

creativehost — Tue, 27 Dec 2005 00:00:00 GMT

This is part of the How to Build a Website in DotNetNuke series.

This tutorial demonstrates the various components that make up a skin and how a skin works.

The video covers the following details:

Why a skin does not use <HTML> <BODY> or <FORM> tags
.htm and .ascx and the differences between the two files
Placeholders [Tokens] – uniquely identify a skin object
Working with images
Content Panes and how they are added to a skin – the minimum requirement is for one content pane to be named “ContentPane”
Skin.css stylesheet
Tokens and the .xml file
Skin Objects – attributes

If you are using a .htm file the settings of the tokens are provided within the skin.xml file
If you are using a .ascx file the settings are provided directly within the .ascx file

Time Length: 11min 36secs
Download Size: 11.1MB

Setup Preparations for Skinning - part 4 - Video Tutorial

creativehost — Mon, 26 Dec 2005 00:00:00 GMT

This is part of the How to Build a Website in DotNetNuke series.

This video tutorial provides information related to setting up your computer ready for skinning. It covers:

Creating the folder structure
Copying across the DNN skins as a reference
Setting up Visual Web Developer 2005 Express Edition
Setting up your localhost install of DotNetNuke ready for skin testing

Time Length: 10min 27secs
Download Size: 9.4MB