Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Intro to the DnnBootster Skin for Dnn using Bootstrap 3

A couple of weeks ago I had a bit of time on my hands so I decided to create a new open source skin for the Dnn community. The first thing I did was to ask, via social channels what framework people would like to see the skin using, the choices were as follows:dnn

  • Zurb Foundation 6 : this would be an upgraded version of the DnnFoundation skin from version 5 to 6
  • MaterializeCss : a framework that is based on the Material design pattern.
  • Bootstrap : version 3.3.6, at the time of writing Bootstrap v4 is still alpha.

I really wanted to do something different than Bootstrap, either MaterializeCss or an upgrade to the DnnFoundation skin I created a couple of years back, but it was obvious from the reactions I received that the community wanted another Bootstrap skin so I began to create the new skin for the community with Bootstrap and the outcome was the DnnBootster skin!

The goals for creating an open source skin for the community

  • Create a skin that can be used as a base to build upon.
  • The skin should be easy to understand how Dnn skins work.
  • The skin should be easily customizable.
  • The skin should be able to be used on virtually any kind of Dnn site.
  • The skin can be used as learning tool to create skins using the Bootstrap framework.
  • To get people inspired to create their own skin and also launch it to the community.

Hello DnnBootster skin!

A demo of the DnnBootster skin can be found here :
The DnnBootster skin can be downloaded here for free, and the source code can be found here.
The DnnBootster skin was created from scratch, and the skin files are split up into sections:

  • The top bar
  • The menu bar
  • The Page header
  • The Content area
  • The Footer
  • The legal footer

Each section points to an include file for that specific section, why?, this way you can remove, add or change the layout and look to your needs. It also helps for the user to look into the html and understand what individual sections are using.

For example: In the ‘Content area section’ there are over 20 rows with different layouts, the chances are that the user would only need 3 or 4 of these rows, the user could then delete the rows that are not needed, leaving only the desired rows. If something goes wrong with the layout he/she would be able to look at a small section of code and correct the problem quicker and easier. The user could even create their own rows.

Another reason is that most of the time you have more than 1 skin layout, ‘home page’ and an ‘inner page’ for example, if you change the top bar include file the changes will be automatically shown on all layouts.

Splitting the skin into sections also helps the DnnBootster skin as a learning tool, because the skin is split into sections it is easier to understand for people wanting to learn how to create a Dnn skin of their own.

I also used this technic on the DnnFoundation skin a couple of years ago.

If people don’t want to use the include technic they can just copy the contents of the include files and paste it directly in the main skin file.

What’s included in the DnnBootster skin?

At the time of writing:

  • 5 skin layouts
    • A home page skin
    • An inner page skin
    • A 404 page skin for ‘page not found’
    • An admin skin for admin pages
    • A Modal skin for popups like login and edit popups so that the popups display correctly on a mobile device.
  • 27 containers
  • 18 color schemes
  • All Bootstrap css, fonts and components which includes dropdowns, thumbnails and carousel etc., for more info, click here.
  • Font Awesome icons, to view a list of fonts and to find out how to use them, click here

Resources for the DnnBootster skin

In the next couple of days I plan to write another blog or 2 about how to change the color scheme of the DnnBootster skin as well as using Bootstraps many components.

Enjoy the DnnBootster skin and I hope this helps you to create your own open source skin for the community to use!


David Poindexter
Thank you for your contribution to the community Geoff! We need even more people to step up to the plate like you. This is a fabulous contribution and your efforts are applauded.
David Poindexter Monday, April 18, 2016 3:10 PM (link)
Geoff Barlow
Hey David, thanks and I do agree with you, hopefully more people will contribute, the more the better!
Geoff Barlow Tuesday, April 19, 2016 5:06 AM (link)
Aderson Oliveira
Hey Geoff,

I really liked what I have seen by reading this blog. I will put it to test for the DNNBrasil usergroup which I'm trying to give a new face!

Thank you for this! Great to see another open source theme for DNN. We don't see many of those around.

Aderson Oliveira Friday, April 22, 2016 4:17 PM (link)
Geoff Barlow
@Aderson, glad to see that you like what you see! If there are any questions/comments just contact me. Just to let you know, there is another OS skin/theme in the pipeline as well, hopefully in the next couple of weeks it'll be finished.


Geoff Barlow Monday, April 25, 2016 2:42 AM (link)
Aderson Oliveira
The more the merrier Geoff! Thank you!
Aderson Oliveira Monday, April 25, 2016 9:52 AM (link)

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?