InícioComo personalizar caixa de conectados/estatisticas
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1 • Compartilhe
Como personalizar caixa de conectados/estatisticas
por Mercer' 11.11.12 23:11
Como faço para personalizar deste modo,ou criando uma imagem com um campo para personalizar e alinhar o campo na imagem...
se conseguirem entender obrigado rsrs....
http://rmbr.forumeiros.com <- site onde se encontra a personalização
Fórum: http://morre.forumeiros.com (punBB)
Imagens do problema:
se conseguirem entender obrigado rsrs....
http://rmbr.forumeiros.com <- site onde se encontra a personalização
Fórum: http://morre.forumeiros.com (punBB)
Imagens do problema:
Última edição por Mercer' em 12.11.12 2:16, editado 2 vez(es)
Mercer'- ***
- Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220 -
Re: Como personalizar caixa de conectados/estatisticas
por BrunoH. 12.11.12 0:06
Olá!
Painel de Controle ->> Visualização ->> Templates ->> Geral ->> index_body
Clique em
Modificar, procure (Ctrl + F) por:
Agora, Aceda a "Folha de Estilo CSS":
Agora por final, iremos crie um código JavaScript:
Título
Escolha um título qualquer.
Investimento No índice.
Código JS:
Até mais!
Painel de Controle ->> Visualização ->> Templates ->> Geral ->> index_body
Clique em
Modificar, procure (Ctrl + F) por:- Código:
<!-- BEGIN disable_viewonline -->
- Código:
<!-- END disable_viewonline -->
- Código:
<div class="fundo"><center><b class="letras">ESTATÍSTICAS</b></center><div style="" id="stats2">
<b> » </b>{TOTAL_POSTS} <p/>
<b> » </b>{TOTAL_USERS} <p/>
<b> » </b>{NEWEST_USER}
</div>
<!--<div id="pun-info" class="main">
<div class="main-content"> -->
<table border="0" cellspancing="auto" cellpadding="auto">
<tr><td width="50%" colspan="2"><center><b class="letras">QUEM ESTÁ ON?</b></center><div id="onlinelist2">
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}</div></td>
<td width="50%" colspan="2"><center><b class="letras">QUEM PASSOU POR AQUI?</b></center><div id="onlinelist3">{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br /></div></td></tr></table><center><b class="letras">LEGENDAS</b></center>
<div id="onlinelist4">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<p>{LEGEND} : {GROUP_LEGEND}</p></div></div>
<div class="fundo2"><!-- BEGIN switch_chatbox_activate -->
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</p>
<!-- END switch_chatbox_activate -->
</div>
Agora, Aceda a "Folha de Estilo CSS":
Código:Painel de Controle
- Código:
/*QUEM ESTÁ ONLINE? -PERSONALIZAÇÃO*/
.letras{
border-bottom:2px solid white;
color:#8C8C8C;
text-shadow:1px 0px 1px #CFCFCF;
background: none repeat scroll 0 0 #FCFCFC;
position:relative;
bottom:-1px;
border:2px solid #787878;
border-radius: 5px 5px 0px 0px;
padding:5px;
padding-bottom:0px!Important;
}
.letras:hover{
border-bottom:2px solid white;
text-shadow:none;
border:2px solid black;
trasition: background linear 0.5s;
-o-trasition: background linear 0.5s;
-moz-trasition: background linear 0.5s;
-webkit-trasition: background linear 0.5s;
background: none repeat scroll 0 0 #F7F7F7;
}
#stats2{
margin-bottom:10px!Important;
background: none repeat scroll 0 0 #FCFCFC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:auto;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist2{
margin-bottom:10px!Important;
background: none repeat scroll 0 0 #FCFCFC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-left:-2px;
height:145px;
width:350px!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist3{ margin-bottom:10px!Important;
background: none repeat scroll 0 0 #FCFCFC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-right:-2px;
height:145px;
margin-left:5px;
width:350px!Important;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
#onlinelist4{
background: none repeat scroll 0 0 #FCFCFC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
max-width:100%;
width:98.8%;
max-height:50%;
border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
}
.fundo{
margin-bottom:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}
.fundo2{
margin-top:5px;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
margin-top: 10px;
padding:10px;
}
Agora por final, iremos crie um código JavaScript:
Clique em "Criar um novo JavaScript".Painel de Controle
Título
Escolha um título qualquer.Investimento
No índice.Código JS:
- Código:
jQuery(document).ready(function(){jQuery('.fundo #stats2').prev().hide();jQuery('.fundo #stats2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist2').prev().hide();jQuery('.fundo #onlinelist2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist3').prev().hide();jQuery('.fundo #onlinelist3').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
jQuery(document).ready(function(){jQuery('.fundo #onlinelist4').prev().hide();jQuery('.fundo #onlinelist4').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
Até mais!
BrunoH.- Membro Entusiasta
- Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385 -
Re: Como personalizar caixa de conectados/estatisticas
por Mercer' 12.11.12 0:29
Ficou perfeito....
Porém 2 duvidas, se eu fizer uma imagem pra por ali no lugar do campo, tem como modificar ? outra...
tem como tirar o "quem passou por aqui " ?
Porém 2 duvidas, se eu fizer uma imagem pra por ali no lugar do campo, tem como modificar ? outra...
tem como tirar o "quem passou por aqui " ?
Mercer'- ***
- Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220 -
Re: Como personalizar caixa de conectados/estatisticas
por BrunoH. 12.11.12 0:39
Olá!
Sobre a questão da imagem, é possível. Porem não aconselho o senhor a colocar.
Sobre o Modificar a zona "Quem está On", no código do index_body que lhe forneci, veja onde modificar:
Até mais!
Sobre a questão da imagem, é possível. Porem não aconselho o senhor a colocar.
Sobre o Modificar a zona "Quem está On", no código do index_body que lhe forneci, veja onde modificar:
- Spoiler:
- <div class="fundo"><center><b class="letras">ESTATÍSTICAS</b></center><div style="" id="stats2">
<b> » </b>{TOTAL_POSTS} <p/>
<b> » </b>{TOTAL_USERS} <p/>
<b> » </b>{NEWEST_USER}
</div>
<!--<div id="pun-info" class="main">
<div class="main-content"> -->
<table border="0" cellspancing="auto" cellpadding="auto">
<tr><td width="50%" colspan="2"><center><b class="letras">QUEM ESTÁ ON?</b></center><div id="onlinelist2">
{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
<br />
{LOGGED_IN_USER_LIST}</div></td>
<td width="50%" colspan="2"><center><b class="letras">QUEM PASSOU POR AQUI?</b></center><div id="onlinelist3">{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br /></div></td></tr></table><center><b class="letras">LEGENDAS</b></center>
<div id="onlinelist4">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<p>{LEGEND} : {GROUP_LEGEND}</p></div></div>
<div class="fundo2"><!-- BEGIN switch_chatbox_activate -->
<p class="page-bottom">
{TOTAL_CHATTERS_ONLINE} :
{CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
</script>
<!-- END switch_chatbox_popup -->
</p>
<!-- END switch_chatbox_activate -->
</div>
Até mais!
BrunoH.- Membro Entusiasta
- Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385 -
Re: Como personalizar caixa de conectados/estatisticas
por Mercer' 12.11.12 0:52
Poderia me falar o local que vejo a zona pra mudar,a imagem se possivel.
Agora pelo resto muito obrigado funcionou perfeitamente,editei ali e deixei de minha preferencia....
Cordialmente, Mercer.
Agora pelo resto muito obrigado funcionou perfeitamente,editei ali e deixei de minha preferencia....
Cordialmente, Mercer.
Mercer'- ***
- Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220 -
Re: Como personalizar caixa de conectados/estatisticas
por BrunoH. 12.11.12 1:05
Olá!
Para adicionar uma imagem de fundo, adicione os seguintes códigos em sua Folha de Estilo CSS:
Imagem de fundo "Quem está Online":
Até mais!
Para adicionar uma imagem de fundo, adicione os seguintes códigos em sua Folha de Estilo CSS:
Imagem de fundo "Quem está Online":
Imagem de Fundo "Legenda":#onlinelist2 {background-image: url(URL_DA_IMAGEM);}
#onlinelist3 {background-image: url(URL_DA_IMAGEM);}
Até mais!
BrunoH.- Membro Entusiasta
- Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385 -
Re: Como personalizar caixa de conectados/estatisticas
por Mercer' 12.11.12 2:16
BrunoH. escreveu:Olá!
Para adicionar uma imagem de fundo, adicione os seguintes códigos em sua Folha de Estilo CSS:
Imagem de fundo "Quem está Online":Imagem de Fundo "Legenda":#onlinelist2 {background-image: url(URL_DA_IMAGEM);}#onlinelist3 {background-image: url(URL_DA_IMAGEM);}
Até mais!
Obrigado pela ajuda manin, Parabéns pelo trabalho competente e agil....
Se precisar de algo MP - me rsrs...
Grato, Mercer
Mercer'- ***
- Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220 -
Tópicos semelhantes» Personalizar a caixa de busca como a daqui do FDF
» Como remover a caixa de Estatísticas ?
» Como personalizar as estatísticas do meu fórum invision?
» Como simplificar toda a minha caixa de estatísticas?
» Como personalizar caixa de citação, spoiler e codigo
» Como remover a caixa de Estatísticas ?
» Como personalizar as estatísticas do meu fórum invision?
» Como simplificar toda a minha caixa de estatísticas?
» Como personalizar caixa de citação, spoiler e codigo
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
