2. Flexbox Responsive Menu, Responsive Gutters and Padding
  1. 11m 14s
    Jul 01, 2017

We've learned a lot about cutting edge DNN theme development over the past 6 months or so, so in this tutorial, we put our skills into practice and develop a complete, modern DNN theme using elements from several previous tutorials.

We begin the tutorial by "responsifying" the CSS grid theme we developed in the last tutorial. We will then augment this theme with the responsive flexbox menu system we developed back in October, and then implement the good practice typography that we learned about in August.

To top this off we will be adding the vital DNN skin objects such as the site logo, the login/logout links and we will then perform any required tweaks to prepare the final product.

This video contains:

  • Setting up the flexbox responsive menu from the flexbox theme
  • Adjusting theme background colours
  • How to add an extra gutter to the CSS grid
  • Responsive gutter sizing based on the em unit
  • How to add the portal logo skin object
  • Applying common padding to a theme
skin advanced dnn8
Andy Stephenson

About 2017 Edition

2h 47m 47s All Jan 01, 2017

DNN Video Tutorials posted during 2017

dnn7 dnn8 advanced jquery skin
Andy Stephenson

30 days money back guaranteed