Choose from our various pricing plans. There is a package for everyone!


Add floating social icons on your forum

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Tutorial Add floating social icons on your forum

Post by Mati™ on Sun Jul 29, 2012 10:38 pm

Hello,

This tutorial shows you how to add a floating Social icons on your forum.

HTML code that will display the icons, and will link to the required locations. Just make sure you put the html in your Homepage message.

The HTML:
Code:
<ul id="social_side">
<li><a href="#" title="Like Us"><img src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png"></a></li>
<li><a href="#" title="Follow Us"><img src="http://cdn3.iconfinder.com/data/icons/socialmediabookmark/32/twitter.png"></a></li>
<li><a href="#" title="Subscribe"><img src="http://cdn1.iconfinder.com/data/icons/socialmediabookmark/32/youtube.png"></a></li>
<li><a href="#" title="Rules"><img src="http://cdn5.iconfinder.com/data/icons/Absolute%2032-PNG/32/Warning.png"></a></li>
<li><a href="#" title="Help"><img src="http://cdn1.iconfinder.com/data/icons/Aristocracy_WebDesignTuts/32/Lifebuoy.png"></a></li>
</ul>

CSS code that will make sure the icons stick to the right side of the forum.

You need to add the following code to the stylesheet.

The CSS:
Code:
#social_side{
list-style:none;
position:fixed;
z-index:5;
right:0;
top:130px;
width:40px;
padding:8px 5px;
border:2px solid #fff;
border-right:none;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background: #fff;
}
#social_side li{
margin:9px 0 0 0;
line-height:0;
}
#social_side li:first-child{
margin-top:0;
}

The Icons
These icons are from Iconfinder. Please visit the site for more icons.

If you have any problems be sure to post them and I will get back to you A.S.A.P.

The Demo!


Last edited by Mati™ on Sat Nov 15, 2014 2:14 am; edited 3 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Sun Jul 29, 2012 10:54 pm

Great tutorial matti!




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Mati™ on Sun Jul 29, 2012 10:57 pm

Thanks mate and I'm glad you like it. Smile
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Tue Aug 14, 2012 4:53 am

it didnt work for me




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Mati™ on Tue Aug 14, 2012 8:56 am

Where did you put the HTML?
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Tue Aug 14, 2012 9:12 am

Im not sure where to put it, thats the part i dont understand




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Mati™ on Tue Aug 14, 2012 9:15 am

Hmm... it's so easy anyway put it to your Homepage message.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Tue Aug 14, 2012 9:17 am

It works now, but the reason i dont like putting it on the homepage is because it creates an empty box over the chatbox, you can take a look for yourself if you would like




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Mati™ on Tue Aug 14, 2012 9:18 am

Put it to index_body then.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Tue Aug 14, 2012 9:21 am

Anywhere? or is there a certain spot?




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Mati™ on Tue Aug 14, 2012 9:24 am

Above this
Code:
<!-- BEGIN message_admin_index -->
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Eclipse on Tue Aug 14, 2012 9:30 am

Worked Smile, Any way to place it on everypage? Using templates?




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Guest on Sat Aug 18, 2012 3:19 am

Is there any way to add it to a PhpBB3 Forum? Since I don't have Templates?

Guest
Guest


Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by AM99 on Sat Aug 18, 2012 3:40 am

yes,
paste the code in to your
homepage message and edit it there Smile
avatar
AM99
Member
Member

Age : 27
Posts : 152
Join date : 2012-07-27
Reputation : 2

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Nathan Adhitya on Sun Aug 19, 2012 11:39 am

you don't need to do anything what you need is to put on announcement or a widget
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Thu Sep 05, 2013 11:58 am

when am going to add this feature I get this error ?
and am using phpbb3 version
Code:

Error

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.
any help Thanks

Regards
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Fri Sep 06, 2013 1:08 pm

@unleashed wrote:when am going to add this feature I get this error ?
and am using phpbb3 version
Code:

Error

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.
any help Thanks

