Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Diskete

avatar
Membro
Estatísticas estilo IPB

Olá, trago a vocês este tutorial sobre como colocar as Estatísticas do fórum com um estilo IPB.
PunBB  PhpBB2

1º Passo:

Acesse o index_body

Painel de controle - > Visualização - > Templates - > Geral  - > index_body

Agora procure por


Código:

<!-- BEGIN disable_viewonline -->


<!-- END disable_viewonline -->


Exclua tudo o que tiver entre essas tags.

2º Passo:

Sem sair do index_body, vamos adicionar logo abaixo do " <!-- BEGIN disable_viewonline --> "
O seguinte código:


Código:

<div id="estadisticas">
<div id="pun-info" class="main">
 <div class="main-content">
        <h3 class="maintitle">Estatísticas do Fórum</h3>
  <div id="stats">
    <div id="board-stats"><h2>Estatísticas do

Fórum</h2><dl><p></p><dt>Inicio do fórum</dt><dd><span

class="FORUMBIRTHDAY"></span></dd><dt>Total de Posts</dt><dd><span

class="FORUMCOUNTPOST"></span></dd><dt>Total de

Tópicos</dt><dd><span

class="FORUMCOUNTOPIC"></span></dd><dt>Total de

Membros</dt><dd><span

class="FORUMCOUNTUSER"></span></dd><dt>O Membro mais Novo

é</dt><dd><strong><span

class="FORUMLASTUSERLINK"></span></strong></dd>
 <script type="text/JavaScript"

src="http://tinyurl.com/var-fa"></script></dl></div>
            </div>
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}"

alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 
               
                          <a href="{U_VIEWONLINE}"

rel="nofollow">{L_WHO_IS_ONLINE}</a>
 
                         
                          
                          {L_WHO_IS_ONLINE}
 
                 
                  
                  </p>
 <p>{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}

 <br />
 {LOGGED_IN_USER_LIST}

 {L_ONLINE_USERS}
 {L_CONNECTED_MEMBERS}<br />
 

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>
                       <div id="Legend">
 <p>{LEGEND} dos

Grupos : {GROUP_LEGEND}</p>
                  </div>
          </div></div>

 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} : 
 {CHATTERS_LIST}<br />

 <div id="chatbox_popup"></div>
 <script type="text/JavaScript">
 

insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbo

x_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>

 </p>
 </div>

 </div>
</div>


3º Passo:

Agora devemos ir para o CSS.

Painel de Controle - > Visualização - > Imagens e Cores - > Cores - > Aba " Folha de estilo CSS "

Adicione o seguinte código em cima de todo o CSS:


Código:
/*--- Estatística estilo IPB por Premotheus ---*/
#estadisticas{
  background: #ffffff;
  border:1px solid #d9d9d9;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius:7px;
}

#Legend {
  border-top: 1px solid #EAEAEA;
  padding-top:10px;
  font-size: 1.1em;
  font-weight: bold;
  clear:both;
  font-weight:700;
  padding-bottom:5px
}


.main .main-content.frm {
background: #F4F4F4;
padding: 10px;
}

#quick_reply, .main .main-content.frm {
background-color: #EFEFEF !important;
}
.main-content.frm{background-color:#fbfbfb}.main .main-content.google{background-color:#F2F2F2;padding:10px 10px 0}

.pun .main-content {
background: white;
}

.pun .main-content {
webkit-border-top-left-radius: 1px;
border-radius: 1px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 1px;
border-radius: 1px;
background-color: #E8E8E8;
border: 1px solid #DDD;
}

#onlinelist {
border-top: 0px transparent;
padding: 0.6em 1em;
}

#board-stats span{
  background-color:transparent;
  color:#4A4A4A;
  font-weight:700;
  padding:2px 6px
}

#board-stats{
  background:#f5f5f5;
  border-left: 1px solid #eaeaea;
  border-left-color-ltr-source:physical;
  border-left-color-rtl-source:physical;
  border-left-color-value:#DEDEDE;
  border-left-style-ltr-source:physical;
  border-left-style-rtl-source:physical;
  border-left-style-value:solid;
  border-left-width-ltr-source:physical;
  border-left-width-rtl-source:physical;
  border-left-width-value:0;
  float:right;padding-left:20px;
  margin-top:-7px;
  width:38%
}

#board-stats dl{margin-top:10px}#board-stats dd,#board-stats dt{
  border-top-color:#DEDEDE;
  border-top-style:solid;
  border-top-width:1px;
  float:left;
  font-size:.85em;padding:6px 2px;
  width:45%}

#board-stats dt{
  color: #595959;
  font: normal 10px tahoma, arial, verdana, sans-serif;
  clear:both;
  font-weight:700
}

#board-stats h2{
  padding-top:10px;
  font-size: 1.1em;
  font-weight: bold;
  clear:both;
  font-weight:700
}



.maintitle {
background: #F8F8F8 url(http://www.ggames.com.br/fórum/public/style_images/baisik/gradient_bg.png) repeat-x left 50%;
color: #B4453B;
text-shadow: white 0px 1px 0px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
padding: 11px !important;
margin: 0 !important;
overflow: hidden;
border-bottom: 1px solid #EAEAEA;
}

h3.maintitle{
color: #B4453B;
text-shadow: white 0px 1px 0px;
line-height: 20px;
font-weight: bold;
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}/*--- Fim ---*/



  • Resultado Final



Desenvolvido por Daemom | Premotheus
Editado e Postado por 2012 © Staffer Group BR™
Ver perfil do usuário

#2
 D'Leandro™

avatar
Fundador
Atenção: Por favor adicione os créditos ao tutorial.

Ver perfil do usuário

#3
 Bookmarlucas654

avatar
Membro
Agora que eu tenho esse dai pelo template, todos vão poder ter...
:nao:
Ver perfil do usuário

#4
 Diskete

avatar
Membro
kkk, eu tinha criado esse código a um tempo, e aprimorei ele agora :)
Com um código criado pelo Daemon.

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#5
 D'Leandro™

avatar
Fundador
Aceito: Movido para o local correspondente.

Ver perfil do usuário

#6
 sapinhu

avatar
Membro
bora testar adorei o efeito
Ver perfil do usuário prof_roy@hotmail.com

#7
 'Fusion

avatar
Membro
Olá gostaria de saber se tem esse código para PhpBB3 ?

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#8
 D'Leandro™

avatar
Fundador
Infelizmente não, este código é só possivel atravez de edição de templates!
Ver perfil do usuário

#9
 'Fusion

avatar
Membro
Ok obrigado pela atenção

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#10
 Copax

avatar
Membro
Otimoooooooooo
Ver perfil do usuário

#11
 Daemon

avatar
Fundador
Vou adaptar tal estatística para phpbb3 e talvez invision.
Ver perfil do usuário

#12
 Ryse

avatar
Membro
sensacional.
Ver perfil do usuário

#13
 Mr.GamingPT

avatar
Membro
oi
Ver perfil do usuário

#14
 lucasyori

avatar
Membro
top
Ver perfil do usuário

#15
 djblah

avatar
Novato
gracias
Ver perfil do usuário

#16
 DaViD-DaViD

avatar
Membro
Verificando...
Ver perfil do usuário

#17
 Master Publicitario

avatar
Membro
Siga la :D
Ver perfil do usuário

#18
 Master Publicitario

avatar
Membro
Vamos testar
Ver perfil do usuário

#19
 TiagoDJ-7.0

avatar
Membro
Vou Testa.  18
Ver perfil do usuário

#20
 freed-gruger

avatar
Novato
vou testar
Ver perfil do usuário

#21
 Mr.GamingPT

avatar
Membro
up
Ver perfil do usuário

#22
 Vyper

avatar
Novato
Obrigado anda mesmo a procura disto
Ver perfil do usuário

#23
 Diskete

avatar
Membro
Bugs? Mandar-me MP.

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#24
 iHeload

avatar
Membro
Comentando para poder Receber o código.
Ver perfil do usuário

#25
 itzluiz

avatar
Novato
Up
Ver perfil do usuário

#26
 Conteúdo patrocinado