• +31(0)570 51 33 83

DnnConsulting Blog

Placing social buttons in the DnnBootster theme

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.

        <ul class="list-inline">
    <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
    <li><a class="linkdin" href="#"><i class="fa fa-linkedin"></i></a></li>
    <li><a class="tumblr" href="#"><i class="fa fa-tumblr"></i></a></li>
    <li><a class="skype" href="#"><i class="fa fa-skype"></i></a></li>
    <li><a class="dribbble" href="#"><i class="fa fa-fa-dribbble"></i></a></li>
    <li><a class="flickr" href="#"><i class="fa fa-flickr"></i></a></li>
    <li><a class="instgram" href="#"><i class="fa fa-instagram"></i></a></li>
    <li><a class="vimeo" href="#"><i class="fa fa-vimeo"></i></a></li>
    <li><a class="skype" href="#"><i class="fa fa-skype"></i></a></li>
</ul>
    

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:

        <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
    

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

        <ul class="list-inline">
    <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
    

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:

        /Portals/_default/Containers/DnnBootster and open the file ‘social.css’ to edit it.
    

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

        .socialC .contentpane ul.list-inline li a.facebook:hover    { background-color: #507CBE; }
.socialC .contentpane ul.list-inline li a.twitter:hover     { background-color: #63CDF1; }
.socialC .contentpane ul.list-inline li a.google:hover      { background-color: #F16261; }
.socialC .contentpane ul.list-inline li a.dribbble:hover    { background-color: #E46387; }
.socialC .contentpane ul.list-inline li a.linkdin:hover     { background-color: #90CADD; }
.socialC .contentpane ul.list-inline li a.tumblr:hover      { background-color: #4D7EA3; }
.socialC .contentpane ul.list-inline li a.flickr:hover      { background-color: #E474AF; }
.socialC .contentpane ul.list-inline li a.instgram:hover    { background-color: #4D4F54; }
.socialC .contentpane ul.list-inline li a.vimeo:hover       { background-color: #87D3E0; }
.socialC .contentpane ul.list-inline li a.skype:hover       { background-color: #36C4F3; }

    

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

        .socialC .contentpane ul.list-inline li a.skype:hover       { background-color: #36C4F3; }
    

Now change it to the following

        .socialC .contentpane ul.list-inline li a.pinterest:hover   { background-color: #36C4F3; }
    

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

        .socialC .contentpane ul.list-inline li a.pinterest:hover   { background-color: #BD2126; }
    

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:

<li><a class="pinterest" href="#"><i class="fa fa-pinterest-p"></<i></a></li>

All icons are from Font awesome.

Save and now your new Pinterest button should be visible.

Resources for the DnnBootster skin

Geoff Barlow : Dnn CMS addict and Dnn MVP 2014, 2015 And 2016. Owns and runs DnnConsulting, WeHostDnn, emberWeb and cmsXpress.
Total: 0 Comment(s)

Latest posts

Intro to the DnnContra theme for Dnn
3/11/2017 2:56 PM | Geoff Barlow
Welcome to the FREE DnnMinimalist to the Dnn ecosystem
3/11/2017 2:54 PM | Geoff Barlow
The new Dnn9 Administration User Experience
11/3/2016 1:31 PM | Geoff Barlow
Intro to the DnnMDesign theme for Dnn using Bootstrap 3
5/12/2016 2:08 PM | Geoff Barlow
Using SVG files in a Dnn text/html module
4/18/2016 11:52 AM | Geoff Barlow
Placing social buttons in the DnnBootster theme
4/14/2016 4:30 PM | Geoff Barlow
Changing & creating DnnBootster color schemes
4/7/2016 2:20 PM | Geoff Barlow
Intro to the DnnBootster Skin for Dnn using Bootstrap 3
4/7/2016 2:13 PM | Geoff Barlow

Categories

.WeHostDnn : Dnn Hosting
emberWeb : Web Agency
(Avialable soon)
interschools : For schools
cmsXpress : Internet Solutions

DnnConsulting : The best choice in complete website solutions!

Contact us via email

or phone +31 (0)570 51 33 83