MyBB Community Forums

Full Version: how to add social media follow buttons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
hi how do i add social media follow buttons just like on mybb community page
(07-18-2015, 02:23 PM)flipmose Wrote: [ -> ]hi how do i add social media follow buttons just like on mybb community page

MyBB has the following in the index template, after the header - {$header}:
<div class="social">
    <span class="intro">
        Stay on top of what's happening with MyBB
    </span>
    <span class="twitter">
        <a href="http://twitter.com/mybb">
            Follow @MyBB on Twitter
        </a>
    </span>
    <span class="facebook">
        <a href="http://facebook.com/mybboard">
            Like MyBB on Facebook
        </a>
    </span>
    <span class="youtube">
        <a href="https://www.youtube.com/c/mybbgroup">
            Subscribe on YouTube
        </a>
    </span>
</div>
There you have to change the accounts to your forum's account. Futher you need to add a css classes .social, .intro, .twitter, .facebook and . youtube such as in global.css. This is what MyBB uses in global.css:

.social {
    padding: 12px;
    text-align: center;
}
.social .intro {
    color: #666;
    margin-right: 16px;
}
.social .twitter, .social .facebook, .social .youtube {
    border-left: 1px solid #ddd;
    margin: 0 16px 0 0;
    padding: 0 0 0 16px;
}
.social .twitter a, .social .facebook a, .social .youtube a {
    padding-left: 25px;
}
.social .twitter a {
    background: rgba(0, 0, 0, 0) url("http://mybb.github.io/mybb.com/assets/images/twitter.png") no-repeat scroll left center;
}
.social .facebook a {
    background: rgba(0, 0, 0, 0) url("http://mybb.github.io/mybb.com/assets/images/facebook.png") no-repeat scroll left center;
}
.social .youtube a {
    background: rgba(0, 0, 0, 0) url("http://mybb.github.io/mybb.com/assets/images/youtube.png") no-repeat scroll left center;
}
also when i try to change width of the site i get some issues

check the pictures attached
(07-18-2015, 03:21 PM)flipmose Wrote: [ -> ]check the pictures attached

No pictures attached.

This is a different subject, make a new thread for that.

When this problem (social media) is solved, mark the thread as such.
(07-18-2015, 03:21 PM)flipmose Wrote: [ -> ]also when i try to change width of the site i get some issues

check the pictures attached

Remember to close all div.