I recently wanted to update the skin on DigNuke.com to perform better on mobile and tablet devices. Also, I wanted to upgrade to a newer CSS grid layout. I decided to use the popular Bootstrap framework to handle all the messy layout and mobile aspects of the site. This post doesn’t teach you Bootstrap or DNN Skinning. It just covers a few of the steps I needed to get everything to work.
1. Including the Bootstrap goods
The easiest way to include Bootstrap in your template is to include that from the Bootstrap CDN. You will want to use DNN’s Client Resource Management controls to include your CSS and JS. To include those controls, you will want to include the following at the top of your skin .ascx file:
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
Next you will include the .css and .js into your skin. To include the CSS you will use the following at the top of your skin ascx file:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" UseSkinPath="false" />
To include the .js, you will use the following at the bottom of your file:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
2. Skin.css – don’t use it
Typically for a DNN skin you will use the skin.css file to define the css elements for your skin. Since you are using the Bootstrap grid system, chances are a lot of the CSS in your skin.css will be deleted. So carefully clean it up.
Also in your skin.css you will define styles for the Bootstrap nav bar. This is one of the area’s of bootstrap that you will override the css in the default bootstrap CSS file. So to do this, your skin.css file needs to appear AFTER the bootstrap css file on your webpage so it will override.
The problem here is that skin.css which is automatically included by DNN will always be included before the Bootstrap css file.
An easy solution is to rename your skin.css to style.css. Since there is no skin.css, DNN will not try to include it. Then just add another control to include your style.css file:
3. Navigation Menus – Mobile friendly
The other change I made was a difficult decision. Bootstrap navigation does not support hovering. In DNN when you hover over a navigation menu item, the child items appear for selection. That’s hard to do on a mobile device. The Bootstrap framework has opted for a click being required to drop down the child items in a navigation menu. This means that any top level menus with content had to be moved to a child page and the parent needed disabled. For example I used to have:
- About Us – You could click this an view a page about DigNuke
- Partners – Information about partners
I had to change it to the following:
- Company – This is a DNN disabled page
At first I did modify Bootstrap to drop down the child menus on hover. To do this, you simply need to use the Bootstrap Hover Plugin. However I decided to keep things less complicated and use the Bootstrap standard for the navigation menu.