Full topbar like on cotonti.com

header.tpl

	<!-- BEGIN: GUEST -->
	<section id="topbar">
	<div class="container">
		<ul>
			<li><a href="https://www.cotonti.com/{PHP|cot_url('index')}" id="home" title="Home">Home</a></li>
			<li><a href="https://www.cotonti.com/index.php?e=search" id="search" title="Search">Search</a></li>
		</ul>
		<ul id="guest">
			<li><a href="https://www.cotonti.com/login.php" id="login" title="login" class="">Login</a></li>
		</ul>
		<form action="/login.php?a=check" method="post"><div style="display:inline;margin:0;padding:0"><input type="hidden" name="x" value="B8747FEE"></div>
			<div id="loginbox" class="userbox hidden">
				name:<br><input type="text" name="rusername" maxlength="32" class="text"><br>
				password:<br><input type="password" name="rpassword" maxlength="32" class="password"><br>
				<input type="hidden" name="rremember" value="1">
				<button type="submit">Login</button>
				<a href="https://www.cotonti.com/{PHP|cot_url('users','m=register')}">{PHP.L.Register}</a>
				<a href="https://www.cotonti.com/{PHP|cot_url('users','m=passrecover')}">{PHP.L.users_lostpass}</a>
			</div>
		</form></div>
	</section>
	<!-- END: GUEST -->
	<!-- BEGIN: USER -->
	<section id="topbar">
	<div class="container">
	<ul>
			<li><a href="https://www.cotonti.com/{PHP|cot_url('index')}" id="home" title="Home">Home</a></li>
			<li><a href="https://www.cotonti.com/index.php?e=search" id="search" title="Search">Search</a></li>
		</ul></div>
	<ul id="user">
			<li id="notices"></li><li><a href="https://www.cotonti.com/{PHP|cot_url('users','m=profile')}"  id="profile" title="{PHP.L.Profile}">{PHP.L.Profile}</a></li>
			<li><a href="https://www.cotonti.com/{PHP|cot_url('pm')}" id="messages" title="{PHP.L.Private_messages}">{PHP.L.Private_Messages}</a></li>
			<li><a href="https://www.cotonti.com/{PHP|cot_url('pfs')}" id="files" title="{PHP.L.PFS}">{PHP.L.PFS}</a></li>
			<li><div id="logout" title="Logout">{PHP.out.loginout}</div></li>
			
	</ul>
	</section>
	<!-- END: USER -->

