I have been getting the common error others were getting. I.e., the icons were positioned on top-left of browser with no gray bar.
I finally got it working. Copy all the codes below and paste them before the </head> of overall_header.html file. Please note that I have removed the preceding " / " before the "bar" folder.
<!-- IF S_USER_LOGGED_IN -->
<div id="hori-bar">
<ul>
<li alt="Index"><a href="{U_INDEX}"><img src="bar/images/index.png"/></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li alt="User Control Panel"><a href="{U_PROFILE}"><img src="bar/images/profile.png" /> Profile </a></li>
<li alt="You Have {PRIVATE_MESSAGE_INFO}"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li>
</ul>
<ul class="jx-bar-button-right">
<li alt="View ATOM Feeds"><a href="{U_FEED}"><img src="bar/images/feed.png" /></a></li>
</ul>
<ul class="jx-bar-button-right">
<li alt="Attachments"><a href="{U_ATTACHMENT_PAGE}"><img src="bar/images/attach.png" /></a></li>
</ul>
<!-- IF S_DISPLAY_MEMBERLIST -->
<ul class="jx-bar-button-right">
<li alt="{L_MEMBERLIST_EXPLAIN}"><a href="{U_MEMBERLIST}"><img src="bar/images/members.png"/></a></li>
</ul>
<!-- ENDIF -->
<span class="jx-separator-right"></span>
</div>
<!-- ENDIF -->
<!-- Bar starts here - Dark Moody -->
<link type="text/css" href="bar/theme/jx.stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="bar/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="bar/js/jixedbar-0.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hori-bar").jixedbar();
});
</script>
<script type="text/javascript" src="bar/js/jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
<!-- Bar end -->