Thank you for purchasing DNG-Theme!

This documentation will help you get to know the structure and features of DNG theme, and guide you how to use and set the features. If you need any additional help which is not covered in this document, or if you need customization work, please send emails to dnnskindev@gmail.com, we will give you response in time.

What's included

When you purchase our theme from DNNGo.net, you will receive one large .zip file that contains everything inside. Unzip that file to get all the content inside. Below is a full list of everything that is included along with a brief description of each item. See the corresponding sections for info on installing the theme.

  • DNN ThemeThe DNN Theme in this folder can be used in DNN7.x, DNN 8.x and DNN 9.x .
  • DNNGo_LayerGalleryBanner Slider is contained here.
  • DNNGo_PowerFormsYou can create forms through this module.
  • DNNGo_MegaMenuAddonIt will give additional effects for your MegaMenu.
  • DNNGo_ThemePluginYou can change the style of skin by this module.
  • DNNGo_xBlogYou can create blog pages by this module.
  • DNNGo_xEvent
  • DNNGo_PhotoAlbums
  • Page TemplatesExported page templates will allow you to reproduce our live demo pages.

Installation

To use skins and modules, you must be running DNN 7.x or higher. We have tested it with DNN7.x, DNN 8.x and DNN 9.x.

Dotnetnuke Information

To install this skin you must have a working version of Dotnetnuke already installed. If you need help to install Dotnetnuke, follow the instructions in Video-Library. Below are all the useful links for Dotnetnuke information.

Skin and Required Modules Installation

To use skins and modules, you must be running DNN 7.x or higher. We have tested it with DNN7.x, DNN 8.x adn DNN 9.x.

For DNN 7/8

For DNN 9

Change the Settings of HTML Editor

By default, HTML editor will remove the div tags whose content is blank. For example: if we add the code <div class=”pt-20″></div> in HTML editor and click save, you will find the code is missing when you edit it afterwards. So we need to change the settings to prevent this from happening.

  • Log in to your site as super administrator.

  • Go to SETTINGS > Site Settings > Site Behavior > MORE, click the Open HTML Editor Manager.

  • Click the Main Settings tab. Set the value of Administrators to be Full.

  • Click the Editor Config tab.

  • Set the value of AllowedContent to be true.

  • Set the value of FillEmptyBlocks to be false.

  • Set the value of ignoreEmptyParagraph to be false.

  • Click the Save button.

Import page template

Exported page templates will allow you to reproduce our live demo pages. We'll reproduce the home page as an example.

For DNN 7/8

  • You can find these files in Page Templates Directory.

  • Upload Home.page.template file into your portal root (e.g. Portals/0/Templates/) in the previous chapter , you are able to start using page templates to clone live demo pages.

  • Because page templates can not import image files, you need to upload all the photo files of the "images" folder into your portal root (e.g. Portals/0/).

  • Synchronize the file in Admin > File-Management

  • Navigate to the Home page and click Pages -> Import.

  • Find a proper page exported content file navigating to Templates folder and choosing for example Home page.

  • Choose "Replace the current Page" and the redirect mode you need. Please note, if you select "Replace the current Page", content of current page will be reset.

  • Click Import button if everything is correct.

  • Specify page settings according to your needs (necessarily apply HomePage skin to the home page) and click "Update Page". The home page is ready.

For DNN 9

  • Go to Manage > Site Assets

  • Uploading Home.page.template file to Templates folder

  • Because page templates can not import image files, you need to upload all the photo files of the "images" folder into your portal root (e.g. Portals/0/).

  • Go to Content > Pages > Add Page

  • Choose your template from Template drop-down.

  • Click Add Page

Note : Page templates can only be imported when you are creating a new page.

Header layout

You can click the ThemePlugin button to go to settings page, and then choose different header styles in Header Layout section.

Header Style

This theme contains 9 different header styles. Clicking the Edit button to choose.



Each header includes very rich setting options, you can modify the color of anything you want. For example: text color, font size and background color etc.

Sub Menu Style

You can change the background color, text color, font size and ect of sub-menus via the settings here.

Fixed Menu Style

You can change the background color, text color, font size and ect of the Fixed menu via the settings here.

Mobile Header Style

You can change the background color, text color, font size and ect of the headers on mobile via the settings here.

Content Layout

You can set the font color and size, link color, the color of H1-H6 etc of the content area.

Content Layout

This skin contains Full Layout and Boxed Layout, you can set through Content Layout section.

Full Layout and Boxed Layout

With Boxed Layout applied, you can still set page background, it will display around the content.

The background can be set as static or rotating image or any solid color for you choose to apply, also you can set different background images for different pages.



Set the width of skin

You can set width for skin on different devices, for example, you can set a width of 1400px for skin in over-large screen, so width of the content section is 1400px, you can also set auto for it,

