Emblemas customizados no perfil
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
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
Re: Emblemas customizados no perfil
Olá @Dollyn,
Após criar volte a editar o campo ( ) e clique em "Substituir conteúdo"!
Atenciosamente,
pedxz.
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]
- 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)
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209
Re: Emblemas customizados no perfil
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
Edit: Eu tenho esse javascript, serve para algo? https://newpme.forumeiros.com/14706.js
Re: Emblemas customizados no perfil
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)
E mude o CSS de cima, para:
- 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]
- 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; }
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209
Re: Emblemas customizados no perfil
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209
Tópicos semelhantes
» Perfil de emblemas
» Emblemas para o perfil
» Emblemas em mensagens/perfil.
» Emblemas no perfil tópico.
» Emblemas no perfil para AwesomeBB
» Emblemas para o perfil
» Emblemas em mensagens/perfil.
» Emblemas no perfil tópico.
» Emblemas no perfil para AwesomeBB
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos