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

Comments

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

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
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 (209)
Chris Paterra (55)
Clinton Patterson (40)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (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 (274)
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)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
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)
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 (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  

What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out