Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [Tutorial] conectado como em 09/10/12, 09:52 pm

HenRyqUéè

avatar
Administrador
Avaliador
Helper
>>[Tutorial] conectado como<<

Todos já devem ter visto a barra de conectado como do RMBR, então vou postar o codigo dela aqui, nao vai ficar igual, mas o efeito e as opções são os mesmos.

>>Funcionalidade: PHPBB3, PHPBB2, PUNBB E INVISION.
>>Prévia:
VERSÃO 1:

[Você precisa estar registrado e conectado para ver esta imagem.]
VERSÃO 2:

[Você precisa estar registrado e conectado para ver esta imagem.]


CSS (versão 1):
Aceda em: Painel de Controle>>Visualização>>Imagens e Cores>>Cores>>Folha de Estilo CSS
Clique para abrir:
Código:

    #conectFor * {
    font-size: 12px;
    }
    #conectFor{
    padding: 13px;
    padding-right : 20px;
    text-align: right;
    background: #323232;
    border-bottom: 1px solid #000;
    font: 15px Tahoma;
    height: 10px;
    display: block;
    color: #F1F1F1;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    }
    #conectFor a{
    color:#f1f1f1;
    font-family:Arial;
    padding:8px 5px ;
    margin:0 1px;
    text-decoration:none;
    }
    #conectFor a:hover{
    color:#111;
    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    -o-border-radius:5px 5px 0 0;
    background:#f1f1f1;
    }
    #conectFor a:hover ul{display:inline;}
    #conectFor ul {
    margin-top: -1px;
    z-index:1;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    top: 100%;
    width: 390px;
    padding:20px 13px;
    color: #333;
    background: #F1F1F1 url(http://i42.servimg.com/u/f42/17/32/13/00/letrei10.png) no-repeat bottom right;
    list-style: none;
    display: none;
    float: left;
    right: 0em;
    position: absolute;
    }
    #conectFor ul li{
    float: left;
    width: 47%;
    display: inline;
    text-align:left;
    margin:5px;
    }
    #conectFor ul li a{color:#3689D1; background-image:none !important;}
    #conectFor ul li a:hover{color:#111; background:transparent;}

    #conectFor a[href="/profile?mode=editprofile"] {
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 10px;
    background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo10.png);
    }

    #conectFor a[href="/profile?mode=editprofile"]:hover {
    background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo11.png);
    }
Valide e Salve!

CSS (versão 2):
Aceda em: Painel de Controle>>Visualização>>Imagens e Cores>>Cores>>Folha de Estilo CSS
Clique para abrir:
Código:

 
    #conectFor * {
    font-size: 12px;
    }
    #conectFor{
    padding: 13px;
    padding-right : 20px;
    text-align: center;
    background: #111;
    font: 15px Tahoma;
    height: 10px;
    display: block;
    color: #F1F1F1;
    position: absolute;
    top: 0;
    left: 66%;
    width:18em;
    border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    -o-border-radius:0 0 10px 10px;
    box-shadow:inset 0 0px 5px #000;
    -moz-box-shadow:inset 0 0px 5px #000;
    -webkit-box-shadow:inset 0 0px 5px #000;
    -o-box-shadow:inset 0 0px 5px #000;
    border: 1px solid #111;
    border-top: none !important;
    }
    #conectFor a{
    color:#f1f1f1;
    font-family:Arial;
    padding:8px 5px ;
    margin:0 1px;
    text-decoration:none;
    }
    #conectFor a:hover{
    color:#111;
    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    -o-border-radius:5px 5px 0 0;
    background:#f1f1f1;
    }
    #conectFor a:hover ul{display:inline;}
    #conectFor ul {
    margin-top: -1px;
    z-index:1;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    top: 100%;
    width: 390px;
    padding:20px 13px;
    color: #333;
    background: #F1F1F1 url(http://i42.servimg.com/u/f42/17/32/13/00/letrei10.png) no-repeat bottom right;
    list-style: none;
    display: none;
    float: left;
    right: 0em;
    position: absolute;
    }
    #conectFor ul li{
    float: left;
    width: 47%;
    display: inline;
    text-align:left;
    margin:5px;
    }
    #conectFor ul li a{color:#3689D1; background-image:none !important;}
    #conectFor ul li a:hover{color:#111; background:transparent;}

    #conectFor a[href="/profile?mode=editprofile"] {
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 10px;
    background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo10.png);
    }

    #conectFor a[href="/profile?mode=editprofile"]:hover {
    background-image: url(http://i42.servimg.com/u/f42/17/32/13/00/dropdo11.png);
    }

Valide e Salve!

JAVASCRIPT:
Aceda em: Painel de Controle>>Módulos>>HTML e JavaScript>>Gestão dos Códigos JavaScript
Clique para abrir:
Código:
    $(document).ready(function(){
    var nick = ($('#logout').length) ? $('#logout img').attr('alt').replace('Sair', '').replace('[', '').replace(']', '') : '' ;
    var con=($('#logout').length)?'<a href="/profile?mode=editprofile" style="position: relative;">Conectado como  <b> '+nick+'</b><ul></ul></a><a href="/login?logout=1">Sair</a>' : 'Bem vindo Visitante!<a href="/login"style="position: relative;">Login</a><a href="/register">Criar Conta</a>';$('body').prepend('<span id="conectFor"> '+con+'</span>');$('#conectFor ul').prepend('<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>')});
Envestimento: Em todas as paginas.
SALVE!
TODOS OS CRÉDITOS A: SPDESIGN
__________________________________________________________________________________________________________
>>>>>SPDesign, ©RMBR & DexTer<<<<<



Última edição por DexTer em 09/10/12, 09:59 pm, editado 1 vez(es)

http://rmbr.forumeiros.com/

2 Re: [Tutorial] conectado como em 09/10/12, 09:57 pm

Max Kyle

avatar
Helper
muito bom tutorial estou usando em meu fórum



Min ajuda a upar meu pokémon não custa nada basta clicar nele muito simples
[Você precisa estar registrado e conectado para ver este link.]

3 Re: [Tutorial] conectado como em 11/10/12, 10:49 am

HenRyqUéè

avatar
Administrador
Avaliador
Helper
vlw!! espero que mais gente goste....e nao pare de seguir meus tutos!! Mostrando a lingua

http://rmbr.forumeiros.com/

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum