Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Administrador
Mensagens : 441
Pontos : 9921
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Estatisticas Elegante

em 30.12.15 12:28
Informação:
Autor
: Sliw
Funcionalidade: PhpBB3




Acesse:
Painel de Controle Modulos Html e JavascriptGestão dos codigos Javascript
E crie um novo javascript com investimento no indice com esse codigo:

Código:
jQuery(document).ready(function(){
  $(".forabg + .linklist").after('
<div id="main_abas"><div id="content1" class="aba">
</div><div id="content2" class="aba">
</div><div id="content3" class="aba">
</div><div id="content4" class="aba">
</div>
</div>
');
  $("#i_whosonline + p").appendTo("#content1.aba");
  $("p + .clear + .h3, p.page-bottom + .h3, p.page-bottom").appendTo("#content2.aba");
  $("em").appendTo("#content3.aba");
  $('#content4.aba').append('
<center><strong>Código desenvolvido por Sliw - BestStyle');
  $("#i_whosonline + p").addClass('onlinelist');
});

Feito isto, acesse:
Painel de Controle Modulos Portal e WidgetsGestão dos widgets do fórum
Crie um novo widget personalizado sem o uso de table type com esse codigo:
Código:
<script>
jQuery(document).ready(function(){
jQuery('#main_abas').prepend(
'<ul id="navbar"><li><a class="active">BestStyle</a></li> <li><a>Estatísticas</a></li><li><a>Grupos</a></li><li><a>Créditos</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#content1').css('display', 'block');

jQuery('a', jQuery('#navbar')).click(function() {
var i = jQuery('a', jQuery('#navbar')).index(this) + 1;
jQuery(this).parents('#main_abas').children('.aba:visible').hide();
jQuery('#content' + i).show();
jQuery(this).parents('#navbar').find('a').removeClass('active');
jQuery(this).addClass('active');
})
})
</script><style>
.onlinelist {
  font-size: 12px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin-top: 8px;
  padding: 8px 10px;
}
.onlinelist em {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
}
div.h3, div.h3 a {display: none!important;}
div#main_abas {
margin-bottom: 9px;
padding: 18px;
border: 1px solid #0E87F0;
box-shadow: 0px 2px 6px #333;
border-radius: 10px;
background: #B2E1FF;
background: -moz-linear-gradient(top, rgba(178, 225, 255, 1) 0%, rgba(102, 182, 252, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178, 225, 255, 1)), color-stop(100%,rgba(102, 182, 252, 1)));
background: -webkit-linear-gradient(top, rgba(178, 225, 255, 1) 0%,rgba(102, 182, 252, 1) 100%);
background: -o-linear-gradient(top, rgba(178, 225, 255, 1) 0%,rgba(102, 182, 252, 1) 100%);
background: -ms-linear-gradient(top, rgba(178, 225, 255, 1) 0%,rgba(102, 182, 252, 1) 100%);
background: linear-gradient(to bottom, rgba(178, 225, 255, 1) 0%,rgba(102, 182, 252, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
}
div.aba {
max-height: 200px;
overflow: auto;
padding: 15px;
border: 1px solid #444!important;
box-shadow: 0px 2px 6px grey;
border-radius: 6px;
background: #EEE;
background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238, 238, 238, 1)), color-stop(100%,rgba(238, 238, 238, 1)));
background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%,rgba(238, 238, 238, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
}
#navbar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navbar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navbar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background: #499BEA;
  color:#333;
  text-decoration:none;
  }
#navbar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navbar li a.active {background-color:#009;}
#navbar li a {
cursor: pointer;
text-decoration: none;
margin-left: 8px;
color: white;
border-radius: 5px;
font-weight: bold;
text-shadow: 1px 0px 0.5px #888;
border: 1px solid #0E3B96;
padding: 8px;
padding-left: 10px;
padding-right: 10px;
box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
display:inline-block;
transition: background-color 0.5s;
}
    #navbar li a:hover {    background-color: #22D5E7;}
</style>

Resultado:

Deseja pra outra versão? crie um novo topico na area de suporte com o titulo "Estatisticas Elegante"
avatar
Administrador
Mensagens : 441
Pontos : 9921
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Estatisticas Elegante

em 30.12.15 12:28
Tutorial Aceito
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum