Código:

<div class="hlogin"><div id="header">Bem vindo ao fórum High Tech <a href="/login">Login</a> | <a href="/register">Registre-se</a> </div></div>

Código:

.hlogin, .hlogin a:link, .hlogin a:visited {
    color: #666666;
    font-family: Arial,Geneva,Helvetica,Verdana,sans-serif;
    text-decoration: none;
}
.hlogin {
    background: -moz-linear-gradient(#FFFFFF, #F2F2F2) repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C4C4C4;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 0 8px 0 #353535;
    float: right;
    font-size: 13px;
    height: 31px;
    margin: 0 20px 0 0;
    padding: 0 0 0 10px;
    position: absolute;
    right: 15px;
    text-align: right;
    top: 0;
    vertical-align: middle;
    z-index: 1;
}
.hlogin #header {
    height: 26px;
    padding: 5px 20px 0 10px;
    vertical-align: middle;
}

Josh escreveu:

Login personalizado

Por muitas vezes, queremos chamar atenção com códigos inovados, os mais queridos nestes tipos de ocasião são de Login. No último tutorial sobre Login's aprendemos á gerir uma caixa de login ao passar o mouse sobre o botão "Entrar" do menu de navegação, já neste iremos aprender á inserir uma mini-caixinha no topo do fórum.

--> Principais truques <--
Login no topo do fórum

1º - Código utilizado:

Código:

jQuery(document).ready(function(){if(jQuery('#page-header .navbar a.mainmenu #i_icon_mini_login').length){jQuery('#wrap').prepend('<style>.hlogin,.hlogin a:link,.hlogin a:visited{color:#666;font-family:Arial,Geneva,Helvetica,Verdana,sans-serif;text-decoration:none}.hlogin{-moz-border-radius:0 0 7px 7px;-moz-box-shadow:0 0 8px 0 #353535;-webkit-border-radius:0 0 7px 7px;-webkit-box-shadow:0 0 8px 0 #353535;background:-moz-linear-gradient(#ffffff,#f2f2f2);background-color:#fff;background-image:-webkit-linear-gradient(#ffffff,#f2f2f2);border:1px solid #c4c4c4;border-radius:0 0 7px 7px;box-shadow:0 0 8px 0 #353535;float:right;font-size:13px;height:31px;margin:0 20px 0 0;padding:0 0 0 10px;text-align:right;vertical-align:middle;position:absolute;z-index:1;right:15px;top:0px}.hlogin #header{height:26px;padding:5px 20px 0 10px;vertical-align:middle}</style><div class="hlogin"><div id="header">Bem vindo visitante! <a href="/login">Login</a>&nbsp|&nbsp<a href="/register">Registre-se</a> </div></div>')}});

2º - Páginas .JS:
Para prosseguirmos com o tutorial, teremos de utilizar um código JavaScript para efetuar as modificações da caixa:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

(carregue na imagem para aumentar)

Sobre o título, escreva o que desejar, não afetará em nada, o investimento selecione "No índice" para que não apresente erros e em "Código JavaScript" será o campo destinado a receber o código JavaScript e jQuery, que trabalhamos no item anterior.

3º - Resultado através de uma imagem:

--> FAQ do Tutorial <--
Login no topo do fórum

• Para quais versões este código funciona?
  Para todas as versões, como o script é JS, funcionará em todas as versões.

Código:

<style>.hlogin,.hlogin a:link,.hlogin a:visited{color:#666;font-family:Arial,Geneva,Helvetica,Verdana,sans-serif;text-decoration:none}.hlogin{-moz-border-radius:0 0 7px 7px;-moz-box-shadow:0 0 8px 0 #353535;-webkit-border-radius:0 0 7px 7px;-webkit-box-shadow:0 0 8px 0 #353535;background:-moz-linear-gradient(#ffffff,#f2f2f2);background-color:#fff;background-image:-webkit-linear-gradient(#ffffff,#f2f2f2);border:1px solid #c4c4c4;border-radius:0 0 7px 7px;box-shadow:0 0 8px 0 #353535;float:right;font-size:13px;height:31px;margin:0 20px 0 0;padding:0 0 0 10px;text-align:right;vertical-align:middle;position:absolute;z-index:1;right:15px;top:0px}.hlogin #header{height:26px;padding:5px 20px 0 10px;vertical-align:middle}</style><div class="hlogin"><div id="header">Bem vindo visitante! <a href="/login">Login</a>&nbsp|&nbsp<a href="/register">Registre-se</a> </div></div>