2. Theme Sections and Full Screen Sizing
  1. 11m 20s
    Nov 01, 2015

In this tutorial we demonstrate how to build a single page application style theme for DNN.

Single Page Applications or SPA's have become very popular in modern web development, mostly due to the fact that the page doesn’t need to reload to access different information on the site. This drastically improves the user experience, the user can get to the information they want to see without waiting for a new page to finish loading.

In single page applications, the navigation is very important and it needs to work in a very different way to a standard website or DNN theme… When you click on a menu item, we need to automatically scroll the user’s viewport to the correct section of the page.

This video contains:

  • Creating four independent page sections
  • Correct IDs and CSS classes
  • How to access Chrome's Developer Tools
  • Inspecting the DOM
  • How to set an element height to match the height of the viewport
  • What are VH units
  • Why the min-height property
  • Using the Chrome color picker
  • Adding demo content
Tags:
dnn7 advanced build a website
Author:
Andy Stephenson

About 2015 Edition

3h 50m 37s All Jan 01, 2015

DNN Video Tutorials posted during 2015

Tags:
css3 dnn6 dnn7 3rd party module advanced bootstrap build a website integration newsletter seo skin
Author:
Andy Stephenson
Back

Try FREE
30 days money back guaranteed