[TUTORIAL] Opções de perfil no topo do fórum

Ir para baixo

[TUTORIAL] Opções de perfil no topo do fórum Empty [TUTORIAL] Opções de perfil no topo do fórum

Mensagem por Ace 02.02.13 2:02


[TUTORIAL] Opções de perfil no topo do fórum Permis10

Opções de perfil no topo do fórum

Muita das vezes nós queremos um atalho para modificar seu perfil, neste tutorial irá facilitar as vidas de seus membros há modificarem as opções de seu perfil rápido e elegante.

--> Tutoriais, dicas e astúcias <--
Opções de perfil no topo do fórum



- Função do JavaScript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

(carregue na imagem para aumentar)
[TUTORIAL] Opções de perfil no topo do fórum Painel13

[TUTORIAL] Opções de perfil no topo do fórum 110111Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Opções de perfil no topo do fórum 110210Seta Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
[TUTORIAL] Opções de perfil no topo do fórum 110310Seta Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Opções de perfil no topo do fórum 110410Seta Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

- Aplicação do código JavaScript:
Vamos adicionar o seguinte código:
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>')});


- Aplicação do CSS:
Será nescessario aplicar o código em vossa folha de estilo CSS.
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

(carregue na imagem para aumentar)
[TUTORIAL] Opções de perfil no topo do fórum Css11

No conteúdo CSS, adicione este código:
Código:
#conectFor * {
font-size: 12px;
}
#conectFor{
padding: 13px;
margin-top:-14px;
padding-right : 20px;
text-align: right;
background: url(http://i.imgur.com/tKiSR.png);
border-bottom: 2px solid #0099FF;
font: 15px Tahoma;
height: 15px;
display: block;
color: #F1F1F1;
position: relative;
top: 0;
left: 0;
right: 0;
}
#conectFor a{
color:#0099FF;
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:#0099FF;
}
#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: #161616 url(URL_BACKGROUND) no-repeat bottom right;
border-bottom: 1px solid #0099FF;
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:#0099FF; background-image:none !important;}
#conectFor ul li a:hover{color:#8F8F8F; 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);
}


- Resultado:
[TUTORIAL] Opções de perfil no topo do fórum YgDdo




© Fórum dos Fóruns & BrunoH.


[TUTORIAL] Opções de perfil no topo do fórum Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Opções de perfil no topo do fórum
Ace
Ace
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11608

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos