1. Advanced Header Effects for DNN Themes - Setting up a Header to Fill the Viewport Height & Vertical Centering
  1. 8m 50s
    May 01, 2015

In this tutorial we demonstrate how to achieve some of the modern and popular header effects such as parallax backgrounds, scroll based animations and more basic responsive layout techniques such as sizing to the viewport height and vertical centering.

These techniques involve the application of several powerful CSS3 properties, and some jQuery magic.

Once complete, you should have a good understanding of what we can achieve with these properties and techniques and you’ll be ready to start experimenting with them to achieve the exact effect you require.

In this tutorial we will be working on this Dark Horizon theme that we developed in a previous tutorial: How to Create a Custom DNN Skin with Bootstrap 3.

This video contains:

  • Introduction
  • Adding effect specific classes to the header
  • Targeting and selecting effect classes with CSS
  • How to use the new ‘vh’ units to achieve full viewport height
  • Common pitfalls with vertically centered content
  • How to vertically center content
  • CSS3 table display properties
dnn6 dnn7 skin bootstrap advanced
Andy Stephenson

About 2015 Edition

3h 50m 37s All Jan 01, 2015

DNN Video Tutorials posted during 2015

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

30 days money back guaranteed