footer.tpl

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	(function($) {
    $.fn.defaultValue = function(defaultvalue) {
        return this.each(function() {
            if (!$(this).val() && defaultvalue) {
                $(this).val(defaultvalue);
            }
            if ($(this).val()) {
                $(this).attr('defaultValue', $(this).val());
            }
            $(this).live('focus', function() {
                if ($(this).attr('defaultValue') == $(this).val()) {
                    $(this).val('');
                }
            });
            $(this).live('blur', function() {
                if ($(this).val() == '') {
                    $(this).val($(this).attr('defaultValue'));
                }
            });
        });
    };
    $.fn.setActiveTab = function(baseurl, currenturl, classname) {
        if (baseurl.charAt(baseurl.length - 1) == '/') {
            baseurl = baseurl.substr(0, baseurl.length - 1);
        }
        currenturl.replace(baseurl + '/', '');
        if (!classname)
            classname = 'active';
        return this.each(function() {
            $(this).find('a').each(function() {
                $(this).removeClass(classname);
                var linkhref = $(this).attr('href').replace(baseurl, '');
                if (linkhref.charAt(0) == '/') {
                    linkhref = linkhref.substr(1);
                }
                if (currenturl == linkhref || linkhref && currenturl.indexOf(linkhref) == 0) {
                    $(this).parents('li:last').find('a:first').addClass(classname);
                    return false;
                }
            });
        });
    };
    $.fn.toggleContent = function(options) {
        return this.each(function() {
            $(this).toggle(function(event) {
                event.preventDefault();
                if (options.css) {
                    $(this).css(options.css);
                }
                if (options.content) {
                    if (options.before) {
                        $(this).before(options.content);
                    } else {
                        $(this).after(options.content);
                    }
                }
                $(this).trigger('on.toggleContent');
            }, function(event) {
                event.preventDefault();
                $(this).trigger('off.toggleContent');
            });
        });
    };
    $.fn.cot_ajaxify = function(options) {
        return this.each(function() {
            var $this = $(this);
            var $targets = $this.find('a[href]');
            var path = window.location.pathname.substr(1);
            if (options && options.filter) {
                $targets = $targets.filter(options.filter);
            }
            $targets.live('click', function(e) {
                var href = $(this).attr('href');
                var hash = href.replace(path, '');
                if (hash) {
                    e.preventDefault();
                    if (options && options.history) {
                        $.history.load(hash);
                    } else {
                        if (options && options.css && options.css.before) {
                            $this.css(options.css.before);
                        }
                        $.get(href, function(data) {
                            $this.html(data);
                            if (options && options.css && options.css.after) {
                                $this.css(options.css.after);
                            }
                        });
                    }
                }
            });
            if (options && options.history) {
                $.history.init(function(hash) {
                    $.get(path + hash, function(data) {
                        $this.html(data);
                        if (options && options.css && options.css.after) {
                            $this.css(options.css.after);
                        }
                    });
                }, {unescape: "/"});
            }
        });
    };
})(jQuery);
;
	$("#search").toggleContent({
		css: { 'margin-left': '240px' },
		content: '<form id="searchform" action="{PHP|cot_url('plug','e=search')}" method="post"><input id="searchfield" type="text" name="sq" title="Search" value=""></form>',
		before: true
	}).bind('on.toggleContent', function() {
		$(this).parent().find('input').focus();
	}).bind('off.toggleContent', function() {
		$(this).parent().find('form').submit();
	});
	$("#login").toggle(function() {
		$(this).addClass('active');
		$("#loginbox").removeClass('hidden');
		$("#loginbox input:first").focus();
	}, function() {
		$("#loginbox").addClass('hidden');
		$(this).removeClass('active');
	});
	if({PHP.usr.messages}>0){
		$("a#messages")
			.append('<div id="pmcount">{PHP.usr.messages}</div>')
			.attr('title', 'Messages (unread: {PHP.usr.messages})')
			.toggle(function(){
				$(this).addClass('active');
				$('body').append('<div id="pmbox" class="userbox"><p><a href="https://www.cotonti.com/{PHP|cot_url('pm')}">Inbox</a> - <a href="https://www.cotonti.com/{PHP|cot_url('pm')}&f=sentbox">Sentbox</a></p></div>');
					$.ajax({
					url: '/index.php?e=pm&f=inbox&filter=unread',
					dataType : "html",
					success: function(html) {
						rows = ''
						var ajax_obj = $(html);
						t = ajax_obj.find("#message_theme");
						n = ajax_obj.find("#sender_name");
						for (var h = 0; h < t.length; h++) {
						rows += '<div id="message">';
						rows += '<li>'+t[h].innerHTML+'<div id="sender">Sender: '+n[h].innerHTML+'</div></li>';
						rows += '</div>';
						document.getElementById('pmbox').innerHTML = rows+'<p><a href="https://www.cotonti.com/{PHP|cot_url('pm')}">Inbox</a> - <a href="https://www.cotonti.com/{PHP|cot_url('pm')}&f=sentbox">Sentbox</a></p>';
						}
                
					}
				}); 
			}, function(){
				$(this).removeClass('active');
				$('div#pmbox').remove();
			});
	}
});
//]]>
</script>

css

section#topbar #home, section#topbar #admin, section#topbar #search, section#topbar #profile, section#topbar #messages, section#topbar #files, section#topbar #logout 			      {background-image: url("../img/sprite-navigation.png");}
section#topbar #guest a, section#topbar #user a 		{margin-left: 1px; margin-right: 0;}
section#topbar li a 									{display: block;margin: 1px;margin-left: 0;padding: 0 15px;height: 28px;line-height: 28px;color: #C0D2DD;background-repeat: no-repeat;background-position: center;}
section#topbar #profile 							{width: 30px; padding: 0; text-indent: -9999px; background-position: -90px 0;}
section#topbar #messages {width: 30px;padding: 0;text-indent: -9999px;background-position: -120px 0;}
section#topbar #files {width: 30px;padding: 0;text-indent: -9999px;background-position: -150px 0;}
section#topbar #logout {width: 30px;padding: 0;text-indent: -9999px;background-position: -180px 0;}
section#topbar {background: #012D48;height: 30px;}
section#topbar #guest, section#topbar #user {float: right;}
section#topbar ul {margin: 0;padding: 0;}
section#topbar li {list-style: none;float: left;}
#topbar {width: 960px;margin: 0 auto;padding: 0;clear: both;}
section#topbar #home {width: 30px;padding: 0;text-indent: -9999px;background-position: -30px 0;}
section#topbar #search {width: 30px;padding: 0;text-indent: -9999px;background-position: 0 0;}
section#topbar #searchfield:hover, #topbar #searchfield:focus {background-color: #0A5E91;}
section#topbar #searchfield {position: absolute;top: 1px;background: none;border: 0;outline: 0;width: 230px;height: 28px;margin: 0;padding: 0 5px;color: #C0D2DD;border-image: initial;}
#loginbox input {width: 170px;margin: 2px 0 4px 0;padding: 2px 4px;border: 1px #BBB solid;background: #EEE;height: 20px;-khtml-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;border-image: initial;}
.userbox {position: absolute;top: 29px;left: 50%;margin-left: 280px;width: 180px;padding: 10px;background: white;border-bottom: 3px #CCC solid;z-index: 1;}
section#topbar a.active {background-color: white;color: #04293F;}
#loginbox button {width: 180px;padding: 4px 0;margin: 6px 0;-khtml-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}
#pmcount {
position: absolute;
top: 2px;
left: 50%;
margin-left: 405px;
width: 9px;
height: 9px;
line-height: 9px;
background: #C00;
color: white;
padding: 1px;
text-indent: 0;
font-size: 9px;
font-weight: bold;
border: 1px #100 solid;
overflow: hidden;
text-align: center;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-image: initial;
}
#pmbox li a {
color:#0079C1;
display: block;
font-weight: bold;
}
#pmbox ol {
list-style: none;
margin: 0;
padding: 0;
}
#pmbox li {
display: block;
border-bottom: 1px #CCC solid;
padding: 5px 8px;
list-style: none;
}
#pmbox p {
margin: 0;
padding: 0 8px;
font-size: 85%;
line-height: 20px;
}
#pmbox {
padding: 0;
width: 200px;
}

#sender a { color: #667E72; display: initial!important;}
#sender {
font-size: 85%;
}

in modules/pm/tpl/pm.list.tpl change

<p class="strong">{PM_ROW_TITLE}</p>

to

<p id="message_theme" class="strong">{PM_ROW_TITLE}</p>

and

<td class="centerall {PM_ROW_ODDEVEN}">{PM_ROW_USER_NAME}</td>

to

<td id="sender_name" class="centerall {PM_ROW_ODDEVEN}">{PM_ROW_USER_NAME}</td>

I think it's all, hope it's help.

I almost forgot, put this image in "themename/img" http://www.cotonti.com/thms/cotcom/img/sprite-navigation.png

<!-- IF {PHP.usr.messages} > 0 -->
	<li><a href="https://www.cotonti.com/{PHP|cot_url('pm')}" class="newpm">{PHP.usr.messages}</a></li>
<!-- ELSE -->
	<li><a href="https://www.cotonti.com/{PHP|cot_url('pm')}">No new private messages</a></li>
<!-- ENDIF -->

Now I wondered how you - on this site - did that thing with the icons and a number appearing when a new mail arrives.

When we're on that subject. the number appears on the my file space icon, instead of on the p.m. icon. I use the latest version of FF