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.

Placing social buttons in the DnnBootster theme

On every skin layout of the DnnBootster theme (apart from the home page skin layout), in the header there is a Dnn pane called ‘SocialPane’. This is where you can place all of your social buttons like FaceBook, Twitter & Google+ etc.

To make them look nice and sassy we created some Css to display them so that the buttons display and match the theme.

Here’s how you can place your social buttons

First place a text/html module into the ‘SocialPane’. The DnnBootster theme knows that this pane is to be used for social buttons so it will first set the container for the text/html module to a container called ‘social.ascx’, you don’t need to worry about this, its automatically do for you.

Now edit the module by clicking on the ‘Edit Content’ dropdown. Once you have the editor open you’ll need to change from wysiwyg mode to source mode, click the ‘Source’ or ‘html’ mode option

Copy the following html into the html editor.

The html is a simple, formatted ordered list that has a bit of css styling, the only thing you need to edit is the buttons you want to include in your social link list. Each social button is held in an ‘li’ tag, so for a Facebook button you would use this line of html in your list:

Say you only need Facebook and Twitter in your list you would have this html:

At present there is 10 styled social buttons available: Facebook, Twitter, Google+, Dribbble, LinkedIn, Tumblr, Flickr, Instragram, Vimeo, Skype.

You will need to insert you social link into the html by replacing the ‘#’ with the link.

Create your own social link styles

It possible to create your own social link icons and styles if the social button that you need is not on the list. If you want to add a social button and style you’ll need to edit the ‘social’ container.

Say you want to add a social button style for Pinterest …….

In your Dnn install navigate to the following file:

Look through the css until you see lines like the following:

Now copy one of the lines to add your new social button style

Now change it to the following

This is the name in the html you will use to display the style for this social button. Now you need to change the color of the mouse over, change the above line to the following

Save the file and go back to your site to edit the social buttons, open the text/html to add your new Pinterest social button and add the following line of html:

All icons are from Font awesome.

Save and now your new Pinterest button should be visible.

Resources for the DnnBootster skin


There are currently no comments, be the first to post one.

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?