Para añadir este menu a nuestro foro primero tendremos que ir al template overall_header y antes de la etiqueta <div class="pun"> añadiremos el siguiente código:
<div id="admin-bar">
<div style="margin: 0 auto; width: 960px;">
<ul id="admin-menu">
<div style="float:left"><li><div id="mini-avatar" class="user-avatar"></div>Howdy, <span class="USERNAME"></span>!
<!-- BEGIN switch_user_logged_in --><a href="/login?logout" id="newlogoutlink">Salir</a><!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out --><a href="/login" id="newlogoutlink">Conectarse</a><!-- END switch_user_logged_out -->
</li></div>
<div id="admin-right" style="float:right"><li><a href="{U_INDEX}">Índice</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/search">Buscar</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/memberlist">Miembros</a></li>
<li><a href="/profile?mode=editprofile">Perfil</a></li>
<li><a href="/privmsg?folder=inbox">Mensajeria<div id="alerta-nuevo-mensaje"></div></a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<!-- END switch_user_logged_out --></div>
</ul>
<div style="clear: both"></div>
</div>
</div>Despues de el HTML que acabamos de añadir agregamos el siguiente script el cual cargara el avatar del usuario:
<!-- BEGIN switch_user_logged_in -->
<script>
jQuery(document).ready( function() {
jQuery(".user-avatar").load("profile?mode=editprofile&page_profil=avatars .main-content .frm-set dl dd img");
$('#alerta-nuevo-mensaje').prepend($('#i_icon_mini_new_message'));
});
</script>
<!-- END switch_user_logged_in -->
Ahora justo antes de la etiqueta </head> en el mismo template agregamos el siguiente script:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
Y para finalizar le damos color y forma a nuestra Barra De Navegacion con el siguiente CSS:
/* ADMIN BAR */
#admin-bar {
height: 39px;
background: url(http://i.imgur.com/ly4V5.png) repeat-x;
line-height: 36px;
font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif; font-size: 12px;
}
ul#admin-menu li { list-style: none; float: left; color: #d3dadc; text-shadow: 0 -1px 0 #000000; }
#admin-right li a {
padding: 9px 7px;
height: 36px;
border-right: 1px solid #000;
color: #d3dadc; text-shadow: 0 -1px 0 #000000; text-decoration: none;
}
#newlogoutlink { font-size: 11px; color: #8b8f91; text-decoration: none; margin: 0 0 0 5px; }
#mini-avatar img { width: 26px; height: 26px; }
#mini-avatar { padding: 5px; float: left; height:26px; background: url(http://cdn4.iconfinder.com/data/icons/markerstyle_icons/PNG/24px/user.png) no-repeat center center; width: 26px;}
