Emblemas customizados no perfil

Detalhes da questão

Endereço do fórum: https://newpme.forumeiros.com/forum
Versão do fórum: ModernBB

Descrição

Olá novamente, eu queria colocar em meu fórum uma categoria no perfil para emblemas como no print: https://prnt.sc/sd556z

Olá @Dollyn,

1. Criação do campo

Entre no Painel de controle > Usuários e grupos > Usuários > Perfis, clique no e use as seguintes configurações:

• Tipo Zona de texto
  
• Nome (o que quiser)
  
• URL do ícone (se quiser)
  
• Obrigatório o preenchimento Não
  
• Visualização (onde quiser)
  
• Tipo de visualização Ícone
  
• Quem pode modificar o valor do seu conteúdo ? (o que quiser)
  
• Exibir este campo para os visitantes tendo ao menos o status (o que quiser)
  
• Separador Quebra de linha
  
  
• Conteúdo padrão
  

  Código:

  [table class="field_badge"][tr][td][/td][/tr][/table]

Após criar volte a editar o campo ( ) e clique em "Substituir conteúdo"!

Gestão do campo

O campo vai passar a ter o seguinte valor:

Código:

[table class="field_badge"][tr][td][/td][/tr][/table]

e para adicionar emblemas, basta adicionar a imagem dentro da tabela:

Código:

[table class="field_badge"][tr][td][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][/tr][/table]

Estilo

Na sua folha de estilo, adicione:

Código:

.field_badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}


.field_badge img {
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 35px !important;
    margin: auto 4px 4px auto;
    vertical-align: middle;
    width: 35px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.field_badge br { display: none!important; }


Atenciosamente,
pedxz.

Olá, deu certinho aqui, mas não poderia aparecer uma descrição ao deslizar o mouse na imagem como no print?

Edit: Eu tenho esse javascript, serve para algo? https://newpme.forumeiros.com/14706.js

Não iremos usar JavaScript. O campo agora terá uma nova "configuração", data-title="" onde é posto o título do emblema (não aconselhável com mais de 10 caracteres)

Código:

[table class="field_badge"][tr][td data-title="quack quack"][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][/tr][/table]

para adicionar um novo basta duplicar o td:

Código:

[code][table class="field_badge"][tr][td data-title="quack quack"][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][td data-title="patinhoooo"][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][/tr][/table][/code]

E mude o CSS de cima, para:

Código:

.field_badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%!important;
}

.field_badge td {
    position: relative;
    display: inline-flex;
}

.field_badge td > img {
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 35px !important;
    margin: auto 4px 4px auto;
    vertical-align: middle;
    width: 35px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.field_badge tbody > tr > td[data-title]:hover::before {
    content: attr(data-title);
    display: block!important;
    background: #47525D;
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    width: auto;
    z-index: 9999;
    font-size: 10px!important;
    color: #fff;
    pointer-events: none;
    bottom: 100%;
    left: 50%;
    margin-bottom: 10px;
    transform: translate(-50%, 4px);
    transform-origin: top;
    white-space: normal;
    transition: all 0.18s ease-out 0.18s; 
}

.field_badge br, .field_badge img img { display: none!important; }

Pode fechar, obrigado.