The DnnBootster theme/skin is for everyone to use for FREE, use it out-of-the-box for your Dnn8/Dnn9 website or build and customize it to fit your blog, business, store, agency or whatever you are building.

Features:

  • Its FREE!
  • Uses Bootstrap 4
  • Flexbox for the responsive grid
  • 4 skin layouts
  • 37 containers
  • 18 color schemes
  • 10 different page headers
  • 12 different social button styles and sizes
  • 27 different social network buttons
  • 15 different list styles
  • Fully responsive (with flexbox functionality)
  • Fully customizable
  • All features of Bootstrap 4
  • Easy to use
  • Can be used as a tutorial on building your own skins/themes for Dnn
  • And much more!

 

The Dnn Bootster theme for Dnn uses Bootstrap version 4.0.0.beta. All features of Bootstrap Grid, Context, Components and Utilities can be used within the skin.

To find out more about Bootstrap I would suggest you to read up on the framework and become familier with it to get the best out of the Bootster theme. Click here to go to the official Bootstrap site

Theme download

The DnnBootster theme and source can be downloaded from Github. Please choose below which version you would like to use.

This site is hosted by WeHostDnn.com
Affordable, quality hosting for your DNN website Tailored to you and your needs, we manage the hosting to allow you to take care of your website!

Theme Requirements & installation

The Dnn Bootster them was created for Dnn8 and upwards.
To install follow the steps below:

  • Download and un-block the zip file using the link above
  • Go to Host > Extensions > Install Extension wizard to install the Bootster skin pack
  • After the installation has been completed, navigate to Admin > Site Settings > Basic Settings (tab) > Appearance (section) and specify portal and edit skins and containers to the Booster theme.

For detailed on installing extensions please visit the official Dnn Documentation Center, click here for instructions on how to install Dnn extensions.

The Dnn Bootster theme structure

When you install the theme into your Dnn install the following structure will be created:

bootsterV2/
├── App_LocalResources
├── assets/
│   ├── css/
│   │   ├── bootstrap.css
│   │   └── dnnbootster.css
│   ├── img/
│   │   ├── header-01-bg.jpg
│   │   ├── header-02-bg.jpg
│   │   ├── header-03-bg.jpg
│   │   ├── header-04-bg.png
│   │   ├── header-05-bg.png
│   │   ├── header-06-bg.png
│   │   ├── header-07-bg.png
│   │   ├── header-08-bg.png
│   │   ├── header-09-bg.png
│   │   └── header-10-bg.png
│   ├── js/ 
│   │   ├── bootster.js
│   │   ├── bootstrap.js
│   │   └── bootstrap.min.js
│   └── themes/
│       ├── baby.css
│       ├── bloggy-blues.css
│       ├── browns.css
│       ├── charta-use.css
│       ├── chocolate-jazz.css
│       ├── cool-blue.css
│       ├── eduardo.css
│       ├── friends-foes.css
│       ├── grey.css
│       ├── key-lime-pie.css
│       ├── only-human.css
│       ├── red-hot.css
│       ├── sandy-stone.css
│       ├── summer-twilight.css
│       ├── tech-office.css
│       ├── warm-grey.css
│       ├── zen-master.css
│       └── zene-haze.css
├── layouts/
│   ├── content-areas.ascx
│   ├── footer.ascx
│   ├── footer-legal.ascx
│   ├── navbar.ascx
│   ├── page-header.ascx
│   ├── searchbox.ascx
│   ├── topbar.ascx
│   ├── topbar-contact-details.ascx
│   ├── topbar-languages.ascx
│   └── topbar-user-functions.ascx
├── nav/
│   └── default/
│       ├── menudef.xml
│       └── nav.cshtml
├── 404Skin.ascx
├── 404Skin.doctype.xml
├── Admin.ascx
├── Admin.doctype.xml
├── Home.ascx
├── Home.doctype.xml
├── PopupSkin.ascx
├── PopupSkin.css
├── PopupSkin.doctype.xml
├── skin.ascx
├── skin.css
└── skin.doctype.xml

Changing themes

To change the color theme of the skin is easy to do...
Open the layouts/system/header-includes.ascx file found in the root of the skin folder 'Bootster'. At the top of the file look for a line with the ID of 'DnnCssThemeInclude' like below:

<!-- Theme Css File -->
<dnn:DnnCssInclude ID="DnnCssThemeInclude" runat="server" FilePath="assets/themes/default.css" PathNameAlias="SkinPath" />
<!-- Theme Css File -->

Once you have found this line just change the part: 'default.css' to the theme file you would like to use. To see all theme files available, click here.

Support

The Dnn Bootster theme is a free, open source project, because of the busyness we cannot guarantee that we can deliver support directly, saying that we will do our best to solve problems as soon as we can.

Information

Installing on Dnn v08.00.00: There is a small bug in this version of Dnn that will stop the menu showing. To solve this is quite easy to do by following theses steps below:

Go to '/Portals/' folder of your Dnn install In this folder you will find a file called 'web.config' Open this file and search for the following 3 lines of html


<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc"/>
<add namespace="DotNetNuke.Web.Mvc.Helpers"/> 
<add namespace="Dnn.Modules.DynamicContentViewer.Helpers"/>

Change them to the following:


<!--<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc"/>-->
<!--<add namespace="DotNetNuke.Web.Mvc.Helpers"/> -->
<!--<add namespace="Dnn.Modules.DynamicContentViewer.Helpers"/>-->

Menu Warning: The Bootster theme can handle multi level menu systems. When using perent/children menu items (dropdowns), to make sure that the menu system better handles the responsive menu system, disable the parent menu item and should not have content for that page. The reason for this is that in order to allow for better touch support on mobile devices clicking on the Parent item will open the submenu.

Homepage skin: On a fresh install of Dnn, the homepage skin is set via the page settings, to make sure that the skin is applied correctly, click the 'Edit Page' button, from the pull-down choose 'Page appearance' and in the popup, scroll down to 'Page theme'. Change this to the '' if you have set the DnnBootster skin via the site settings or to 1 of the skin layouts of DnnBootster.

Resources

  • Intro to the DnnBootster Skin for Dnn using Bootstrap 3 (DnnConsulting blog), click here
  • Changing & creating DnnBootster color schemes (DnnConsulting blog), click here
  • Placing social buttons in the DnnBootster theme (DnnConsulting blog), click here
  • The Bootstrap homepage, click here
  • The Font Awesome homepage, click here
  • Adobe Kuler color schemes, click here
  • Material Design Palette generator, click here

 

Contributing to the Dnn Bootster theme

If you would like to help out with the open source Bootster project, please drop me an email or fork the project on Github

Custom & Bespoke theme creation
info_outline

Looking for a theme that is unique to you or are you looking for a custom theme to be created delivered by your client?

 

DnnConsulting specializes in all things Dnn, this also means custom and bespoke themes/skins.

If you are looking for a partner to help with the design of your clients sites just contact us.

 

DnnConsulting is specialized in:

  • DnnCMS Hosting (WeHostDnn.com)
  • DnnCMS setup and optimalization
  • SASS theme/skin/container creation
  • CSS & html theme creation
  • OpenContent template creation
  • and much more...