In this tutorial we walk you through how to create a DNN theme using the wonderful Slinky JS jQuery plugin.

There are many useful jQuery plugins for creating interesting UI effects, and one of my absolute favorites is Slinky JS.

The Slinky JS produces a nice stacked headings effect, very effective in notifying the user of what content is available on the page without the need of a table of contents or a usability error-prone accordion system.

Upon page load, all the section headings are stacked at the bottom of the page, and as the user scrolls down the page, upon entering a new section of content, the heading will then scroll up to the top of the page where it will stack along with any other previous headings.

This video contains:

• Improving theme readability and spacing
• How to reset the plugin after a live CSS change
• How to create the alternating heading colors