2. Creating a DDR Menu Bootstrap Menu Template
  1. 7m 40s
    Mar 01, 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.

This video contains:

  • 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
Tags:
dnn7 skin bootstrap menu
Author:
Andy Stephenson

About 2013 Edition

2h 47m 18s All Jan 01, 2013

DNN Video Tutorials posted during 2013

Tags:
dnn5 dnn6 dnn7 3rd party module advanced beginners bootstrap email installation menu search skin
Author:
Andy Stephenson
Back

Try FREE
30 days money back guaranteed