Adicionar descrição em imagens no BBCode

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

Atendido / Resolvido Adicionar descrição em imagens no BBCode

Mensagem por Conta Fundadora 28.02.21 18:38

Detalhes da questão


Endereço do fórum: http://forumeib.forumeiros.com
Versão do fórum: phpBB3

Descrição


Adicionar descrição em imagens no BBCode Ttt10

Conforme mostrado na imagem acima, aqui mesmo neste fórum, ao passar o mouse sobre o emblema no perfil de um usuário, é exibida uma caixa de texto com a descrição da imagem.
Eu tento colocar no meu fórum com [img titlte="descrição"] mas não funciona. Também já tentei com <img alt="descrição"> e não funciona, o fórum não lê códigos HTML mesmo estando liberado no painel.

Poderia me ajudar?
Conta Fundadora

Conta Fundadora
Nível 2

Masculino
Inscrito dia : 11/02/2021
Mensagens : 5
Pontos Ativos : 11

http://forumeib.forumeiros.com

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Wusthy 01.03.21 1:18

Olá, @Conta Fundadora

Tente o seguinte modelo:
Código:
<img src="IMAGEM" alt="NOME" title="NOME">
Wusthy

Wusthy
Nível 7

Masculino
Inscrito dia : 17/02/2021
Mensagens : 82
Pontos Ativos : 118

https://policianula.forumeiros.com/

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Conta Fundadora 01.03.21 1:35

O problema que na parte de adicionar emblemas ao perfil, não aceita código HTML. Apesar que nem mesmo nos tópicos não funciona não sei se precisa adicionar algo nos modulos.
Conta Fundadora

Conta Fundadora
Nível 2

Masculino
Inscrito dia : 11/02/2021
Mensagens : 5
Pontos Ativos : 11

http://forumeib.forumeiros.com

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por pedxz 01.03.21 8:10

Olá  @Conta Fundadora,

Conforme mostrado na imagem acima, aqui mesmo neste fórum, ao passar o mouse sobre o emblema no perfil de um usuário
A sua captura de ecrã (printscreen) mostra um rank, não um campo de perfil. Para fazer o que o senhor deseja, leia:


(Qualquer dúvida diga)
Atenciosamente,
pedxz.


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 : 5976
Pontos Ativos : 7112

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Conta Fundadora 01.03.21 10:39

Oi pedxz, primeiro muito obrigado, depois de ler vários desses tópicos já criados, consegui.

Só fiquei com um pequeno problema. A imagem do emblema dentro da "caixa" está muito fosca, embaçada. O valor padrão do css que tinha era 35x35 (muito pequeno) e então fui tentando adaptar... 45x45  50x50... mas nada faz com que eu consiga deixar a imagem padrão.

Veja o que quero dizer
Como está: Adicionar descrição em imagens no BBCode Downlo10
É que na verdade, temos um pequeno problema. A imagem 1 (STAFF) tem o tamanho 31x31. Já a imagem 2 (exército) tem tamanho 40x40, que é o padrão atual.

Imagem Original: Adicionar descrição em imagens no BBCode ADM Adicionar descrição em imagens no BBCode BR809

O código CSS que está no meu fórum é esse:

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: 45px !important;
    margin: auto 5px 5px auto;
    vertical-align: middle;
    width: 45px !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: 999;
    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; }


Por favor me corrija se tiver algo errado.
Conta Fundadora

Conta Fundadora
Nível 2

Masculino
Inscrito dia : 11/02/2021
Mensagens : 5
Pontos Ativos : 11

http://forumeib.forumeiros.com

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Wusthy 01.03.21 13:13

Olá, @Conta Fundadora

Poderia me fornecer uma conta teste, para uma melhor verificação?

Atenciosamente, Wusthy Muito feliz
Wusthy

Wusthy
Nível 7

Masculino
Inscrito dia : 17/02/2021
Mensagens : 82
Pontos Ativos : 118

https://policianula.forumeiros.com/

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Conta Fundadora 01.03.21 13:39

@pedxz Eu também queria aproveitar para perguntar se tem como colocar um limite por exemplo de 12 ou 15 emblemas apenas. E umas setas como "mostrar mais" ou "mostrar todos". Pois se a mesma pessoa tiver 50, 100 emblemas vai ficar enorme no Perfil.
Conta Fundadora

Conta Fundadora
Nível 2

Masculino
Inscrito dia : 11/02/2021
Mensagens : 5
Pontos Ativos : 11

http://forumeib.forumeiros.com

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Wusthy 01.03.21 18:01

Olá  @Conta Fundadora

Modifique o seu CSS para o seguinte:

Código:
.field_badge {
  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: 2px;
    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: 45px !important;
    margin: auto 5px 5px auto;
    vertical-align: middle;
    -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: 999;
    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; }

Atenciosamente, Wusthy Muito feliz
Wusthy

Wusthy
Nível 7

Masculino
Inscrito dia : 17/02/2021
Mensagens : 82
Pontos Ativos : 118

https://policianula.forumeiros.com/

Atendido / Resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por RafaelS. 09.03.21 12:47

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.


Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Admineiros Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Admineiros Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Admineiros Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"O importante não é vencer todos os dias, mas lutar sempre."
Adicionar descrição em imagens no BBCode 1163
RafaelS.

RafaelS.
Admineiro
Admineiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 5747
Pontos Ativos : 7274

http://techmais.forumeiros.com/

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