Welcome back from Part 1 or from anywhere... Here we will see how to install your first skin for the DotNetNuke engine.

You will find a lot of tutorial on the internet about implementing your own skin for DotNetNuke. The problem is that only few of them have in mind that most os us are the "trial and error" kinda people. We like to write "qesdfawe" and see how it is immediately reflected on the result. We rarely write a full blown html code form head to tail and then see what we have done. Therefore this tutorial is oriented towards this way. Ok... Enough of the self brag-o-recognition. Time for some work:

In the new dotnetnuke website login as "Host". In Admin/Site Settings, expand the Appearance tag and locate the entry Portal Skin. This is where you select the skin of your site. This Drop-Down menu reflects the folders in your dotnetnuke folder \Portals\_default\Skins\.(we will come back to this soon).

In order to implement the skin you need to open the site through Visual Studio. You can also implement a skin with no Visual Studio but since you are in this blog and propably program in C#, VB.NET I dought it that you don't have Visual Studio installed. Open Visual studion and select "Open WebSite". Navigate to the DotNetNuke installation folder (in my case DNNDemo) and select it. When the site is opened, build the project. You will notice that you get the following error: Could not load type 'DotNetNuke.HtmlEditor.FckHtmlEditorProvider.fckimagegallery' and some related errors. This is resolved by navigating in Solution Explorer to bin/Providers/ and moving the file DotNetNuke.FckHtmlEditorProvider.dll to the bin/ folder. Rebuild and you are good to go !

In Solution Explorer navigate to \Portals\_default\Skins\ and create a TestSkin folder. Add in the folder an index.ascx file. No matter what you will do with it a simple template that I consider it to be standard is index.ascx (2,96 kb).

Add a skin.css file like this one (skin.css (7,43 kb)) and your skin is ready. (Although not very professional one)!

The great news is that once you put those two simple files in your site under Admin/Site Settings/Appearance/Portal Skin you can select your new skin. Moreover the changes you make to those files are immediately reflected to your site once you hit refresh providing you with the best way for little "trial and error".

This is a very brief introduction on how to start with skinning. From this point the information you can find on the web on how to arrange the look and feel of your site via skinning is more than enough.

Ok. I have finally managed to write down the steps needed in order to install a local copy of the very useful DotNetNuke engine and apply a skin to it. For those out there wondering what is so special about the DotNetNuke engine in site development I briefly state the following: As a web developper, imagine that somebody asks you to implement a site that advertizes his shoe selling store. You go ahead and implement a static site and you get your money. Suppose that this costs you a week of your time and you are mainly concerned with  graphic deisgn and layout issues.

Your client after a month asks for a way to dynamically add/remove products. You go ahead and implement a small database and user interface in ASP.NET and install it also. Then your client needs a forum. Then your client needs a newsletter. Well you start getting the picture. He/She needs and you spend time implementing. The money you charge for each addon does not compare the time you spend implenenting.

Well with DotNetNuke you have a better approach:

At the initial client's request, you deploy the dotnetnuke engine (he doesn't need to know what dotnetnuke is ;) ) and spent a week (as before) in order to implement a skin for DotNetNuke that provides the look and feel your client prefers. Up to this point to the eyes of the client it is the same. When your client asks for a product update mechanism you do not need to implement it (reinvent the wheel in a sense) but you just add the corresponding dotnetnuke module and apply some skinning to it (great reduction in implementation time). The same when he/she needs a forum, newsletter etc. If he/she needs something very special you just implement it as a module for dotnetnuke and yoou can provide it free or with a cost to the dotnetnuke community.

So dotnetnuke can make your life easier as any other CMS. If I managed to convince you here is a small tutorial on where to start:

1. Download DotNetNuke_Install package (you need to register first).
2. Create a folder in your inetpub\wwwroot\ folder named DNNDemo.
3. Extract all the contents of the zip file in the folder.
4. Give to the NETWORK SERVICE (Vista)/ASPNET(XP) user full permissions in the DNNDemo folder.
5. Open IIS Manger (Vista) and select "Convert to Application".
6. Open your favorite browser and write the address: http://127.0.0.1/DNNDEMO/.
7. You should be presented with the installation wizard. If not check your permissions or your settings in IIS. Everything else is ok, trust me.
8. In the wizard select Typical(Next).
9. The select "Test Permissions". Sometimes the Delete file permission fails even if everything is fine so try it a number of times. Worry if the problem persists even after 3 tests. Finally hit Next.
10. At this point you need to create a databse in SQL Server 2005 (the approach for MSSQL Express is similar). Open SQL Server management studio and create a new DNNDemo database.
11. Under Security/Logins create a new login, name it "dnn_user", select SQL Server Authentication and only check "Enforce Password Policy".
12. Net go to dnndemo/security/users and add a new user. Set "dnn_user" to be the login name and the user name and in the Database Role Membership select db_owner.
13. Return to the DotNetNuke wizard and provide the appropriate sb information (it is straightforward). Make sure you leave "Run as DB owner" checked and the "Integrated Security" unchecked. Then hit "Test Connection".
14. If the connection succeds proceed with Next. If it does not there is a problem with the database yoou have made so focus only on how to resolve this. Everything else is ok.
15. In the next step you are ok only if you see "Installation of Database Complete". If you see something else or the process hangs check your Database (the problem is only there). Hit Next.
16. Create the Host/Admin accounts and name your baby.
17. Congratulations !

Suppose you have a picture control in your form (WinForms) / window (WPF) and want to display the following picture in it (logo.png):

In a Window Forms application you create a PictureBox control in your form, and in the code file you want to do something like the following:

There are three ways of setting this reference (eg. creating the needed Image object).

1) You can drag and drop the logo.png file in the Resources.resx file. Visual Studio will automatically create a reference to it and you can safely write:

2) You can put the file in a folder. Usually you create a new folder in Solution Explorer withih the project and add there the desired file (in our case logo.png). Then, you make sure that in the properties of the file Buid Action is set to None and Copy To Output Directory is set to Copy Always. This will copy the files when you compile the application to the Debug\ or Release\ folder and you can safely use the following to display the image (in the following example logo.png is located in the Resources\ folder):

3) You can also put the file in the folder within solution explorer and set in the properties Buid Action to Embedded Resource. This will embed logo.png in the .exe file of the application. You can use this file with the following code (this is a good method if you dont want your images to be easily changed by the app user):

In WPF things are a bit diferent. First of all the Embedded Resource Build Action is substituted by the Resource Build Action. Nevertheless, they do the same job but they cannot be used interchangeably. Using the Resources.resx file is not easy any more. To be more specific now you have the following:

The easiest way to put logo.png in there is to add it to the project preferably in a folder (eg Images\), set the Build Action to Resource and then call the following in the code-behind file:

Note that UriKind and the Uri object are kinda tricky with the way the path should be specified. For reference see this and this.