Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved [How To?] Add this sidebar
#1
Not Solved
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
Reply
#2
Not Solved
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/
Looking for help and not support, PM me. 
Reply
#3
Not Solved
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 ?
Reply
#4
Not Solved
You put the CSS in the CSS files in your theme and you put the HTML in the templates and it should show up.
Looking for help and not support, PM me. 
Reply
#5
Not Solved
Can I have an example sir ? Because Im a little bit unprofessional when it comes to CSS lol hehe
Reply
#6
Not Solved
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.
Looking for help and not support, PM me. 
Reply
#7
Not Solved
So sir, for my costumized one ? What should I change to that one ?
Reply
#8
Not Solved
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?
Looking for help and not support, PM me. 
Reply
#9
Not Solved
I want to add a costumized one sir. Maybe similar to what youve said sir. sidebar addon on the forum
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)