DotNetNuke Skinning Tutorial

By Darren Neese
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Overview of DNN Skinning

About this book

DotNetNuke is an open-source web application framework written in VB.NET for the ASP.NET framework. The application's content management system is extensible and customizable through the use of skins and modules, and it can be used to create, deploy, and manage intranet, extranet, and websites.

DotNetNuke has a skinning architecture, which provides a clear separation between design and content, enabling a web designer to develop skins without requiring any specialist knowledge of development in ASP.NET; only knowledge of HTML and an understanding of how to prepare and package the skins themselves are required.

If you want to create great-looking skins for your DotNetNuke websites, this book is for you. If you're new to DotNetNuke skinning, this book is the ideal introduction. It will give you clear, concise and practical guidance to take you from the basics of DotNetNuke skinning right through to developing the skills to make you a DotNetNuke skinner to be reckoned with!

This book gives you step-by-step instructions to the fundamentals of skinning so that you will be in control of the look and feel of your DotNetNuke site, and dreaming of new ideas for creating more interactive user interfaces.

Publication date:
May 2008
Publisher
Packt
Pages
156
ISBN
9781847192783

 

Chapter 1. Overview of DNN Skinning

If you've developed a website for your employer, a client, or even your friends, you will soon notice how critical the layout, graphics, fonts, and colors are to everyone involved. Your site is quickly sized up by the first impression—'wow' factor—despite what content or functionality is or is not there. Face it, everyone gets awfully skin-deep superficial when it comes to websites. When it comes to DotNetNuke, a skin is the look and feel of your portal. A skin can be the determining factor on whether your DotNetNuke portal is accepted or not.

This chapter is an overview of skinning. We'll start off by describing what skinning is, what skins are made of, and what we have to work with, right after you install DotNetNuke. After reading this chapter, you will know the steps involved in skinning and also what can be done with skinning.

What is Skinning

First of all, a skin is a set of graphics, fonts, colors, and page layout defined all-in-one package to be applied to a DotNetNuke site or even just to a single page. Skinning does not have anything to do with adding content or function to a DotNetNuke site.

Skinning is the act of creating such a package. It involves creating or altering web files that are eventually zipped into a file and uploaded to a DotNetNuke site, which can then be put into action. By the end of this book, you will be well-versed in all the aspects of this rewarding process.

 

What is Skinning


First of all, a skin is a set of graphics, fonts, colors, and page layout defined all-in-one package to be applied to a DotNetNuke site or even just to a single page. Skinning does not have anything to do with adding content or function to a DotNetNuke site.

Skinning is the act of creating such a package. It involves creating or altering web files that are eventually zipped into a file and uploaded to a DotNetNuke site, which can then be put into action. By the end of this book, you will be well-versed in all the aspects of this rewarding process.

 

What are Skins Made Of


Skins are made of HTML (hyper-text markup language), CSS (cascading style sheets), skin objects and panes. Notice the following screenshot. It is a look at the typical home page once you log in to the site with the administrative privileges.

The HTML and the CSS in a skin play the same role that they would in any other non-DotNetNuke site. In this default blue skin, there are nested HTML tables structuring the page into interwoven columns and rows. The CSS defines the colors, images, and fonts used.

The skin objects are bits of functionality that almost any site needs. Notice the skin objects from top to bottom:

  • logo

  • menu

  • search box

  • current date

  • breadcrumb (where it says About, indicating what page you are on and where are you in the menu structure)

  • username link

  • login/logout link

  • copyright notice

  • Terms Of Use link

  • Privacy Statement link

  • DotNetNuke copyright

Panes are the sections of a skin which serve as containers for modules you add to a page. There is one module on this particular page, titled Enter Title. It is in a pane appropriately named ContentPane. There are four other panes not being used, as you can see: TopPane, LeftPane, RightPane, and BottomPane.

As we move through the chapters together, we'll become intimately aware about how these components of the skin work together and how to customize them exactly as we want them to appear.

 

The Default Skins


When you install DotNetNuke, you will essentially be looking at one skin. There may technically be more than one skin, but it's just the same skin in various colors and/or forms.

As a skinner in training, you are attentive to these default skins because they are decent skin examples, and more importantly, a great place to start from to create your next skin. Eventually, you will create your own template or set of files (starting point), but we will spend some time looking at these basic skins and learn from them.

 

Where are Skins Located


Generally, all skins are located in the following path in your DotNetNuke install: ~\Portals\_default\Skins\. The tilde is commonly used to refer ‘where it is that you installed,' or in this case, the root of your DNN install. If you go there now and look at the DNN-Blue skin, you will see the following in the Windows Explorer:

 

File Types in Skins


You see these typical file types in any skin:

  • HTM—This is the one file type that we'll be working with, adding to, and modifying the most. While uploading a skin, this file is parsed to make the ASCX file.

  • ASCX—This is the main skin file that DotNetNuke uses to apply to a site or page. There are exceptions, but this is a file you will not create yourself. DotNetNuke takes your HTM file and parses it into the ASCX. This file is replaced if the HTM file is re-parsed. Unless you know why you're doing it, do not create or modify this file.

  • CSS—Cascading Style Sheet file. Your styles (look and feel for the common web user-interface elements) should be defined here, just like in any web application.

  • XML—This holds all the attribute/value pairs to insert into the asp.net server elements/controls as DotNetNuke parses your HTM file to make the ASCX file.

  • JPG/GIF/PNG—Graphics files. These are image/graphic files you will include, along with the other files, to constitute your design. (The files prefixed with 'thumbnail_' serve as small previews as to what the portal will look like if you apply it. You can see this if you go to the skins menu item on either the Admin or Host pull-down menu.)

 

An Overview of the Skinning Process


Here are the steps involved in creating a skin:

  1. 1. Create a folder on the file system for the skin

  2. 2. Create the files which will define the skin (htm, css, xml, etcetera)

  3. 3. Prepare the images that will be used

  4. 4. Define the layout structure with HTML and CSS

  5. 5. Link in the images

  6. 6. Designate what panes you want and where they will be

  7. 7. Insert the skin objects

  8. 8. Customize and tweak until it looks right

  9. 9. Package the skin for deployment

These steps are done in what we will call a development environment. We will not do this on the target DotNetNuke install where the skin will be put in use. At step nine of this process, we package it so that it can be uploaded and used in any DotNetNuke install.

In the following chapters, we'll be going through each of these phases together, finishing off a skin that you can call your own.

 

What You Can Do With Skinning


Many wonder what exactly is possible with DotNetNuke's skinning engine while considering it as a viable option for their needs. As stated at the beginning of this chapter, the look and feel of a website is a big sticking point for people. The skinning engine of DotNetNuke is very flexible. It allows webmasters to have multiple looks and feels for their websites as desired by just changing the skins instead of redesigning the site content and layout. Instead of asking what it can do, a more productive question would be what it can't do.

The most confining factor will be your imagination. Besides that, the most challenging part of the skin to customize is the menu, and we will cover that in detail in a chapter by itself. All other roadblocks from there is your skill in getting HTML and CSS defined just right, and that just takes patience and some experience. Rest assured, with very few exceptions, you can get your DotNetNuke portal to look just as you envision!

 

Summary


We took a step back and looked at skinning overall here. You know what skinning is and what skins are made of. You are aware that DotNetNuke comes with at least one useful skin. You know that the sky is the limit as far as what you can do, and you know the scope of the process of skinning. You are now ready to jump right in and create your first skin!

About the Author

  • Darren Neese

    Darren Neese is a Microsoft specialist who currently works as a senior web developer and project manager. With over ten years of experience in the IT industry, he has worked as a Windows developer, a web developer, a database administrator, a corporate trainer, an academic teacher, as well as being a server and network administrator. He holds several related Microsoft certifications and implements DotNetNuke and other Microsoft-based solutions for clients.

    Browse publications by this author