Detalhes da questão

Endereço do fórum: https://acciohogwarts.forumeiros.com/
Versão do fórum: phpBB3
Acesso ao fórum:

• Nome de usuário: Teste
  
• Palavra-passe: wing1234

Descrição

Oii de novo gente kkkkk entao, eu li esses dias o topico sobre as conquistas e amei e decidi por no meu RPG. Ele esta funcionando direito e se encaixou perfeitamente no perfil das mensagens, o unico problema é que a caixa que aparece quando passamos o mouse sobre a imagem da conquista, a fonte dentro esta da mesma cor do plano de fundo, impossibilitando os users de lerem os premios. Abaixo deixo duas imagens que exemplifica o problema.



Como pode ver quando abre a caixa nao dá para ler nada.



Mas o texto esta lá, porem com a mesma cor do fundo e eu nao acho no CSS nem no viwtopic_body, onde eu mudo a cor da fonte.

Quem puder dar aquele help, fico super agradecida. Vou deixar abaixo o meu css e cod do topic_body

CSS>>> https://pastebin.com/8DmbAdSt
VIEWTOPIC_BODY>>>> https://pastebin.com/utwbLfUc

Olá @leleca.greco,

Adicione no seu CSS:

Código:

.award_tooltiptext {
    visibility: collapse;
    pointer-events: none;
    font-weight: 400;
    line-height: 16px;
    position: absolute;
    width: 130px;
    top: 27px;
    left: 60px;
    transform: translateY(-50%);
    background-color: #333;
    color: var(--awards_color);
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    border: 2px solid var(--awards_color);
    z-index: 6;
    opacity: 0;
    word-break: break-word;
    white-space: normal;
    transition: opacity .4s;
}

Resultado:


Coordealmente,
Sleep

Obrigada resolveu!! Agora só ficou cortando um pouco no trofeu mais proximo do fim da tabilla, sabe resolver? Se nao, n tem problema ficar assim.



Ta vendo? A caixa é cortada

Olá,

Substitua por este:

Código:

.award_tooltiptext {
    visibility: collapse;
    pointer-events: none;
    font-weight: 400;
    line-height: 12px;
    position: absolute;
    width: 150px;
    left: 57px;
    top: 24px;
    transform: translateY(-50%);
    background-color: #333;
    color: #477082;
    text-transform: none;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    border: 2px solid var(--awards_color);
    z-index: 6;
    opacity: 0;
    word-break: break-word;
    white-space: normal;
    transition: opacity .4s;
}

E adicione este para resolver um erro que visualizei:

Código:

.award_tooltiptext::after {
    top: 50%;
    right: 100%;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent var(--awards_color) transparent transparent;
}

Resultado:

Peço desculpa,

Atenciosamente,
Sleep.

Resolveu, ficou perfeito!! Muito Obrigada Sleep, pode fechar o topico <3

De nada!

Tópico resolvido Movido para "Questões resolvidas".