hgs yükleme
escort kars escort kibris
My Cart (0)  |  My Orders  |  My Downloads  |  My Auction  |  My Account  |  Help

Login |Register        Search

Adding social buttons in the DnnBootster theme

                Print      Add To Favorite     Add To Watch List     Contact Author

Creator: host   12/23/2016 2:30:05 AM    Author: Geoff Barlow   Source: http://www.dnnsoftware.com/community-blog/cid/155358/placing-social-buttons-in-the-dnnbootster-theme   Views: 2063    0    0  
DNN Theme DNN 8 Dnn Skinning


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

Rating People: 0   Average Rating:     

     DnnModule.com is built to provide DNN quality modules and DNN skins, some of them are free, some not. We wish these stuffs (free or not ) can be useful to you.

     Besides that, we also provide a full range of professional services, ranging from web site build, seo, system management, administration, support, senior consultancy and security services. We act as if your development project or network was ours, with care and respect. We are not satisfied until it works the way you want it to, and we don't silently ignore found issues as somebody else's problem.