learn Dotnetnuke skining the fastest possible speed!

Dotnetnuke is a content management open source project which has been established for many years. Many efforts had been contributed by the community to this popular project and guess what? it is available for free download. If you are interested, please go to http://www.dotnetnuke.com/. Most often web designers want their dotnetnuke's website to be as unique as possible and therefore skinning is a very important subject for them. They have to skin to meet their client business objective, client's request and etc. A web designer always ask, how much efforts and time needed to create a skin for dotnetnuke and will programming skill needed? If you want to design skin only, usually no programming is necessary needed.

FYI, dotnetnuke is considered a web development framework which u can easily reuse the code and as well to extend it. Programmers often extend it by creating a plug in module which can be deployed and installed easily to the dotnetnuke core framework. Since, dotnetnuke is architected in such a way, skinning has no exceptions. We can easily setup the skin by uploading the skin.zip file. Now the interesting problem comes, How do I create the skin.zip? Well the easiest and fastest way is to find an example of anyskin.zip file over the net and extract it and dig into it. There is a very good website that provides free skin. just visit http://www.xd.com.au/ and download your favourite skins.

Steps:
1. Install the skin that you have downloaded.

2. locate the skin folder. usually it located in wwwroot\dotnetnuke\Portals\_default\skins\yourdownloadedSkin\

3. you will see those .jpg, .gif, .css , .ascx and .etc . FYI, .jpg and .gif is those image files that used in constructing the skin and therefore if you modify those images in your favourite Photoshop and save it, you will be amazed that your dotnetnuke's website image will change accordingly. So just play around with it.

4. .css is the most interesting part for styling, if you are used to .css then you are great, however if you are not, then don't worry. Most of the time the .css tags used is all self explained, so learn by examples! For example, if you want to change the background color of the particular .class, just look for those '#FFFFFF' kind of value and try experimenting it by changing different value and see the result, i guess it is fun too. If you want your life much easier, get a Macromedia Dreamweaver to help you up with those alien .css tag.

5. Yeah, you are not .NET developer right? well .ascx is a ASP.NET web control file, so what the hack it is related to skinning? Simply the answer is that, it is used to specified the container of your webpages or in another words it is used to specified the layouts of your website. Initially, most skin file comes with HorizontalMenuFixed.ascx and HorizontalMenuFull.ascx for instance. fHorizontalMenuFixed.ascx as it sell explained it fixed the width of the web page and on the other hand HorizontalMenuFull.ascx means it fill up the page and it can auto adjust the size itself according to your LCD screen resolution. Continue... the next and let's get started now!

6. Normally you will see those contentpane, bottomPane, topPane leftPane and rightPage which are the most basic. If you look carefully, it is actually HTML table's elements. So how does the dotnetnuke know which or which is top, bottom or left pane? The answer is the ID that specifies the name of the column. for example, ContentPane is specifiied as <*td id="ContentPane" runat="server"*><*/td*> , if you specify in such a way, dotnetnuke will know that it is a content container and it will create a contentpane for you in all your web pages in your website consistently. If you want to style the ContentPane? no problem, just add a class attribute into it for example <*td id="ContentPane" runat="server" class="contentStyle" *><*/td*> contentStyle will references the .css file to get the styling info. The .css might look like

.contentStyle { width: 100%

background-color: transparent;

}

So do you get a clear picture of how people skin? This is the most simple method if not what can i say... Well , enjoy skinning and always learn by experimenting examples! Cheers :)