By Andy Stephenson
March 2013
In this tutorial we will walk you through step by step how to create a responsive skin for DotNetNuke 7 using the Twitter Bootstrap framework.
Bootstrap is a free collection of HTML, CSS and Javascript code created by Twitter to aid web designers to create rapid and consistent websites.
Bootstrap offers several powerful tools that can be a huge advantage to a DotNetNuke skin developer.
Some of these include:
- Various layout options: Bootstrap allows us to work with a variety of layout options such as the grid system, this grid system allows us to create pane layouts extremely quickly.
- Default modern text and button styles.
- A selection of handy javascript plugins such as popups, animated menus, and a responsive carousel.
This tutorial will give you a solid template for creating your bootstrap based skins and containers. You will also learn some new techniques such as file inclusion using the new client resource management features.
The videos contain:
Video 1 - How to Build a Basic DotNetNuke Skin with Twitter Bootstrap
- Introduction
- Downloading Bootstrap
- Unzipping the Bootstrap files into the DotNetNuke file system
- Accessing the DotNetNuke file system with Visual Studio Express for Web
- Creating the default skin file
- Creating a ‘barebones’ DotNetNuke skin
- Introduction to Client Resource Management
- How to implement client resource management within a skin
- Registering the Bootstrap CSS and Javascript files with client resource management
- Introduction to the viewport meta tag
- Implementing the viewport meta tag from within a skin
- How to create the Bootstrap container
Video Duration: 11min 16sec
Video 2 - Creating a DDR Menu Bootstrap Menu Template
- Introduction
- Creating the menu markup
- Preventing the Bootstrap menu conflicting with the admin menu
- Implementing the DDR menu within a DNN skin
- How to convert the bootstrap menu into a DDR menu
- How to display the portal title within a skin inside the Bootstrap menu
- How to add the login link to the Bootstrap menu using a skin token
- About the nav-collapse CSS class
Video Duration: 7min 40sec
Video 3 - Creating Instant Content Panes and Containers using the Bootstrap framework
- Introduction to the 12 column Bootstrap grid system
- Introduction to the Bootstrap Row
- How to create an instant two column layout
- How to creature a feature content or banner pane
- Creating three equally spaced columns
- Creating four equally spaced columns
- How to create the ‘Hero Unit’ Container
- Creating a Hero Unit Container with no title
- Creating the ‘Well’ container
Video Duration: 9min 01sec
Video 4 - Appendix
- How to allow modules to be dragged and dropped into empty panes
- Removing the grey line underneath module titles
- How to link the portal title to the portal homepage