Forum moderator: bigblog |
uCoz Community » For Webmasters » Custom Solutions » Facebook bar for your website (Made by Animorph - Tutorial) |
Facebook bar for your website |
Facebook Toolbar Hello Dear Users I (Animorph) had some mails and PM's on several websites about how to create the old kind of facebook toolbar at the bottom of the page , so well i decided to make some time free and build one for uCoz websites , this is just the beta version , there will be more colourful designs of it in future Screenshots The first things that you need to do: - go to your "File Manager" and create a map called "img" - upload the images in this archive to your "img" folder - go to Main » Customize design » Global blocks » New block - Name of the block: "TOOLBAR" more about creating global blocks is here Now up to the coding part: go to your CSS stylesheet » Main » Design » Design management (CSS) Paste this at the bottom: Code /* DO NOT REMOVE THIS COPYRIGHT INFRINGEMENT THIS WAS CREATED BY Animorph @forum.ucoz.com */ .toolbarbg {-moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px;bottom:0px;float:left;position:fixed;border-top:1px solid #000000;border-left:1px solid #000000;border-right:1px solid #000000;width:95%; height:25px; background:url('/img/toolbarbackground.png') #ffffff repeat-x ;margin-top:200px;margin-left:auto;margin-right:auto;} .toolbar {-moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px;padding:0 0px 0 0; margin:0; list-style:none; height:25px;} .toolbar li {-moz-border-radius-topleft: 5px;float:left;} .toolbar li a {-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;outline:none;display:block; float:left; height:25px; line-height:25px; color:#585858; text-transform: uppercase; text-decoration:none; font-family:tahoma, verdana, sans-serif; text-align:center; padding:0px 0px 0 11px; font-size:7pt; font-weight:bold;} .toolbar li a span {-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;float:left; display:block; padding:0px 18px 0 3px; } .toolbar li a:hover {background:#ffffff;color:#fff; ;color:#585858;background-position: 0% -25px;} .toolbar li a:hover span {background:#ffffff;color:#585858;background-position: 100% -25px;} .toolbar li a:active {outline:none;color:#fff; background: url('/img/toolbarli.png')left;background-position: 0% -25px;} .toolbar li a:active span {background:url('/img/toolbarli.png') no-repeat;color:#fff;background-position: 100% -25px;} /* ------------------ */ Now go to your "Global block" named "TOOLBAR" Main » Customize design » Global blocks » TOOLBAR » click it Put this in there: Code <!-- Facebook Navigation Bar --> <div class="toolbarbg" style="float:bottom;;margin-left:40px;"> <ul class="toolbar" style="padding-top:0px; top:0;"> <li class="cur"><a href="$HOME_PAGE_LINK$"><span><img src="/img/home.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt=""></span></a></li> <li class=""><a href="$HOME_PAGE_LINK$/forum"><span><img src="/img/ballon.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt="">Forum</span></a></li> <li class=""><a href="$HOME_PAGE_LINK$/photo"><span><img src="/img/pictures.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt="">Photo Album</span></a></li> <li class=""><a href="http://www.facebook.com/RubenWieAnders" target="_blank"><span><img src="/img/facebook.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt="">Facebook</span></a></li> <li class=""><a href="http://twitter.com/#!/uCause" target="_blank"><span><img src="/img/twitter.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt="">Twitter</span></a></li> <li class=""><a href="$HOME_PAGE_LINK$/index/0-3"><span><img src="/img/info.png" style="border:none;float:left;outline:none;padding-top:4px;padding-right:2px;line-height:25px;display:block; " alt="">Contact us</span></a></li> <div style="position:fixed;bottom:1;right:43;"> <div id="chat" style="display: none;"><table border="0" cellpadding="0" cellspacing="0" width="300" background="" bgcolor="#FFffff" style="border: 1px solid gray; background: #ffffff;"> <tr><td height="32" background="" style="border: 1px solid gray; background:url('/img/toolbarli.png')repeat #ffffff;"><a href="http://www.forum.ucoz.com/index/8-0-Animorph" target="_blank" style="line-height:2;color:#ffffff;margin-left:4px; padding-top: 4px;text-decoration:none;font-size;14px;outline:none;">Made by Animorph<a href="javascript://" onclick="$('#chat').slideToggle(1000)" style="line-height:2;color:#ffffff; padding-top: 4px;"><img alt="" src="/img/close.png" style="margin-right:2px;border:0;float:right"></a></td></tr><tr><td style="background: #ffffff; text-align: center; border-top: 1px solid gray;"> <div class="boxContent" style="background:#BDBDBD;">$CHAT_BOX$</div> <table border="0" cellpadding="" cellspacing="" width="100%"> <tr><td width="206"> </td></tr></table> </td></tr></table></div> <div style="height: 22px; width: 298px; border: 0px solid gray; background: url:('/img/background.png'); margin-top: 1px;color:#585858;border-left: 1px solid gray;"> <div style="float:right; height: 18px; width: 60px; border-left: 1px solid gray;text-align: center; padding-top: 4px;">$TIME$</div> <div style="margin-top:2px; text-align:center;color:#585858;"><a href="javascript://" onclick="$('#chat').slideToggle(1000)" style="text-decoration:none;line-height:2;color:#585858; padding-top: 4px;outline:none;">Chat-Box</a></div> </div></div> </ul> </div> Now the last thing: Go to Main » Design » Quick substitution of template parts » Replacement mode: Multiline in my case its <body> but it also can be <body and much more in here , it depends on your site> Find: Code <body> Replace by: Code <body>$GLOBAL_TOOLBAR$ Author and Creator: Me (Animorph) Confirmations and proof of this: - CreativeCollusions - Natashko - coatham - Hermes Downloads: - archive Notifications: - This is tested on allot of uCoz default designs and worked 100% ( tested in default designs only ) - Do not claim this your own or you will get punished - This is for personal usage of uCoz users only , do not re-share - This is only for FIREFOX,IE is the worst browser ever Sources i used: - http://forum.ucoz.com/forum/38-8947-1 Attachments:
6230964.png
(10.7 Kb)
·
8674922.png
(25.9 Kb)
To busy building a passive income online ;)
|
coatham, i will re-follow these steps , again on my website
re-read it and check if you did not missed anything also provide your website his uRL so i can see what is changing To busy building a passive income online ;)
Post edited by Animorph - Wednesday, 2010-12-22, 3:43 PM
|
Animorph, Sure its Projection Entertainments Go ahead and register ill make you a mod because i trust you.
Need More In Depth Help About a topic post it here: Click Here
|
coatham, the problem is fully on your side , i retested it on a random website that my brother has , i followed these steps and it worked
i think you need to put do this: Find: Code <body style="background-color:#FFFFFF; margin:0px; padding:0px;"> Replace by: Code <body style="background-color:#FFFFFF; margin:0px; padding:0px;">$GLOBAL_TOOLBAR$ To busy building a passive income online ;)
Post edited by Animorph - Wednesday, 2010-12-22, 3:49 PM
|
Animorph, Hmm... Ill delete everything and start again.
Added (2010-12-22, 9:54 Am) Need More In Depth Help About a topic post it here: Click Here
|
coatham, if you check my test website for the moment , it proofs that it also works on your template
i do not know hat you are doing wrong , have you created a Global block wih the exact good name and put content in it ? check if you did the step on my previous post To busy building a passive income online ;)
Post edited by Animorph - Wednesday, 2010-12-22, 3:56 PM
|
i have checked your source code and you did not replaced that like this
Go to Main » Design » Quick substitution of template parts » Replacement mode: Multiline Find: Code <body style="background-color:#FFFFFF; margin:0px; padding:0px;"> Replace by: Code <body style="background-color:#FFFFFF; margin:0px; padding:0px;">$GLOBAL_TOOLBAR$ To busy building a passive income online ;)
|
Animorph, Here are some screen shots:-
Bottom of CSS Stylesheet After Forum End The Global Blocks Toolbar- Global Blocks Need More In Depth Help About a topic post it here: Click Here
|
coatham, yes i see that but read my previous post otherwise it would not work
http://www.forum.ucoz.com/forum/38-11939-65529-16-1293033722 To busy building a passive income online ;)
|
| |||