Regards
Add this:
Code:
{
at the bottom of the code.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Fri Sep 06, 2013 6:35 pm

ohh bro I tried again but still nothing happens hmmm

any help thanks you ?
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 8:35 am

It's working fine for me. Can you give me your forum link. And please check your last code in the CSS. Try adding this:
Code:
}
at the beggining of the code. Like here:
Code:
   
}
    #social_side{
        list-style:none;
        position:fixed;
        z-index:5;
        right:0;
        top:130px;
        width:40px;
        padding:8px 5px;
        border:2px solid #fff;
        border-right:none;
        -moz-border-radius:10px 0 0 10px;
        -webkit-border-radius:10px 0 0 10px;
        border-radius:10px 0 0 10px;
        -moz-box-shadow:0 0 7px rgba(0,0,0,.6);
        -webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
        box-shadow:0 0 7px rgba(0,0,0,.6);
        background: #fff;
        }
        #social_side li{
        margin:9px 0 0 0;
        line-height:0;
        }
        #social_side li:first-child{
        margin-top:0;
        }
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Sat Sep 07, 2013 8:39 am

http://gsmehfil.forumotion.net/

here is my forum link

thanks
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 8:43 am

Try the code I give you above.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Sat Sep 07, 2013 8:46 am

still same i can give u admin ac check your pm pls
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 9:09 am

@unleashed wrote:still same i can give u admin ac check your pm pls
You are ready;) . Your HTML is in:
Display->Homepage->Generalities->Homepage message
The CSS is in Display-> Pics and Colors-> CSS.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by unleashed on Sat Sep 07, 2013 10:05 am

ohh thanks for helping me out

but i want it to move i mean hide when mouse moves over it

umm in one word like slide ( i think you got it ) ?

Thanks waiting for ur response ..
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Th1nK on Sat Sep 07, 2013 10:32 am

This is the best I can do:
Code:
<div class="slide-main">

  <div class="slide-container">
        <ul id="social_side">
        <li><a href="#" title="Like Us"><img src="http://cdn5.iconfinder.com/data/icons/Mighty_Social_Icons/32/facebook_32.png"></a></li>
        <li><a href="#" title="Follow Us"><img src="http://cdn3.iconfinder.com/data/icons/socialmediabookmark/32/twitter.png"></a></li>
        <li><a href="#" title="Subscribe"><img src="http://cdn1.iconfinder.com/data/icons/socialmediabookmark/32/youtube.png"></a></li>
        <li><a href="#" title="Rules"><img src="http://cdn5.iconfinder.com/data/icons/Absolute%2032-PNG/32/Warning.png"></a></li>
        <li><a href="#" title="Help"><img src="http://cdn1.iconfinder.com/data/icons/Aristocracy_WebDesignTuts/32/Lifebuoy.png"></a></li>
        </ul>
<style>
        #social_side{
        list-style:none;
        position:;
        z-index:5;
        right:0;
        top:130px;
        width:40px;
        padding:8px 5px;
        border:2px solid #fff;
        border-right:none;
        -moz-border-radius:10px 0 0 10px;
        -webkit-border-radius:10px 0 0 10px;
        border-radius:10px 0 0 10px;
        -moz-box-shadow:0 0 7px rgba(0,0,0,.6);
        -webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
        box-shadow:0 0 7px rgba(0,0,0,.6);
        background: #fff;
        }
        #social_side li{
        margin:9px 0 0 0;
        line-height:0;
        }
        #social_side li:first-child{
        margin-top:0;
        }
</style>

  </div>
</div>
<style>
.slide-main {
  position: fixed;
 top: 50px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-container {
  height:100px;
  width:100px;
 
  position: fixed;
 top: 50px;
  right: -80px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-main:hover {
right:270px;
}
.slide-main:hover .slide-container{
  right: 0;
}
</style>
DEMO:
http://fmotiongraphics.bulgarianforum.net/h15-asdasdasa
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: Add floating social icons on your forum

Post by Sponsored content


Sponsored content


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum