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