Development Environment for Skinning DotNetNuke
From InstallationWiki
| Official Page |
| Project Documentation |
| Download |
|
The thought of creating your first skin may be intimidating. You may believe that there are steps that will have to be done just right or there's no point even getting started. The fact is that once you understand some simple concepts, skinning is relatively easy. Ultimately, you will need to know your HTML and CSS markup and styling, but that is common in any type of web design you would do anywhere. This tutorial is geared toward those who have never created a skin, and it will get you over any anxiety you thought you had about creating a skin.
Contents |
[edit] Choosing an Editor
If this is your first skin, you really should be thinking about what editor you will be using. If you don't already have an editor or the development environment for other coding you may be working with, the immediate choice that may come to mind is Microsoft Notepad, but there's no need to put yourself through that type of abuse.
As we're working with Microsoft technologies while working with DotNetNuke, the natural choice will be Microsoft Visual Web Developer (VWD) which is free. There are other choices for editors here, but VWD will be the one used by most in this context, so we'll move on with it in our examples. If you are using Microsoft's Visual Studio .NET (Microsoft's premier development environment), you will notice that the screens and menus are virtually the same.
[edit] Installing Visual Web Developer
Before we can do anything, we'll need VWD installed. If you have already installed VWD, feel free to skip this section. These are the steps for getting VWD installed:
- Be sure you have version 2.0 of the .net framework. This can be downloaded from http://www.asp.net or with Windows Updates.
- Download the VWD install file from http://www.asp.net from the Downloads section. The file will be about three megabytes in size.
- Once on your local drive, double-click on the file to run the installation. You will encounter several common wizard screens. One wizard screen to note in particular is for installing SQL Server 2005 Express Edition. If you do not already have a version of SQL Server 2005 installed, be sure to select to install this. DotNetNuke will have to have an edition of this to run off for its data store.
This is a screen shot of the recommended installation options to choose.
- Stepping through the wizard, you will start the installation. The installation process may take a while depending upon what options you chose. For example, if you chose to install the MSDN library (documentation & help files), it will take much longer. It will only download the items it needs.
- At the end of the installation, it will prompt you to register the software. If you do not register VWD within thirty days, it will stop working.
[edit] Installing the DotNetNuke Starter Kits
Even though we now have VWD and SQL Server, we'll need the DotNetNuke files to set up before we can start skinning portals. Do so by using the following steps:
- Navigate to
http://www.dotnetnuke.com. - If you haven't already registered on this site, do so now.
- If you are not already logged in, do so now.
- Click on Downloads and download the latest version of the starter kit.
- Right-click on the zip file you downloaded and extract the contents.
- Double-click on the vscontent file that was extracted. This will start the Visual Studio Content Installer. Select all the components, and click Next.
- Click Finish to install the starter kit. There are a few components that will be installed. See that in the next screenshot one of the components did not get installed. This is fine as long as the first one, DotNetNuke Web Application (the one we'll be using) installed successfully.
The following is what you should see so far:
[edit] Setting Up Your Development Environment
In almost any programming project, you will have two environments: the development environment and the post-deployed environment. While skinning, this is no different. Most likely, you will have a local computer where you work on your skin. When you are done with it and are ready to package and deploy it, it will be installed on the target or live DotNetNuke website which will be your post-deployed environment.
To set up our development environment, fire up VWD. We'll now create a new DotNetNuke install:
- Click on File, and then click New Web Site (Ensure you are using VB language).
- A dialog box appears. Click on DotNetNuke Web Application Framework.
- For Location, pick File System (should be the default item), then type the following location beside it: C:\DotNetNukeSkinning.
This is the screenshot of what you should see so far:
- Click OK. It will take a few moments to copy over all the needed web files.
- You will then be presented with a welcome screen. As the welcome page directs, press Ctrl plus F5 to run your DotNetNuke application.
- After a few moments, a DotNetNuke install should open in a web browser. If you are presented with the following message, right-click on the information bar at the top and enable the intranet settings in the Internet Explorer.
This is what you should see at this point:
- You are presented with a choice of installation methods. Select Auto and then select Next.
- You should then see a web page with a log of installation of the application. Click on the link at the bottom that says Click Here To Access Your Portal.
Note - If you encounter problems in the installation of the DotNetNuke, you can find additional assistance at the
http://www.dotnetnuke.com/website by clicking on the Forums link and then drilling-down to the Install It! link. - Congratulations! You now have DotNetNuke up and running. Click Login in the upper-right corner of the screen with the username as host and a password as dnnhost.
- You should be on the Home page with several modules on it. To make the home page easier to work with, delete all the modules on it, and add a blank Text/HTML module. (In case you have never deleted a module from a page before, you will find the delete menu item if you hover over the downward-pointing triangles to the left of each of the titles.)
Note - Depending on the version of DNN you downloaded, you may experience a system message from DotNetNuke on the Home page titled Insecure account details. Although changing the default password as it instructs is always a good idea, it is not necessary on a development computer or a non-production implementation of DotNetNuke. However, if you don't want it to nag you about it go ahead and change it.
This is our DotNetNuke portal that we will use to test the skins we will create. Move back over to VWD. Close the welcome page.
The skins for DotNetNuke will be found in ~\Portals\_default\Skins\. Go to that directory now as shown here:
Congratulations! You have now set up your development environment, and we are now ready for skinning.
[edit] Additional References
- For instructions on installing DotNetNuke, click here
- For instructions on Adding Styles in DotNetNuke, click here
- For instructions on Creating your first DotNetNuke Skin, click here
[edit] Source
The source of this content is Chapter 2: Creating Your First Skin of DotNetNuke Skinning Tutorial by Darren Neese (Packt Publishing, 2008).
