Como alterar o modo de visualização dos emblemas?

Detalhes da questão

Endereço do fórum: http://rhcoficial.forumeiros.com
Versão do fórum: phpBB2

Descrição

Olá, eu gostaria de alterar como os emblemas são apresentados no mini perfil que acompanha as postagens. O atual é desta forma:

E eu quero que fique assim:

E tipo, não quero que dê para pôr só 1 emblema, quero que possa ter vários emblemas.

Olá,

Na verdade, a versão do seu fórum é phpBB3.
Para fazermos o que o senhor pede, terá que acessar:
Painel de Controle Usuários Perfis, e criar um novo perfil.

Configurando-o da seguinte forma:
http://prntscr.com/eztu5t

Aí, logo vai gerar uma caixa similar à esta, no perfil dos usuários:
http://prntscr.com/eztuhi

Você irá colocar o texto dessa forma:

Código:

[quote]
[img]http://www.habbid.com.br/arquivos/2017/04/1319703658.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/465048567.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/1319703658.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/465048567.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/1319703658.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/465048567.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/1319703658.gif[/img]
[img]http://www.habbid.com.br/arquivos/2017/04/465048567.gif[/img]
[/quote]

Lembre-se que as imagens podem ser colocadas infinitamente.
Mas lembre-se de colocar:

Código:

[quote] e o [/quote]

Ao início e ao final, como demonstrei acima.

---

E após isso, adicionar em sua CSS:

Código:

.fields blockquote {
  background-color: transparent!important;
  border: solid 0px transparent!important;
}

dd.field blockquote {
  border: solid 0px transparent!important;
  color: #555!important;
  background-color: transparent!important;
  margin: -15px;
  overflow: hidden;
}

dd.field blockquote > div {
  margin: 10px;
}

dd.field blockquote > div br {
  display: none!important;
  height: 0px;
  position: absolute;
  top: -99999px;
  left: -9999px;
}

dd.field blockquote > div img {
  border: solid 1px #efefef;
  background: #d8d8d8;
  border-radius: 3px;
  margin: 5px;
  padding: 4px;
  box-shadow: inset 0px 3px #cacaca;
}

Sei que sua CSS tá lotada.
Tenho uma versão minificada:

Código:

.fields blockquote {background-color: transparent!important;border: solid 0px transparent!important;}
dd.field blockquote {border: solid 0px transparent!important;color: #555!important;background-color: transparent!important;margin: -15px;overflow: hidden;}dd.field blockquote > div {margin: 10px;}
dd.field blockquote > div br {display: none!important;height: 0px;position: absolute;top: -99999px;left: -9999px;}dd.field blockquote > div img {border: solid 1px #efefef;background: #d8d8d8;border-radius: 3px;margin: 5px;padding: 4px;box-shadow: inset 0px 3px #cacaca;}

o/

Olá Luiz, o CSS gerou isso:


Se possível, gostaria que o nome "Emblemas" não aparecesse e que o bloco de apresentação dos emblemas ficasse centralizado e menor podendo suportar 9 emblemas (3x3) por cada página.

Atenciosamente,
Luan

Use este código CSS:

Código:

.postprofile > dl > dd > img[alt=""][title=""] {
    border: 1px solid #bdbdbd;
    border-top: 2px solid #afafaf;
    border-radius: 3px;
    /* display: inline-block; */
    margin: 3px!important;
    background-color: #e2e2e2;
    float: left;
    padding: 1px!important;
}

Desculpa, mas continua igual...

Ora pois, isso por que o senhor não fez o que lhe pedi para fazer nesta mensagem:
-> https://ajuda.forumeiros.com/t108801-como-alterar-o-modo-de-visualizacao-dos-emblemas#762582

Mais especificamente, nessa parte:

Luiz~ escreveu:E após isso, adicionar em sua CSS:

Código:

.fields blockquote {
  background-color: transparent!important;
  border: solid 0px transparent!important;
}

dd.field blockquote {
  border: solid 0px transparent!important;
  color: #555!important;
  background-color: transparent!important;
  margin: -15px;
  overflow: hidden;
}

dd.field blockquote > div {
  margin: 10px;
}

dd.field blockquote > div br {
  display: none!important;
  height: 0px;
  position: absolute;
  top: -99999px;
  left: -9999px;
}

dd.field blockquote > div img {
  border: solid 1px #efefef;
  background: #d8d8d8;
  border-radius: 3px;
  margin: 5px;
  padding: 4px;
  box-shadow: inset 0px 3px #cacaca;
}

Sei que sua CSS tá lotada.
Tenho uma versão minificada:

Código:

.fields blockquote {background-color: transparent!important;border: solid 0px transparent!important;}
dd.field blockquote {border: solid 0px transparent!important;color: #555!important;background-color: transparent!important;margin: -15px;overflow: hidden;}dd.field blockquote > div {margin: 10px;}
dd.field blockquote > div br {display: none!important;height: 0px;position: absolute;top: -99999px;left: -9999px;}dd.field blockquote > div img {border: solid 1px #efefef;background: #d8d8d8;border-radius: 3px;margin: 5px;padding: 4px;box-shadow: inset 0px 3px #cacaca;}

Lembre-se de adicionar o CSS ao final de sua folha!

Para funcionar, desconsidere os códigos que o @MateusV. lhe passou.

o/

luan13.09 escreveu:Olá Luiz, o CSS gerou isso:


Se possível, gostaria que o nome "Emblemas" não aparecesse e que o bloco de apresentação dos emblemas ficasse centralizado e menor podendo suportar 9 emblemas (3x3) por cada página.

Atenciosamente,
Luan

Continua desta forma. Desconsiderei o código que o outro rapaz enviou, Luiz e segui todas as suas instruções, mesmo assim continua desta forma.

Aparentemente temos um problema:

Seu CSS está gerando caracteres inválidos, veja aqui.
Poderia nos enviar sua Folha de Estilos?

o/

Enviarei via MP. Só um instante...

Pensando bem, há um jeito mais fácil:

Crie um novo JS, com investimento nos tópicos com o código:

Código:

(function ($) {
  'use strict';

  var lzEmblemasConfig = [
    '.postprofile blockquote {',
    '  background-color: transparent!important;',
    '  border: solid 0px transparent!important;',
    '  margin-top: -20px!important;',
    '  border: solid 0px transparent!important;',
    '  color: #555!important;',
    '  background-color: transparent!important;',
    '  margin: -15px;',
    '  overflow: visible;',
    '}',
    '',
    '.postprofile blockquote > div {',
    '  margin: 10px;',
    '  display: block;',
    '  width: 100%!important;',
    '  margin-left: 18px!important;',
    '}',
    '',
    '.postprofile blockquote > div br {',
    '  display: none!important;',
    '  height: 0px;',
    '  position: absolute;',
    '  top: -99999px;',
    '  left: -9999px;',
    '}',
    '',
    '.postprofile blockquote > div img {',
    '  border: solid 1px #efefef;',
    '  background: #d8d8d8;',
    '  border-radius: 3px;',
    '  margin: 5px;',
    '  padding: 4px;',
    '  box-shadow: inset 0px 3px #cacaca;',
    '  float: left;',
    '}',
    '',
    '#profile11606 > dl > dd:nth-child(4) > span:nth-child(1) {',
    '  display: none!important;',
    '}',
  ].join('\n');

  $(function () {
    $('<style>', {
      type: 'text/css',
      text: lzEmblemasConfig
    }).appendTo('head');
  });
}(jQuery));

Ele irá poupar um pouco de espaço na sua CSS.

o/

Obrigado

De nada.

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".