[TUTORIAL] Conectado como V³

O efeito dele é adicionar uma barra de conectado e com alguns efeitos.

--> Tutoriais, dicas e astúcias <--

1º - Adicionando a barra OFF-LINE...
Vá em:

Módulos Portal e Widgets Gestão dos Widgets do Forúm Criar um Widget personalizado.

Nome do widget : Coloque BARRA-SPD-OFF;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Adicione o código abaixo:

Código:

<script>
jQuery(document).ready(function(){
jQuery("body").prepend('<div id="barra-4"><span style="position:relative;right:-70%">Seja Bem-Vindo Visitante!</span><span style="position:relative;right:-71.9%" id="register"><b style="position:relative;top:4px !Important;">Cadastrar-se</b></span><span style="cursor:pointer;position:relative;right:-73.6%" id="login">Login</span></div><div id="form-login"><form action="/login" method="post"><b align="left" style="margin-right:59px">Login: </b><input align="right" name="username" id="username" size="15" maxlength="40" value="" class="inputbox autowidth" type="text"><br><b style="margin-right:54px">Senha: </b><input id="password" align="right" name="password" size="15" maxlength="25" class="inputbox autowidth" type="password"><p align="right"><input name="login" tabindex="6" value="Login" class="button1" type="submit"></p><p align="right"><input name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked" type="checkbox"><label for="autologin" align="right"> Conexão automática</label></p></form></div>');
jQuery("#register").click(function(){
window.open("/register", "_self");
});
jQuery("#form-login").hide();
jQuery("#login").click(function(){
jQuery("#form-login").fadeToggle();
})
});
</script>
<style>
#form-login{
position:relative;
margin-top:1px;
right:-0%;
padding:12px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 0px 0px 6px 6px;
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.58);
color: rgb(90, 90, 90);
position: absolute;
top: 34px !important;
white-space: nowrap;
z-index: 999;
min-width:220px;
max-width:220px;
}
#register:hover{
background: none repeat scroll 0% 0% rgb(240, 211, 0);
border: 1px solid rgb(255, 176, 0);
color: rgb(255, 255, 255) !important;
}
#register{
cursor:pointer;
background: none repeat scroll 0% 0% rgb(255, 176, 0);
border: 1px solid rgb(175, 154, 0);
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 4px rgba(0, 0, 0, 0.4);
color: rgb(255, 255, 255);
font-weight: 700;
text-align:center;
font-weight:bold;
padding: 20px 8px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
#barra-4{
max-height:41px !Important;
font-weight:bold;
color:white;
padding:10px;
background-image: url('http://i42.servimg.com/u/f42/17/32/13/00/sem_ta17.png');
background-size:100% 100%;
border-bottom: 1px solid rgb(94, 125, 153);
}
</style>

Salve e mova o widget para um canto visível no forum!

Após isso clique no botão destacado na imagem:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Marque a(s) seguinte(s) opção(os):

Convidados

2º - Adicionando a barra ON-LINE...
Vá em:

Módulos Portal e Widgets Gestão dos Widgets do Forúm Criar um Widget personalizado.

Nome do widget : Coloque BARRA-SPD-ON;
Utilizar um table type : Marque Não;
Título do widget : Não coloque nada aqui;
Fonte do widget * : Adicione o código abaixo:

Código:

<script>
jQuery(document).ready(function(){
jQuery("body").prepend('<div id="barra-4" style="max-height:34px;"><span style="position:relative;right:-77%;bottom:-2%;" id="ul-mp">MPs</span><span style="position:relative;right:-79.6%;margin-bottom:4% !Important;" id="conect-a">Conectado como <b style="color:#222;">{USERNAME}</b></span> <span style="position:relative;right:-80.6%;margin-bottom:4% !Important;" id="sai">Sair</span></div><div id="conect"><ul><li><a href="/profile?mode=editprofile">Informações</a></li><li><a href="/profile?mode=editprofile&page_profil=preferences">Preferencias</a></li><li><a href="/profile?mode=editprofile&page_profil=signature">Assinatura</a></li><li><a href="/search?search_id=draftsearch">Rascunhos</a></li><li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amigos</a></li><li><a href="/profile?mode=editprofile&page_profil=attachments">Anexos</a></li><li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li><li><a href="/search?search_id=watchsearch"class="offp">Topicos Supervisionados</a></li><li><a href="/search?search_id=favouritesearch"target="_blank">Tópicos favoritos</a></li><li><a href="/search?search_id=newposts"target="_blank">Novas mensagens</a></li></ul></div><div id="sai-a"><center><span id="s">SIM</span><span id="n">NÃO</span></center></div>');
jQuery("#ul-mp").click(function(){
window.open("/privmsg?folder=inbox", "_blank");
});
jQuery("#ul-mp").hover(function(){
jQuery("#ul-mp").attr("src","http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/32/message-already-read-icon.png");
}, function(){
jQuery("#ul-mp").attr("src","http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/32/new-message-icon.png");
});
jQuery("#sai-a").hide();
jQuery("#conect").hide();
jQuery("#conect-a").click(function(){
jQuery("#sai-a").fadeOut();
jQuery("#conect").fadeToggle();
});
jQuery("#s").click(function(){
window.open("/login?logout", "_self");
});
jQuery("#sai").click(function(){
jQuery("#conect").fadeOut();
jQuery("#sai-a").fadeToggle();
});
jQuery("#n").click(function(){
jQuery("#sai-a").fadeOut();
});
});
</script>
<style>
#conect-a:hover, #sai:hover, #ul-mp:hover{
text-decoration:underline;
transition:all 0.6s;
}
#s:hover, #n:hover{
transition: all 0.5s;
background:#ADADAD;
}
#s, #n{
transition:all 0.5s;
font-weight:bold;
padding:5px;
margin-right:5px;
border:2px solid #222;
cursor:pointer;
}
#conect-a, #sai, #ul-mp{
transition:all 0.6s;
cursor:pointer;
padding:6px;
}
#ul-mp{
margin:0px;
padding:0px;
}
#conect a:hover{
color:#222;
}
#conect a{
color:#555;
text-decoration:none;
}
#conect, #sai-a{
color:#555;
position:relative;
margin-top:-2px;
right:-0%;
padding:12px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 0px 0px 6px 6px;
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.58);
color: rgb(90, 90, 90);
position: absolute;
top: 34px !important;
white-space: nowrap;
z-index: 999;
min-width:220px;
max-width:220px;
}
#barra-4{
min-height:15px !Important;
max-height:47px !Important;
font-weight:bold;
color:white;
padding:8px;
background-image: url('http://i42.servimg.com/u/f42/17/32/13/00/sem_ta17.png');
background-size:100% 100%;
border-bottom: 1px solid rgb(111, 255, 227);
}
</style>

Salve e mova o widget para um canto visível no forum!

Após isso clique no botão destacado na imagem:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Marque a(s) seguinte(s) opção(os):

Administradores - Moderadores - Membros

3º - Se seu forúm não for PUNBB...
Deixe todos os códigos aciama ativos e...
Vá em:

Visualização Imagens e Cores Cores Folha de estilo CSS

Adicione o seguinte código à folha:

Código:

#register{padding-top:10px !Important;}#barra-4{margin-top: -10px;}

ATENÇÃO! SE SEU FORÚM FOR PUNBB, NÃO PRECISA USAR ESTE PASSO!

4º - Resultado...


° Funciona em quais versões?
Todas. (p.s.: só foi testado e aprovado em PUNBB, ou seja, pode dar bug nas demais versões).

° Créditos
HenRyqUéè

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]