Pane layout

It includes settings for multiple kinds of pane layouts, for example, layout used for homepage is 0-12-0, layout used for InsidePage-leftmenu is 3-9-0, and layout used for InsidePage-rightmenu is 9-3-0.



You can set the vertical distance between the panes

Body Background

In Boxed Layout mode, you are allowed to set a different background image for each DNN page. It will show background image around the skin. You can make the settings following the steps below.

  • You need to choose Boxed Layout.

  • Choose Page Background in the Option for Show bg, save settings.

  • Click "pages" nav in the ThemePlugin.

  • If you would like each page to share the same background image, you will need to click Edit Background icon in the row of Globals.

  • You are allowed to upload either one image or multiple images. If you set two images, it will show the background in the way of slider animation.

  • You are also allowed to set a different background image for each page by selecting False for Use Global Settings.

Sidebar Layout

It includes sidebar in InsidePage-leftmenu.ascx and InsidePage-righttmenu.ascx by default. Both LeftMenu and RightMenu are showing sub menus under the second level. You can check the following two page demos. LeftMenu RightMenu

It is possible to specify the following setting in Sidebar Layout tab：

  • Set the elements font family, size and colour
  • You can set the Sidebar to be fixed at the left or right of the screen.

Page Title layout

This theme contains 5 different page title styles. It is possible to specify the following setting in Page Title Layout tab：

  • You can set the height of the Page Title to be the height of screen. Users can slide to the content area by clicking the down arrow.
  • Set the elements font family, size and colour
  • You can set the background color of Page Title, or the background image.

Footer Layout

This theme contains 11 different pafe title styles. It is possible to specify the following setting in Footer Layout tab：

  • Set the elements font family, size and colour
  • Set the background color
  • Enable the slide-out mode

Hidden Elements

You can set the elements in hidden pages by this tab.

Map Settings

You can set the location and style of Google Map by this tab. Following the listed steps to set.

  • Click Map Settings tab to fill in API.
    You can register through https://developers.google.com/maps/documentation/javascript/get-api-key.

  • Place the code <div id="gmap01"></div> into HTML module.

  • Enter location of the map in Address, for example: Bear city, ny

  • Enter description in Markers Html

You can set the icon image of tab

You can set the height of map

Logo Sttings

It requires to set logo of the whole DNN site in admin > site settings. If you need to set a different logo for Roll Menu, Mobile view and different pages, please refer to what listed below:

  • Desktop Logo Settings - Set logo image in desktop resolution.
    Default Logo - Apply DNN default logo settings.
    Custom Logo - Use the custom upload logo, thus you can set different logo images for each page.
  • Fixed Menu Logo Settings - Set logo image for Fixed Menu.
  • Mobile Logo Settings - Set logo image on mobile.

CSS Style

It includes 19 homepages in the skin, each homepage is invoking individual css separately, for example, what being invoked by HomePage01 is HomePage01.css, and what being invoked by HomePage02 is HomePage02.css.

If you need to apply codes of HomePage02 in HomePage01, you will have to check both HomePage01.css and HomePage02.css

jQuery Plugin

There are some jQuery plugins uploaded in the skin. If you don’t need to use them, you can disable these plugins by the settings here.

Create a Skin

You can create a new skin through ThemePlugin. Please note the new skin name shouldn't be the same as the current skin.

The skin sub menus contain two types-Standard Menu and MegaMenu.

Standard Menu is the default menu type, the sub menus will be set to display in one column only, as shown in screen shot below:

MegaMenu will set sub menus to display in multiple columns, also you can display HTML module or third party module in sub menus, as shown below:

You can set the MegaMenu as per steps below:

  • Click "pages" nav in the ThemePlugin.

  • Click Edit MegaMenu button. Please note MegaMenu can be set for first level menus only.

  • Select Mega menu for Tab Type. You can set the height and the displaying location of menu.

  • Clicking on the Add Pane button, you can set any number of modules, HTML and menu to the MegaMenu.

  • You can set width, margin and border for each pane.

  • If you set three panes whose total width happen to be 100, they will show in one line.

  • You can add different types of controls for the pane.

    Menu: This control is used for setting the menu items to show.

    HTML: You can insert HTML codes through this control.

    Module: You can insert modules of any pages on the site.

MegaMenu Addon

Additional effects can be added for MegaMenu through DNNGo_MegaMenuAddon module.

  • Add DNNGo_MegaMenuAddon module to a pane.

  • It includes 3 different effects in the module, you can select to use one of them by clicking on Manager > Effects > Effect List

  • You need to call this module in MegaMenu.

How to add fonts

Click "FONTS" nav in the ThemePlugin. You can add additional Google fonts and the fonts in TTF format.

Google Fonts

  • Click on the Add Google Font button.

  • Fill in the name of fonts. For example: Open Sans

  • Fill in the link of font. You can get the URL for font in https://fonts.google.com/.

  • Clicking on the Analyze button, the module will analyze format of the URL automatically.

  • After saving it, you will be allowed to select this font in the skin settings.

Upload Font

  • Click on the Upload Font button.

  • Fill in the name of fonts. For example: Open Sans

  • Fill in the family name of font

  • Fill in the weight of font

  • Upload the font files in .eot, .svg, .ttf, .woff

  • After saving it, you will be allowed to select this font in the skin settings.

Set menu icon

You are allowed to set a different icon for each menu item. What we have used is Font Awesome Icons.

You can set it by following the steps as follows

  • Click Edit Icon

  • You can choose the icon you need through dropdown options, you can also find the icon you need through text filter.

Global settings and Single settings

It is default by ThemePlugin that setting is only valid to one skin. If you need to apply the settings to all skins, you will have to select Global for Scope in Skin Settings, as shown in image below:

Coming Soon Page

You can click the link to check Coming Soon demo. Coming Soon

You can create the coming soon page easily following these steps:

  • Create a page named coming soon page.

  • Import the ComingSoon.Page.template for this page.

  • You can set color, end time, and background image for Coming Soon page through ThemePlugin,

Fullscreen Page

You can click the link to check Fullscreen demo.

You can set the background color and background image for each area in Page Settings.

You can display or disable some areas

Short Codes

This skin contains a lot of short codes, it is very easy for you to use even you know nothing about js and css, all you need to do is just copying the short codes to HTML module.

DNNGo_LayerGallery Module

You can see this module in the banner section on the home page, we will guide you step by step to set up the module as the same as our demo site:

  • Go to Host –> Extensions –> Install Extension wizard to install the module pack DNNGo_LayerGallery_02.03.01_PA.zip.
  • Add DNNGo_LayerGallery module to the BannerPane.
  • Click Manager button.
  • Click the navigation of the left Import&Export
  • Import HomePage01.xml file under DNNGo_LayerGallery Module.
  • You will see the imported data on Manage List page and you can change the text/image in the banner by clicking Edit button.
  • Click this link so you can check the module instruction details.

DNNGo_PowerForms Module

This skin contains a lot of short codes, it is very easy for you to use even you know nothing about js and css, all you need to do is just copying the short codes to HTML module.

Authorize module

  1. You can obtain Module Machine Key via the steps in url below: (http://www.dnngo.net/MyAccount/OnlineAuthorization.aspx)
  2. Send an email to dnnskindev@gmail.com with your invoice ID, machine Key for every module( different module has different machine key), and your DNNGO username. We will generate an activation code for you. Please note: If your site is a demo site, your license will still be valid when you transfer your site to a live site.

License

DNN Skin/Theme

  1. Standard License: You can install the skin/theme on a single portal only, belonging to either you or your clients.
  2. Professional License: You can install the skin/theme on an unlimited number of Portals under one DNN installation, belonging to either you or your clients.
  3. Enterprise License: You can install the skin/theme on an unlimited number of Portals and DNN installations, belonging to either you or your clients.

Notice: You are allowed to modify the skin/theme as per your own needs. But you must not transfer your license of the skin/theme to others, or redistribute, distribute, resell or share the skin/theme, and you can not modify the skin/theme as end product for selling at any marketplace. You shall not use the skin/theme on websites that come with pornographic, defamatory or other illegal or immoral content.

DNN Module

  1. Standard License: You can install the module on a single portal only, belonging to either you or your clients.
  2. Professional License: You can install the module on an unlimited number of Portals under one DNN installation, belonging to either you or your clients.
  3. Enterprise License: You can install the module on an unlimited number of Portals and DNN installations, belonging to either you or your clients.

Notice: You shall not publish the module in any place for others to download, resell or re-distribute the module in any form, or transfer the permissions to anyone, crack or de-compile the module.

Images/Photos

All images/photos used in our skin(theme) demo are just for demonstration purposes and shall not be used in any of your site or distributed. If you like them, you can get them from these sites: shutterstock, pixabay, graphicburger, unsplash, streetwill, getrefe, barnimages, picjumbo, designerspics, lifeofpix, kaboompics

Disclaimer: All trademarks are owned by their respective owners. We(DNNGo) are not affiliated with them in any manner. All information on this page is for demonstration and/or informational purposes only.

Upgrade Policy

Free latest version is available if purchase is within 2 year.

If your purchase is over 2 year, please contact us at dnnskindev@gmail.com

Contact Us

If you have any questions or suggestions about modules/skins or modules/skins installation process, please feel free to contact us.

  • Website: www.dnngo.net
  • Email: dnnskindev@gmail.com
  • Skype: dnngo-linda