MyBB Community Forums

Original Tutorial on : www.myskins.org

Hello guys,
I have been asked by many people on how to add social links into the footer or header or where ever possible just like my site.

So i am making a tutorial on how to add the links to your footer, the social icons.

So the first thing you need is to have a Social icon set.
Example down load this set : Link

Create a Folder called Social in your server, which means in public_html > Images > Social.

Upload whatever icons you need to show.

Now into the coding :
First the css task:

All you need to do is copy this code and place it at the bottom of your global.css of your theme.

.fb a {
    background: url(images/Social/facebook.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    opacity: 0.8;
    float: right;
    padding-right: 5px;    
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.fb a:hover {
   opacity: 1;
}

.tw a {
    background: url(images/Social/twitter.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
     opacity: 0.8;
    float: right;
    padding-right: 5px;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.tw a:hover {
   opacity: 1;
}

The example is above has only facebook icon and twitter icon.
If you need extra icons, just make another class and copy the facebook code into it.

Now the Html time:

Below is the code which i have added into footer template.
You can add it any where to your likes.

<div>
<span class="tw"><a href="https://twitter.com/" target="_blank" title="Follow us on Twitter"></a></span>
<span class="fb"><a href="https://www.facebook.com/" target="_blank" title="Like Us on Facebook"></a></span>
<span style="float: right;padding: 5px;font-size: 18px;color: #606060;">Social Links :</span>
</div>

All you need is to modify the links in the code, that links your profile in the respective network.

Preview: www.myskins.org look at footer .

This finishes the tutorial, and it is as simple as it takes less than 10 minutes.

Hope this helpful, and feel free to ask your questions.
regards,

You realise how messed up your site is on the iPad and I'm assuming other mobile devices too ? You need to start designing for mobile devices, that's just as important if not more important. Sry for off topic but I thought that was appropriate.

[attachment=28717]

(2013-02-28, 09:13 AM)Jambuster Wrote: [ -> ]You realise how messed up your site is on the iPad and I'm assuming other mobile devices too ? You need to start designing for mobile devices, that's just as important if not more important. Sry for off topic but I thought that was appropriate.

This has nothing what-so-ever to do with this thread. PM him this.

On topic: Good tutorial for the beginners trying to figure out templates .

(2013-02-28, 09:59 AM)Lith Wrote: [ -> ]

(2013-02-28, 09:13 AM)Jambuster Wrote: [ -> ]You realise how messed up your site is on the iPad and I'm assuming other mobile devices too ? You need to start designing for mobile devices, that's just as important if not more important. Sry for off topic but I thought that was appropriate.

This has nothing what-so-ever to do with this thread. PM him this.

On topic: Good tutorial for the beginners trying to figure out templates .

I've already noted that in my response. Although, he advertises himself and a theme/skin creator. He obviously doesn't develop for mobile devices and in this day and age as a developer you must develop for mobile devices as so many people use them. i just though it was appropriate to point this out although its not thread related.

I downloaded these icons and want to add them as sharing links to my header. Will this also work for what I am trying to do?

http://www.iconarchive.com/show/simple-i...ech.2.html

I know "AddThis" has some but I am not a fan of their icons.

(2013-03-01, 08:36 PM)ALUXi33 Wrote: [ -> ]I downloaded these icons and want to add them as sharing links to my header. Will this also work for what I am trying to do?

http://www.iconarchive.com/show/simple-i...ech.2.html

I know "AddThis" has some but I am not a fan of their icons.

Of course it will work. Just make sure the file names are all correct.

If I do what he says in the tutorial aren't they just going to be links? I want them to be share links.

Would be better to use actual vendor icons. Your Twitter icon is not even current.

(2013-02-28, 09:59 AM)Lith Wrote: [ -> ]This has nothing what-so-ever to do with this thread. PM him this.
On topic: Good tutorial for the beginners trying to figure out templates .

Thanks buddy, glad you like it

(2013-03-01, 10:00 PM)ALUXi33 Wrote: [ -> ]If I do what he says in the tutorial aren't they just going to be links? I want them to be share links.

For share links : here is a tutorial : http://community.mybb.com/thread-132948.html

(2013-03-01, 10:06 PM)brad-t Wrote: [ -> ]Would be better to use actual vendor icons. Your Twitter icon is not even current.

He he, yes, but what i gave here is just an example, you can use whatever icons you like to.
Thank you