X

Theme 055 Documentation

General Information

Dotnetnuke Information

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

What Is Included With Your Package

When you purchase our theme from DNN Store, 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.

  • Inside the Content folder are: DNN Skins folder, DNNGo_LayerGallery folder, DNNGo_PowerForms Module folder, DNNGo_ThemePlugin Module folder, PSD folder, Page template.
  • DNN Skins folder - The skin in this folder can be used in DNN7.x, DNN 8.x adn DNN 9.x .
  • DNNGo_DNNGo_LayerGallery folder - You can see this module in the banner section on home page.
  • DNNGo_PowerForms folder - You can create forms through this module.
  • DNNGo_MegaMenuAddon folder - It will give additional effects for your MegaMenu.
  • Page template folder - Exported page templates will allow you to reproduce our live demo pages.

What Are The Requirements To Use skins and modules

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.

Skin and Required Modules Installation

  1. Go to Host-Settings –> Host-Settings, and select the tab Other Settings, changing Max Upload Size to 28 or higher.
  2. Go to Host –> Extensions –> Install Extension wizard to install the module pack DNNGo_ThemePlugin_01.00.00_PA.zip
  3. Go to Host –> Extensions –> Install Extension wizard to install the skin pack 20073-UnlimitedColorsPack-055-DNNSkins.zip
  4. You can install other modules as per your own needs.
  5. After the installation has been completed, navigate to Admin –> Site Settings –> Basic Settings (tab) –> Appearance (section) and specify portal and edit skins and containers like shown in the screenshot below. It should be done, in order to make your DNN admin UI look correct and readable.
  6. Now you can upload the LOGO image in Admin –> Site Settings –> Basic Settings (tab) –> Appearance (section) page.

How to import page template?

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

  1. You can find these files in Page Templates Directory.
  2. 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.
  3. 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/).
  4. Synchronize the file in Admin > File-Management
  5. Navigate to the Home page and click Pages -> Import.
  6. Find a proper page exported content file navigating to Templates folder and choosing for example Home page.
  7. 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.
  8. Click Import button if everything is correct.
  9. 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

  1. Go to Manage > Site Assets
  2. Uploading Home.page.template file to Templates folder
  3. 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/).
  4. Go to Content > Pages > Add Page
  5. Choose your template from Template drop-down.
  6. Click Add Page

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

Ten kinds of header layout

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

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

Header Layout

Each header includes three kinds of layouts, which are Full, Boxed and BG-Boxed.

  • Full - make header the same width as screen in settings.
  • Boxed - make header the same width as content in settings.
  • BG-Boxed - make header the same width as content in settings, header will be surrounded by background, as shown in image below:

     

Full Layout and Boxed Layout

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

With Boxed Layout applied, you can still set page background, it will display around the content. You can click link to check demo url of boxed layout.

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.

How to set width for skin

Go to Content Layout settings, 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, so width of content section is the same as screen.

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.

Loading Style

It will show animated progress bar when loading the page. There are many kinds of animation effects included in the skin, you can set in Loading style. You can also apply GIF image as animation effect.

Content Style

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

How to set background image for DNN page.

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.

  1. You need to choose Boxed Layout.
  2. Choose Page Background in the Option for Show bg, save settings.
  3. Click "pages" nav in the ThemePlugin.
  4. 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.
  5. 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.
  6. You are also allowed to set a different background image for each page by selecting False for Use Global Settings.

How to set page title image for DNN page.

Choose Page Title Background in the Option for Show bg, save settings.
As for how to set it, please refer to the way of setting background images mentioned above.

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

Set Up Google Map

You can create Google Map easily following these steps:

  1. Go to Themeplugin, and click Map Settings tab to fill in API.
  2. You can register through https://developers.google.com/maps/documentation/javascript/get-api-key.
  3. Place the code <div id="gmap01"></div> into HTML module.
  4. Enter location of the map in Address, for example: Bear city, ny
  5. Enter description in Markers Html, for example: hello word

Logo Settings

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.

Home Page Style

It includes 18 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, as shown in image below:

Ten kinds of Page Title layouts

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

You can change the text color, background color and background image etc for each Page Title layout.

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.

Standard Menu and MegaMenu

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.
  • Mega Menu Width - Set the height for the menu that pops up.
    Auto: Set the width of menu to be the same as that of skin.
    Custom: Set a specific number for the menu width.
  • Mega Menu Position - Set the position for the menu that pops up.
    Left: Set the menu that pops up to be left-aligned with its parent menu.
    Center: Set the menu that pops up to be center-aligned with its parent menu.
    Right: Set the menu that pops up to be right-aligned with its parent 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.
  • You can sort the controls by dragging them.

MegaMenu Addon

Additional effects can be added for MegaMenu through DNNGo_MegaMenuAddon module.

  • Add DNNGo_MegaMenuAddon module to a pane.
  • It includes 4 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.

MegaMenu Effect

With this effect, a menu with multiple columns can be created. You need to set the menu items to show in Effect Options. As shown in image below:

Menu_tab, Menu_tab02, Menu_tab03

Tabs can be created with these three effects. Clicking on Add New Slider button will enable you to create tabs. As shown in image below:

The color of texts and border can be set in Effects >Effect Options. As shown in image below:

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.
  • Font Alias - Set alias for the font.
  • Font Link - Set the URL for font. You can get the URL for font in https://fonts.google.com/, as shown in image below:
  • Clicking on the Analyze button, the module will analyze format of the URL automatically.
  • You can turn on/off this font.
  • After saving it, you will be allowed to select this font in the skin settings.

Upload Font

  • Click on the Upload Font button.
  • Font Alias - Set alias for the font.
  • Font Family - Set name of the font.
  • Font Weight - You need to enter normal,bold
  • Upload the font files in .eot, .svg, .ttf, .woff, as shown in image below:
  • You can turn on/off this font.
  • After saving it, you will be allowed to select this font in the skin settings.

Set menu typography icon

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

Click Edit Icon to set.

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:

  1. Create a page named coming soon page.
  2. Import the ComingSoon.Page.template for this page.
  3. You can set color, end time, and background image for Coming Soon page through ThemePlugin, as below:

One Page

You can click the link to check One Page demo. One Page

Anchor area

It will scroll to the corresponding area on the page when clicking the menu texts at the top. It will also do so when clicking the dots on the right of the skin.

These anchors are generated through page's anchorTag. Codes are as follows. You can place this piece of codes in page's HTML module, click the right anchor, then page will slide to this HTML module area.

<div data-title="ABOUT US" class="anchorTag" data-offset="-60" data-scrollshownav="true" data-menuanchor="true" > </div>

Option:

data-title Title displayed correspondingly to the right navigation. If page title of the menu is the same as data-title, page will scroll to this area when clicking menu texts.
data-menuanchor Whether to enable menu anchor feature or not.
data-scrollshownav Whether to enable navigation or not.
data-offset Offset value of up and down coordinate for anchor.
data-icourl Image url that displays correspondingly of the right navigation.
data-iconame Icon class names that displays correspondingly of the right navigation.

How to set menu anchor

  1. Click Add New Page button.



  2. Fill in Page Name and Page Title. Texts for Page Title needs to be the same as that of data-title.

  3. Put the anchor code to HTML module of the page. It will scroll to the corresponding area on the page when clicking the top menu texts.
    <div data-title="About Us" class="anchorTag" data-offset="-60" data-scrollshownav="true" data-menuanchor="true"> </div>

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.02.00_PA.zip.
  • Add DNNGo_LayerGallery module to the BannerPane.
  • Click Manager button.
  • Click the navigation of the left Import&Export
  • Import ContentListEntity.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

You can create the form through this module, click this link so you can check the module instruction details.

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

You are allowed to install the skin/theme on a single portal only , belonging to either you or your clients. 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.

Module

The modules included in this skin/theme are only provided with Standard License, which allows you to install the module on a single portal only , belonging to either you or your clients. But 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 1 year.
If your purchase is over 1 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