Quem esta conectado e estatisticas em quadros

Relembrando a primeira mensagem :

Qual é minha questão:
Pessoal eu queria colocar em quadros os QUEM ESTÁ CONECTADO, ESTATISTICAS e ANIVERSÁRIOS em quadros, mas só achei o tutoria pra Phpbb3 aqui no FDF, eu queria saber como colocar isso em fórum PUNBB.

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

Versão do fórum:
PUNBB

Aqui está todo o CSS de acordo com o que deseja incluindo a imagem:

Código:


#l_whosbirthday {
  position: relative;
}
#l_whosbirthday p {
  background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0 !important;
  font-weight: bold;
  margin-left: -12px;
  margin-top: 20px;
  padding: 7px;
}
.main-box.clearfix {
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg");
}
.pun .main-box.clearfix a:link {
    color: #000000 !important;
    font-weight: bold;
}
#pun-info #stats:before {
    color: #000000;
    content: "Estatísticas ";
    font-weight: bold;
}
#pun-info #stats {
    background-color: #73CFE6 !important;
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
    background-repeat: no-repeat !important;
    position: relative;
}
#stats p.right:before {
    content: url("http://i10.servimg.com/u/f10/17/64/07/28/estati10.jpg");
    margin-left: -70px;
    position: absolute;
}
#stats p.right {
    padding-left: 70px;
    position: absolute;
}
#stats > p {
    padding-left: 70px;
    padding-top: 10px;
}
#stats p:nth-of-type(2) {
    padding-top: 32px;
}
.main-content #onlinelist {
    background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
    background-repeat: no-repeat;
    border-radius: 0 0 0 0 !important;
    margin-top: 28px;
    position: relative;
}
#onlinelist p.right {
    color: #000000 !important;
    float: left;
    font-weight: bold;
    margin-left: -135px;
}
#onlinelist p:nth-of-type(2) {
    padding-top: 30px;
}
#onlinelist img {
  border-color: #D5D5D5;
  border-style: solid;
  border-width: 2px;
  float: left;
  height: 150px !important;
  margin-left: -10px;
  margin-right: 10px;
  margin-top: 30px;
  max-height: 150px !important;
  max-width: 110px !important;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px !important;
  padding-top: 10px;
  width: 110px !important;
}
.main-content #onlinelist {
  padding-right: 0 !important;
}


Resultado:

Spoiler:

Abraços,

JS

Mas repare uma coisa, em ESTATISTICAS o fundo meio troca de cor, desse azul mais suave, a um claro mas forte, eu quero que o fundo das estatisticas fique igual o fundo do QUEM ESTÁ CONECTADO, todo de uma cor só(esse azul suave)


Tem algo estranho, as imagens que coloco ficam desproporcionais, vou manter elas por enquanto para que você possa ver.

Eu queria que ficasse tudo da mesma largura, tipo esse fórum http://www.pokeshiny.com/
Teria como?

As imagens que você deseja são diferentes em altura e largura das que eu estava editando o CSS, portanto o código depende da imagem que vai utilizar, ficando específico para tal!

Sobre a cor também já está resolvido, troque todo o CSS anterior por este:

Código:


    #pun-info #stats:before {
        color: #000000;
        content: "Estatísticas ";
        font-weight: 700;
    }
    #pun-info #stats {
        background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
        background-repeat: no-repeat !important;
        position: relative;
    }
    #stats {
        background-color: #97C5E8;
        line-height: 150%;
        padding: 0.6em 1em;
    }
    #stats p.right:before {
        content: url("http://i55.servimg.com/u/f55/17/45/31/00/estati11.jpg");
        margin-left: -140px;
        position: absolute;
    }
    #stats p.right {
        padding-left: 140px;
        position: absolute;
    }
    #stats > p {
        padding-left: 140px;
        padding-top: 10px;
    }
    #stats p:nth-of-type(2) {
      padding-top: 32px;
    }
#onlinelist p:nth-of-type(2) {
  min-height: 165px;
  padding-top: 30px;
}
    .main-content #onlinelist {
      background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
      background-repeat: no-repeat;
      border-radius: 0 0 0 0 !important;
      margin-top: 48px;
      padding-right: 0 !important;
      position: relative;
    }
    #onlinelist img {
      border-color: #D5D5D5;
      border-style: solid;
      border-width: 2px;
      float: left;
      height: 150px !important;
      margin-left: -10px;
      margin-right: 10px;
      margin-top: 30px;
      max-height: 150px !important;
      max-width: 110px !important;
      padding: 10px !important;
      width: 110px !important;
    }
    #onlinelist p.right {
      color: #000000 !important;
      float: left;
      font-weight: 700;
      margin-left: -135px;
    }
    #l_whosbirthday p {
      background-image: url("http://i55.servimg.com/u/f55/17/45/31/00/fundo_13.jpg") !important;
      background-repeat: no-repeat;
      border-radius: 0 0 0 0 !important;
      font-weight: 700;
      margin-left: -12px;
      margin-top: 20px;
      padding: 7px;
    }


Resultado:

Spoiler:

Abraços,

JS

Mas não tem um jeito de eu colocar imagem de qualquer tamanho? Ou sempre vai ter que ser um especifico?


Alterei o código para o que você disse mas tem uma coisa estranha, as palavras tão entrando dentro da categoria, tipo QUEM ESTÁ CONECTADOhá 24 pessoas online etc...

Assim tudo junto, dá uma olhada.

Editei o tópico com essa correção: https://ajuda.forumeiros.com/t88868p30-quem-esta-conectado-e-estatisticas-em-quadros#607224

E sim, o CSS foi baseado no tamanho atual das imagens!

JS

Editei o tópico novamente com mais essa correção: https://ajuda.forumeiros.com/t88868p30-quem-esta-conectado-e-estatisticas-em-quadros#607224

Desta vez eu determinei um valor mínimo para a distância entre eles ok?

JS

Olá!

Nos teste que eu fiz funcionou normalmente, mas se desejar retornar ao que estava, basta remover o CSS que lhe passei!

JS

Hum... obrigado pela sua atenção.