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

Features

• done_allIts FREE!
• done_all4 skin layouts
• done_all23 containers
• done_all1000's of color combinations available
• done_allFully responsive
• done_allFully customizable
• done_allAll features of Bootstrap
• done_allAdopts the Google Material Design pattern
• done_allEasy to use
• done_allCan be used as a tutorial on building your own skins/themes for Dnn
• done_allAnd much more!

Google has designed Material Design to make a web more beautiful and more user-friendly. To combine material design and Bootstrap we have used the 'Material Design for Bootstrap' framework (MDB). MDB is powerful Material Design UI KIT that has 300+ material UI elements, 1000+ material icons, 74 CSS animations, as well as multiple built-in color schemes.

MDB is built on top of Bootstrap so that you can leverage all of the Bootstrap goodness but have the look and feel of Material Design.

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

• adjust Download and un-block the zip file using the link above
• adjust Go to Host > Extensions > Install Extension wizard to install the MDesign skin pack
• adjust 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 MDesign theme.

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

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

DnnMDesign/
├── App_LocalResources/
│   ├── Home.ascx.resx
│   └── skin.ascx.resx
├── assets/
│   ├── bootstrap/
│   │   │── 3.3.6/
│   │   │   ├── css/
│   │   │   ├── fonts/
│   │   │   └── js/
│   │   └── 3.3.7/
│   │       ├── css/
│   │       ├── fonts/
│   │       └── js/
│   ├── css/
│   │   ├── app.css
│   │   ├── dnnmdesign_overriders.css
│   │   └── jquery.smartmenus.bootstrap.css
│   ├── font/
│   │   └── roboto/
│   ├── font-awesome-4.5.0/
│   ├── font-awesome-4.6.3/
│   ├── img/
│   ├── js/
│   │   ├── app.js
│   │   ├── jquery.smartmenus.bootstrap.js
│   │   └── jquery.smartmenus.js
│   └── MDB/
│       └── 3.3.3/
│           ├── css/
│           ├── font/
│           └── js/
├── includes/
│   ├── _content-panes.ascx
│   ├── footer-content.ascx
│   ├── footer-legal.ascx
│   ├── navbar.ascx
│   ├── page-title=header.ascx
│   ├── searchbar.ascx
│   ├── searchmodal.ascx
│   └── topbar.ascx
├── navs/
│   └── default/
│       ├── menudef.xml
│       └── nav.cshtml
├── 404Skin.ascx
├── 404Skin.css
├── 404Skin.doctype.xml
├── Admin.ascx
├── Admin.css
├── Admin.doctype.xml
├── Home.ascx
├── Home.css
├── Home.doctype.xml
├── PopupSkin.ascx
├── PopupSkin.css
├── PopupSkin.doctype.xml
├── skin.ascx
├── skin.css
└── skin.doctype.xml

I like to call the way in which you edit and change the skin "Internet Layout Style Editing", "ILSE" for short.

The DnnMDesign 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.

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 DnnMDesign 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 DnnMDesign skin via the site settings or to 1 of the skin layouts of DnnMDesign.

• launchThe Bootstrap homepage, click here
• launchThe Material Design for Bootstrap (MDB) homepage, click here
• launchThe Font Awesome homepage, click here
• launchThe Material Design Icons homepage, click here

Contributing to the DnnMDesign theme

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