Adicionar descrição em imagens no BBCode

4 participantes

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

Tópico 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
Membro desde : 11/02/2021
Mensagens : 6
Pontos ativos : 9

http://forumeib.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Musashi 01.03.21 1:18

Olá, @Conta Fundadora

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

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico 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
Membro desde : 11/02/2021
Mensagens : 6
Pontos ativos : 9

http://forumeib.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico 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.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7071
Pontos ativos : 8300

Ir para o topo Ir para baixo

Tópico 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
Membro desde : 11/02/2021
Mensagens : 6
Pontos ativos : 9

http://forumeib.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Musashi 01.03.21 13:13

Olá, @Conta Fundadora

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

Atenciosamente, Wusthy Muito feliz
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico 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
Membro desde : 11/02/2021
Mensagens : 6
Pontos ativos : 9

http://forumeib.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar descrição em imagens no BBCode

Mensagem por Musashi 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
Musashi

Musashi
Membro avançado

Masculino
Membro desde : 17/02/2021
Mensagens : 401
Pontos ativos : 480

https://lucasthemes.forumeiros.com/

Ir para o topo Ir para baixo

Ex-Admineiro

Tópico 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.
RafaelS.

RafaelS.
Ex-Admineiro
Ex-Admineiro

Masculino
Membro desde : 26/04/2014
Mensagens : 5748
Pontos ativos : 7155

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos