Modificar estatisticas

Qual é minha questão:
Boas,
Gostaria de saber se as estatistícas deste fórum: http://shdesign.ativoforum.com/
podem ser colocadas no meu.

Alguém poderia ajudar-me com isso? Gostaria de modificar a área do fórum.

Endereço do meu fórum:
http://testeki.forumeiros.com

Versão do fórum:
PHPBB3

Olá,

Infelizmente não, apenas fóruns na versão PunBB e phpBB.

Cordialmente,
The Boss

Lógico que é possivel com JS... vou tentar fzr o código pra vc, peço que aguarde.

Aguardando. Amigo! =D.

Crie um java script com esse codigo:

Código:

jQuery(document).ready(function(){
$(".forabg + .linklist").after('<div id="box"></div>');
  $(".forabg + .linklist").after('<div id="stats"></div>');
$("#stats").after('<div id="stats2"></div>');
$("#stats2").after('<div id="stats3"></div>');
$("#stats3").after('<div id="stats4"><span style="font-size:12px">Código desenvolvido por <b>StyLe®</b> e <b>HenRyqUéè</b> - <b>SH-Design</b></span></div>');
$("p + .clear , p.page-bottom , p.page-bottom").css("margin-top","-0.1px");
  $("p + .clear , p.page-bottom , p.page-bottom").appendTo("#stats");
  $("#i_whosonline + p").appendTo("#stats2");
$("#stats2 p em").css("font-style", "normal").css("font-size", "12px");
$("#stats2 p em").appendTo("#stats3");
$('.h3:contains("Quem está conectado"), .h3:contains("Estatísticas")').hide();
$("#stats").before('<div id="margem" style="margin-bottom:10px!Important;"><span id="s1">ESTATÍSTICAS</span><span id="s2">QUEM ESTÁ ONLINE</span><span id="s3">LEGENDAS</span><span id="s4">CRÉDITOS</span><br></div>');
$("#stats2, #stats3, #stats4").hide();
$("#s1").click(function(){
$("#stats2, #stats3, #stats4").hide();
$("#stats").show();
});
$("#s2").click(function(){
$("#stats, #stats3, #stats4").hide();
$("#stats2").show();
});
$("#s3").click(function(){
$("#stats2, #stats, #stats4").hide();
$("#stats3").show();
});
$("#s4").click(function(){
$("#stats2, #stats3, #stats").hide();
$("#stats4").show();
});
$("#margem,#stats,#stats2,#stats3,#stats4").appendTo("#box");
});


va até seu css é aplique o seguinte codigo:

Código:

#stats, #stats2, #stats3, #stats4 {
margin-bottom:8px;
padding:10px;
border:1px solid #7D7D7D;border-radius:5px;
box-shadow:0px 3px 2px #C9C9C9;
max-height:200px;
overflow:auto;
background: rgb(249,252,247); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(249,252,247,1) 0%, rgba(245,249,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,252,247,1)), color-stop(100%,rgba(245,249,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(249,252,247,1) 0%,rgba(245,249,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#box {
padding:11px;
padding-top:18px;
padding-bottom:7px;
border:2px solid #888;
border-radius:9px;
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#s1,#s2,#s3,#s4 {
cursor:pointer;
padding:5px;
background: rgb(232,255,255);
background: -moz-linear-gradient(top,  rgba(232,255,255,1) 0%, rgba(221,241,249,1) 35%, rgba(189,223,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,255,255,1)), color-stop(35%,rgba(221,241,249,1)), color-stop(100%,rgba(189,223,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(189,223,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(189,223,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(189,223,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(189,223,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ffff', endColorstr='#bddfed',GradientType=0 ); /* IE6-9 */
border:1px solid #6F92B0;
border-radius:5px;
font-size:13px;
box-shadow:0px 0px 2px #7DB9ED;
margin-right:6px;
}
#s1:hover,#s2:hover,#s3:hover,#s4:hover {
font-weight:bold;
color:#088CC4;
border:1px solid #088CC4;
}

Boas, ficou tudo bem vindo. pensei que não havia funcionado, não há como ficar com as bordas?

http://testeki.forumeiros.com/

Fiz o meu código vamos lá...

crie um novo javascript com investimento no índice e adicione este código:

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 Daemon - BestSkins');
  $("#i_whosonline + p").addClass('onlinelist');
});

Salve!

depois crie um novo widget personalizado sem utilizar um table type e adicione:

Código:

<script>
jQuery(document).ready(function(){
jQuery('#main_abas').prepend(
'<ul id="navbar"><li><a class="active">BestSkins</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>

veja se resulta '

Boas,
não está um do lado do outro, como eu, queria. =/. E ainda assim, o código não funcionou, continua da mesma forma tradicional.

você criou um novo widget? e colocou o segundo código?

lembre-se de ativar os widgets do seu fórum... '

Adicionei o segundo código na página de CSS, pensei que fosse o mesmo do anterior. LoL.

eu, nunca utilizei windgt, sempre tive alguém que fizesse isso para mim, sempre fiquei na parte de moderação do fórum. E quando cá venho, abro apenas questões.

Onde fica a opção de gestão widget?

Painel de controle > Módulos > Portal & Widgets > Gestão dos widgets do fórum. '

crie um widget personalizado e adicione o segundo código...

lembre-se também de ativar os widgets'

Boas,
O código, funciona. Porém, agora o corpo do fórum, o conteúdo do fórum está mais para direita e deixa um grande vazio, em um dos lados. Há como fazer algo para coloca-lo mais no centro? Além disso, gostaria de modificar a cor do corpo das estatísticas, para a cor geral do meu fórum.

Há como fazer essas modificações?

Lá em Gestão dos widgets do fórum vai ter:

Largura coluna 1 (esquerda) : Coloque (0)
Largura coluna 3 (direita) : Coloque (180)

'

Boas,
Gostaria de modificar a cor agora das estatísticas.
Acabo de estabelecer o equilíbrio entre os laterais do fórum.
Há como modificar a cor?

As classes que modificão a cor das estatísticas estão no widget '

Eu, modifiquei tudo que vi pela frente, e não mudou a cor do fundo das estatísticas.