MyBB Community Forums

Full Version: Add this sidebar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys, I just want to consult on how to put this on my forum sidebar? [Image: VRbUxke.png]

and also, can I put my costumized logo there ? Thanks in adv
You can do it with simple coding.
Is what I found on google, Let us know if it works for you.
http://www.cssportal.com/blog/css-social-media-sidebar/
So for costumize sidebar ? Can it be possible sir ? Because I also want to make it as a hyperlink or directory. Can you teach me how ?
You put the CSS in the CSS files in your theme and you put the HTML in the templates and it should show up.
Can I have an example sir ? Because Im a little bit unprofessional when it comes to CSS lol hehe
Styles/templates

Go to templates

Choose your style

Go to the footer -

Put this at the top of your footer.


<aside id="sticky-social">
    <ul>
        <li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li>
        <li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li>
        <li><a href="#" class="entypo-gplus" target="_blank"><span>Google+</span></a></li>
        <li><a href="#" class="entypo-linkedin" target="_blank"><span>LinkedIn</span></a></li>
        <li><a href="#" class="entypo-instagrem" target="_blank"><span>Instagram</span></a></li>
        <li><a href="#" class="entypo-stumbleupon" target="_blank"><span>StumbleUpon</span></a></li>
        <li><a href="#" class="entypo-pinterest" target="_blank"><span>Pinterest</span></a></li>
        <li><a href="#" class="entypo-flickr" target="_blank"><span>Flickr</span></a></li>
        <li><a href="#" class="entypo-tumblr" target="_blank"><span>Tumblr</span></a></li>
    </ul>
</aside>


Go to the Themes
Click on your theme
find css.css or simlar

Click advance mode,

Put this at the end of your css.
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
   font-family: "entypo", sans-serif;
}
a { 
   text-decoration: none;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.container {
   margin: 0 auto;
   padding: 20px 50px;
   background: white;
}
#sticky-social {
   left: 0;
   position: fixed;
   top: 150px;
}
#sticky-social a {
   background: #333;
   color: #fff;
   display: block;
   height: 35px;
   font: 16px "Open Sans", sans-serif;
   line-height: 35px;
   position: relative;
   text-align: center;
   width: 35px;
}
#sticky-social a span {
   line-height: 35px;
   left: -120px;
   position: absolute;
   text-align:center;
   width:120px;
}
#sticky-social a:hover span {
   left: 100%;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }

#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }

#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span { background: #dd4b39; }  

#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }  

#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }  

#sticky-social a[class*="stumbleupon"],
#sticky-social a[class*="stumbleupon"]:hover,
#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }  

#sticky-social a[class*="pinterest"],
#sticky-social a[class*="pinterest"]:hover,
#sticky-social a[class*="pinterest"] span { background: #cc2127; }  

#sticky-social a[class*="flickr"],
#sticky-social a[class*="flickr"]:hover,
#sticky-social a[class*="flickr"] span { background: #ff0084; }  

#sticky-social a[class*="tumblr"],
#sticky-social a[class*="tumblr"]:hover,
#sticky-social a[class*="tumblr"] span { background: #32506d; }


It should give you a sitebar of social sites.
So sir, for my costumized one ? What should I change to that one ?
Are you wanting to add one of those or are you trying to move it to your sidebar that is an addon on the forum?
I want to add a costumized one sir. Maybe similar to what youve said sir. sidebar addon on the forum