Overview
Sometimes we are not sure where to start. Especially as it comes to making a new piece of software look different. These example themes can be used to either instantly update your Hotcakes Commerce store to have a new look and feel, or used as a reference or starting point when creating your own design.
Requirements
The following information is required to already be known:
- An understanding of DNN CMS themes (previously known as skinning)
- Working knowledge of HTML, CSS, jQuery, and other common web design frameworks
- DNN CMS host login access (only required to install the skins)
Getting Started
Hotcakes Commerce is built from the ground up to already look great in any DNN site. However, a great theme can make any DNN module incorporate the branding of a specific site, allowing your site to look that much better.
Themes used to be called a skin. Skin is a term that comes from the CMS that Hotcakes Commerce is deployed on. It simply refers to the design that is applied to your page, pages, or entire site. You may currently call this “theme” or “template” in other systems that you use. Themes are one of many extensions in DNN and you can learn more about the DNN theme engine on the official DNN website.
If you hear or see the work "skinning," it is a term that describes the act of designing or developing a theme (but it is being phased out).
Theme Package is a term that refers to the collection of files that all work together to produce a large number of designs that can be applied to various areas on the same site. These files are not just the design itself, but also any other files that the designs might depend on, such as images, JavaScript files, CSS, and more.
Example DNN Theme Packages
While the official term for what you will see below is “theme package,” a theme package is often just called a theme for its simplicity. The following skins can be used as a great starting point for your store, a proof of concept (POC) for your team, and more.
If you want to use these themes, simply install them like you would any other DNN extension.
Important Note
These themes are no longer maintained and are only here for legacy support. Please use a more contemporary theme.
Banyan Theme
The Banyan theme package is a set of responsive designs that you can use on your DNN site. They are a great example of integrating Bootstrap 3 into your theme.
If you would like to use this theme with the example responsive viewsets, you should know that it will be necessary to update the views to comply with the new patterns in Bootstrap 3. Those changes are fairly minor.
Gravity Theme
You may recognize the name of this theme. This is the name of the theme that comes pre-installed with DNN 7. We took that theme and used the same designers to make it responsive using Bootstrap 2. This theme is intended to be used with the example responsive viewsets available in the designer documentation area.
You cannot install this theme using the zip file provided. You will first need to unzip it. The theme package zip file is inside this zip file.
IMPORTANT! Do not try to install this theme without reading below.
This theme also includes a couple of template files. In DNN, templates are used to create pre-configured content. The template file itself is a site template. It can be used in DNN to create a new site with pre-populated pages and content, or you can use the DNN site wizard to replace the pages and content on your existing site. The resources file that shares the same name contains supporting information for the content.
In order to use the template files, you will need to add them to your website. Upload or FTP the two template files to the following folder of your website.
[SITE ROOT FOLDER]\Portals\_default\
You will see other template and resource files in the folder if you are in the right folder like shown below.
Now that these files are in the right place, any features that look for them will see them. Feel free to use the DNN Site Wizard to apply this template to your existing site, or select it when creating a new website. If you choose to use the Site Wizard feature, please read all messages and directions carefully to prevent the accidental removal of content that you might want to keep.
Need More Help?
Do you need more assistance with this article? Please review your support options.