Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

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 DnnMDesign theme for Dnn

DnnC MDesign theme for DnnTo follow up the FREE DnnBootster theme I decided to take it 1 step further with the new FREE, Open Source theme ‘DnnMDesign’.

So what is different with the DnnMDesign theme I hear you ask, well the DnnMDesign theme uses Bootstrap v3.3.6 just like the DnnBootster them but this time I have added an extra css framework so that you have the look and feel of ‘Material Design’.

What is ‘Material Design’?

It’s quite simple, Google created a set of design rules so that there is continuity through all types of devices and platforms. Here is a link to Google’s introduction to ‘Material Design’.

From these design rules, some individuals and communities have created Css frameworks (like Bootstrap). There are also css frameworks that extend Bootstrap and one of which I have used to create the DnnMDesign theme which is called ‘Material Design for Bootstrap’. MDB allows you to still have all the goodness of Bootstrap but have the look and feel of Material Design, the best of both worlds!.

The aims for creating DnnMDesign theme

  • To create a theme that can be used as a base to build upon.
  • To create a theme that can be easy to understand how Dnn themes work.
  • To create a theme that is easily to customize and build upon.
  • To create a theme that can be used on virtually any kind of Dnn site.
  • A Dnn theme that can be used as learning tool to create themes using the Bootstrap framework.
  • To get people inspired to create their own Dnn theme and also launch it to the community.
  • Create a Dnn theme that adopts the 'Material Design' look and feel.

Say hello to the DnnMDesign Theme!

A demo of the DnnMDesign theme can be found here : www.dnnmdesign.com
The DnnMDesign theme can be downloaded here for free, and the source code can be found here.
The DnnMDesign theme was created from scratch, and the theme 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 theme 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 theme into sections also helps the DnnMDesign theme as a learning tool, because the them is split into sections it is easier to understand for people wanting to learn how to create a Dnn theme of their own.

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 theme file.

What’s included in the DnnMDesign Theme?

At the time of writing:

  • 5 theme layouts
  • 23 containers
  • Multiple color variations
  • All Bootstrap css, fonts and components which includes dropdowns, thumbnails and carousel etc.
  • Font Awesome icons.
  • The Material Design Icons.

Resources for the DnnMDesign theme

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

Comments

John Edward
Thanks for the contribution Geoff, it looks great and will definitely have a play!
John Edward Friday, May 13, 2016 6:59 AM (link)
John Cornelison
Superb work Geoff! You've taken a bunch of best-of-breed tools and merged them into an excellent, elegant - and usable - skin. This is what I've been looking for to do a redesign of one of my sites! THANK YOU for all your innovation and hard work to bring this to the community.
John Cornelison Saturday, May 14, 2016 1:55 PM (link)
Craig Mitchell
Great design, It's nice to see some free skins/themes for the few of us who have problems making them. Hopefully will say keep them coming :)
Craig Mitchell Monday, May 23, 2016 3:29 AM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
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 (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (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)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out