In order to use the DNN Theme Project template (new with the 4.0 release of Christoc’s development templates, January 2015), you will need to follow the steps laid out in this tutorial exactly. If you choose to not follow each of the steps, you may run into trouble and will have to figure out things on your own. As always, support for our tutorials is provided in the form of paid DNN Support and Consulting. You can also visit www.dnnchat.com and possibly get some free support there, but no guarantees are made that support will be provided there.

Prerequisites

  1. The latest release of the Project templates requires Visual Studio 2013+, it will not work on VS2010 or VS2012.
  2. As with the Module Development templates, the Theme development template requires you to have your DNN Development environment configured in a specific way. You should have your development environment running at the URL http://dnndev.me/ good news for you, it is very easy to do, all you need to do is follow this tutorial.
  3. Once you have your environment setup, you need to install the Project templates. This is another easy step, simply follow this tutorial.

Now that you have the Templates installed, you can get to doing the real work, working with the Theme project template itself.

How to use the DNN Theme Project Template

  1. Run Visual Studio 2013 as an Administrator (right click on the shortcut to do so)
  2. File –> New Project
  3. Choose the Visual C# option from the Languages section of the new project dialog
  4. Select the DotNetNuke Folder
  5. Choose the DotNetNuke C# Compiled Theme template for your project template
  6. For the new project creation screen using the following settings
    1. Name: ThemeName (something unique here, example MyFirstTheme)
    2. Location: c:\websites\dnndev.me\portals\_default\skins\ (this assumes you setup your development environment as instructed) DO NOT PUT THE SKIN IN /PORTALS/#/SKINS/
    3. Solution: Create new solution
    4. Create directory for solution : Unchecked (this will cause path problems if checked, the templates assume the SLN is in the same folder as the project file)
    5. Add to source control: Unchecked
    6. Click OK

Once your Theme has been created, you will want to perform the following steps.

After project creation steps

  1. Delete the Documentation folder (it isn’t needed)
  2. Switch from DEBUG to RELEASE mode
  3. Build the project. This will create an INSTALL and SOURCE zip file in the /install folder within the project’s folder on the file system (/portals/_default/skins/themename/install/)
  4. Login to your DNNDEV.me site with a HOST/Super User account
  5. Navigate to the Host/Extensions page
  6. Upload the newly created INSTALL zip file (created in step 3) using the Install Extension Wizard on the Host/Extensions page.
  7. Navigate to a Page and apply the skin to your page.

A few items of Note:

  1. The Theme template and package MUST be in the /portals/_default/skins/ folder, not in one of the individual portal’s (/portals/0/skins/) folders.
  2. The Containers are inside of the Containers folder, inside of the project. This is not where DNN expects them to be, they need to be in /portals/_default/containers/ThemeName/. The Project templates will put them into that location in your development environment when you BUILD the project in RELEASE mode. During Installation in another environment, when installing the INSTALL package for the theme will do the same thing.

What Next?

What comes after you install the theme you just created? You modify it of course! Stay tuned for more DNN Theme/Skinning tutorials from Christoc.com.