Facebook bar for your website

Message # 1 | 2:25 PM 2010-12-22

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

<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 ;)

Page 1 of 5 1 2 3 4 5 »
Forum moderator: bigblog