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.
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.
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.
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:
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.
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.
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:
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.)
Here are the steps involved in creating a skin:
2. Create the files which will define the skin (htm, css, xml, etcetera)
3. Prepare the images that will be used
4. Define the layout structure with HTML and CSS
5. Link in the images
6. Designate what panes you want and where they will be
7. Insert the skin objects
8. Customize and tweak until it looks right
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.
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!
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!