Emblemas customizados no perfil

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Emblemas customizados no perfil

Mensagem por Dollyn 08.05.20 12:36

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
Dollyn

Dollyn
Nível 2

Masculino
Inscrito dia : 04/05/2020
Mensagens : 8
Pontos Ativos : 12

https://www.newpme.forumeiros.com/

Atendido / Resolvido Re: Emblemas customizados no perfil

Mensagem por pedxz 08.05.20 13:22

Olá @Dollyn,

1. Criação do campo

Entre no Painel de controle > Usuários e grupos > Usuários > Perfis, clique no Adicionar 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 ( Editar ) 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.


Última edição por Pedxz em 08.05.20 13:48, editado 1 vez(es)


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937

Atendido / Resolvido Re: Emblemas customizados no perfil

Mensagem por Dollyn 08.05.20 13:31

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
Dollyn

Dollyn
Nível 2

Masculino
Inscrito dia : 04/05/2020
Mensagens : 8
Pontos Ativos : 12

https://www.newpme.forumeiros.com/

Atendido / Resolvido Re: Emblemas customizados no perfil

Mensagem por pedxz 08.05.20 14:44

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; }


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937

Atendido / Resolvido Re: Emblemas customizados no perfil

Mensagem por Dollyn 08.05.20 15:21

Pode fechar, obrigado.
Dollyn

Dollyn
Nível 2

Masculino
Inscrito dia : 04/05/2020
Mensagens : 8
Pontos Ativos : 12

https://www.newpme.forumeiros.com/

Atendido / Resolvido Re: Emblemas customizados no perfil

Mensagem por pedxz 08.05.20 15:23

Tópico resolvido


Movido para "Questões resolvidas".


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum