Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Add Social Links to Your MyBB Forum

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #1
Information Add Social Links to Your MyBB Forum

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 this 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.

Code:
.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.

Code:
<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.

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,

[Image: lt79ucY.png]
02-28-2013 02:21 PM
Find
0
Quote




Bond Offline
Banned

Posts: 16
Joined: Dec 2012

Nationality:

Mood: None

Points: 289.80Points
Post: #2
RE: Add Social Links to Your MyBB Forum

Very nice and well explained.

Good Job Envira.
03-05-2013 09:20 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #3
RE: Add Social Links to Your MyBB Forum

(03-05-2013 09:20 PM)Bond Wrote:  Very nice and well explained.

Good Job Envira.

Thank you buddy,
Glad you like it.
regards,

[Image: lt79ucY.png]
03-06-2013 05:21 PM
Find
0
Quote




smash Offline
Junior Member
**

Posts: 1
Joined: Sep 2016
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 87.58Points
Post: #4
RE: Add Social Links to Your MyBB Forum

Hi, I just had a quick question that seems to be totally passing me by. I installed the AXIS theme to my site last night (it looks amazing, thank you so much for creating and sharing it!) and the footer already has the social media icons to link to, but I have absolutely no idea where in the Admin CP or in the Stylesheets to edit them so that I can have them properly link?

I want to remove the Twitter and g+ icons and/or replace them with links to Discord and Tumblr instead (the icons I can make myself). Do I have to add the above codes myself, or are they already in the theme's stylesheets because you included the icons? I hope this message reaches you well, and I would appreciate any help, thank you!

(Also, where do I go to set up links for the "More" section in the navigation header? Sorry! MyBB is still above my learning curve when it comes to programming.)
Yesterday 03:59 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,123 09-05-2016 02:37 AM
Last Post: noah
  [1.8x] [How] MyBB Reputation Gabbar 0 413 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 7,880 07-07-2015 09:18 AM
Last Post: Unr34lity
  Forum Hover Effect on MyBB Index Page envira 8 4,411 08-17-2014 11:59 PM
Last Post: !!!a
  How To Create Free MyBB-Based Forum. Jero 15 3,338 07-20-2014 06:44 PM
Last Post: VetFalco
  Add a snow effect to your forum Dropkaz 5 1,417 06-09-2014 08:00 PM
Last Post: LivingKing
Thumbs Up Style your forum buttons with css : with multiquote working envira 12 5,439 03-04-2014 10:02 PM
Last Post: Tarek Fouad

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.