Quem esta conectado e estatisticas em quadros

+2
Konai
nejibyakugan
6 participantes

Ir para baixo

Tópico resolvido Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 26.01.14 22:43

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


Última edição por nejibyakugan em 16.02.14 0:12, editado 1 vez(es)
nejibyakugan
nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo


Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por JScript 12.02.14 22:42

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
JScript
JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 12.02.14 23:04

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?
nejibyakugan
nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por JScript 12.02.14 23:53

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


Última edição por JScript em 14.02.14 15:30, editado 2 vez(es)
JScript
JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 12.02.14 23:57

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.
nejibyakugan
nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por JScript 13.02.14 0:11

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
JScript
JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 14.02.14 15:29

Ainda continua o texto misturado com a parte onde fica escrito ESTATISTICAS.
nejibyakugan
nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por JScript 14.02.14 15:32

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
JScript
JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 15.02.14 23:42

Ainda está a pontinha da letra esbarrando na barra onde está escrito ESTATISTICAS...Quem esta conectado e estatisticas em quadros - Página 2 452154

Se não tiver como, poderia me enviar como reverter os procedimentos? Meu fórum já tá a um tempinho com esse bug e tá ficando chato para os membros Quem esta conectado e estatisticas em quadros - Página 2 452154
nejibyakugan
nejibyakugan
Membro

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por JScript 16.02.14 0:06

Olá!

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

JS
JScript
JScript
Super Membro

Membro desde : 15/03/2013
Mensagens : 1449
Pontos : 1901

http://jscript.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Quem esta conectado e estatisticas em quadros

Mensagem por nejibyakugan 16.02.14 0:12

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

Membro desde : 09/08/2012
Mensagens : 541
Pontos : 898

http://pokemonmq.forumeiros.com/forum

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos