Facebook Chat bar style bar for 4images
A MOD by GaYan
This mod will create a staic footer like in facebook ( chat bar ) for 4images with tooltip support , you have more cooler features in this mod than in the facebook chat bar
im kidding
installation will take only about 2 mins
Version 2 - With Cool EffectsDemo of version 2 -
http://ryan.rawswift.com/ , this site belongs to the original author of this script, dont forget to thank him
Setp 11) 1st, download this package and unzip
js folder in the downloaded package to the
js folder in your root path, if you havent got one, create new 1, then it should look like this
js/
js/jquery-1.3.2.min.js
js/src/jixedbar-0.0.2.js
js/themes/vista/jx.stylesheet.css2) then unzip the
icons and put the stuff into the icons folder in your template root
Setp 21) Open up the header.html and find
</script> paste the code below
<!-- jixedbar starts here -->
<link type="text/css" href="js/themes/vista/jx.stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/src/jixedbar-0.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-bar").jixedbar({
hoverOpaque: true,
roundedCorners: true
});
});
</script>
<!-- jixedbar end here -->
note - jixedbar is a great creation , get the updates from
http://code.google.com/p/jixedbar/2) open up the header.html and find
<body>
and paste below
<div id="demo-bar">
<ul>
<li alt="Bicolano Express"><a href="http://ryan.rawswift.com/"><img src="{template_url}/icons/home.png" alt="Home" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li alt="About"><a href="#"><img src="{template_url}/icons/information.png" /></a></li>
<li alt="New Images"><a href="{url_new_images}"><img src="{template_url}/icons/blogs.png" /></a></li>
<li alt="Top Images"><a href="{url_top_images}"><img src="{template_url}/icons/block.png" /></a></li>
{ifnot lang_loggedin_msg}
<li alt="Register"><a href="{url_register}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/megaphone.png" /></a></li> {endifnot lang_loggedin_msg}
</ul>
<span class="jx-separator-left"></span>
<ul class="jx-bar-button-left">
<li alt="Facebook"><a href="#"><img src="{template_url}/icons/balloon-facebook-left.png" /></a></li>
<li alt="Twitter"><a href="#"><img src="{template_url}/icons/balloon-twitter-left.png" /></a></li>
<li alt="Flickr"><a href="#"><img src="{template_url}/icons/pictures.png" /></a></li>
<li alt="Linkedin"><a href="#"><img src="{template_url}/icons/card-address.png" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<div><a href="http://code.google.com/p/jixedbar/">jixedbar</a> - a <a href="http://jquery.com/">jQuery</a> plugin.- Mod by GaYan</div>
<span class="jx-separator-right"></span>
<ul class="jx-bar-button-right">
<li alt="Feed"><a href="{rss_url}"><img src="icons/feed.png" /></a></li></li>
<li alt="Comment Feed"><a href="#"><img src="icons/balloon-quotation.png" /></a></li>
</ul>
<span class="jx-separator-right"></span>
</div>
Note - You can customize the the links and tooltip text including the icons ,
for some icons i have kept the link null
Okay// Thats it for today.. Have Fun .... if you want to install the non flashy thing.. i mean a simple 1 as in the demo, you can try the version 1 which is just below
Version 1 - Old versionSetp 11) Goto your template root and open up
header.html or
header.htm and paste this code
<!-- chat bar starts here -->
<link type="text/css" href="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/themes/default/jx.stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/src/jixedbar-0.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-bar").jixedbar();
});
</script>
<!-- Chat bar end here -->
Note - Always respect the authors of this script
Setp 22) Goto your template root and open up
footer.html and find
</body>and paste above
<div id="demo-bar">
<ul>
<li alt="Gallery Home"><a href="http://nuwaragedara.com/Gallery/"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/home.png" alt="Home" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li alt="Latest Images"><a href="{url_new_images}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/blogs.png" /></a></li>
<li alt="Top Images"><a href="{url_top_images}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/block.png" /></a></li>
{ifnot lang_loggedin_msg}
<li alt="Register"><a href="{url_register}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/megaphone.png" /></a></li>{endifnot lang_loggedin_msg}
</ul>
<span class="jx-separator-left"></span>
<ul class="jx-bar-button-left">
<li alt="Join our Facebook"><a href="http://www.facebook.com/group.php?gid=154572024219&ref=ts"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-facebook-left.png" /></a></li>
<li alt="Follow me on Twitter"><a href="https://twitter.com/G2gayan"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-twitter-left.png" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<div>Design by - <a href="http://www.g2designlabs.com/">G2 Design Labs</a></div>
<ul class="jx-bar-button-right">
<li alt="Feed"><a href="{rss_url}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/feed.png" /></a></li></li>
<li alt="Search Images"><a href="{url_search}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-quotation.png" /></a></li>
</ul>
<span class="jx-separator-right"></span>
</div>
Thats All ,, You are ready to go now
next version will be released with cool shading effects and more advanced stuff
Show Posts
:
