Olá, como a barra solicita aquisição ao perfil, eu optei por deixa-lo visivel apenas para usuários logados, então procure por
<!-- BEGIN switch_user_logged_in --> no seu template. Esta parte é responsável pela exibição disto: https://i.servimg.com/u/f56/17/71/75/73/sem_ta91.png
Vamos colocar o source da barra dentro desta função. Substitua o código original pelo código a baixo.
O original inicia em
<!-- BEGIN switch_user_logged_in --> e termina em
<!-- END switch_user_logged_in --> - Código:
<!-- BEGIN switch_user_logged_in -->
<span id="right_menu" class="logged_in">
<script>
jQuery(document).ready(function(){
jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
link = jQuery('.frm dl dd img', data).attr('src');
if(link){
jQuery('#avatar').HTML('<center><img src="'+link+'"/></center>');
}else{
jQuery('#avatar').HTML('');
}
});
});
</script>
<span id="right_float">
<a>Conectado como <span class="USERNAME"></span>▾</a>
<div id="right_tab">
<table><tr>
<td>
<div id="avatar"></div>
</td>
<td>
<a href="/profile?mode=editprofile">Editar perfil</a>
<a href="/profile?mode=editprofile&page_profil=avatars">Editar avatar</a>
<a href="/privmsg?folder=inbox">Mensagens Privadas</a>
</td>
<td style="border-left: 1px solid #ddd; padding: 0px 10px;">
<a style="background: url('http://www.khronostransportes.com.br/images/online.gif') no-repeat scroll left 0px top 50% transparent; padding-left: 13px; padding-top: 5px;">Conectado</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Preferências</a>
<a href="/login?logout">Desconectar</a>
</td>
</tr></table>
</div>
</span>
</span>
<style>
#avatar {
margin-right: -1px;
height: 70px;
padding: 1px;
background: url("http://i56.servimg.com/u/f56/17/71/75/73/loadin10.gif") no-repeat scroll left 50% top 40% / 90% auto transparent;
min-width: 40px;
}
#right_tab a:hover {
color: #000;
}
#right_tab a {
color: rgb(32, 64, 102);
padding: 2px 5px;
border-radius: 2px;
text-align: left;
transition: all 0.2s ease 0s;
text-shadow: none !important;
margin: 2px;
display: block;
}
#right_tab {
position: absolute;
top: 23px;
right: 4%;
border-radius: 4px;
padding: 10px;
display: none;
background: rgba(0,0,0,.8);
}
#right_float:hover #right_tab {
display: block;
}
#right_menu {
float: right;
}
#right_float a {color: #fff !important;}
#right_float {
padding: 7px 0px;
cursor: pointer;
}
#right_float {
transition: all 0.2s ease 0s;
color: #fff;
padding: 0px !important;
margin-top: 4px;
font-size: 12px;
display: inline-block;
}
#tab_diz {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
z-index: 9;
font-size: 14px;
color: #fff;
padding: 5px 6%;
background: url('http://i56.servimg.com/u/f56/17/71/75/73/user_n10.png') repeat-x scroll center bottom rgb(50, 50, 50);
border-bottom: 3px solid rgb(32, 64, 102);
}
#avatar img {
height: 70px;
padding: 1px;
border-radius: 3px;
}
</style>
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
Eu deixei o mesmo CSS, isso significa que a barra terá a mesma aparência da usada aqui no Staffer Group BR™, então por favor altere a aparência assim que possível. Caso funcione
dê o parecer aqui por favor. Obrigado!