Grupos com Imagens

3 participantes

Ir para baixo

Tópico resolvido Grupos com Imagens

Mensagem por Master Yip 02.04.23 22:28

Detalhes da questão


Endereço do fórum: https://kaizoku-history.forumeiros.com
Versão do fórum: ModernBB

Descrição


Saudações, amigos!

Depois de inúmeras tentativas falhas em inserir imagens no lugar das legendas dos grupos no meu fórum, trocando tanto o CSS (background) para uma imagem, ou apenas a legenda no index body para um <img src=""> cheguei a fácil conclusão de que Não Consigo né Moisés.

Em resumo, gostaria de trocar essa lista de grupos do CSS disponibilizado abaixo para uma lista de pelo menos 8 quadrados com imagens dos grupos, sendo que a maioria ficaria em branco para possíveis adições no futuro.

Para facilitar a vida de meu salvador, deixarei tudo abaixo, incluindo imagens para testes.

Grupos com Imagens 4Jp6rY8 Grupos com Imagens QQi0Wxm  Grupos com Imagens KhzpaDU  Grupos com Imagens 22EDN81

Como é:
Grupos com Imagens Image

Como gostaria que fosse: ilustrado com todas as minhas habilidades em paint
Grupos com Imagens Image

CSS:
Código:
/* Grupos  */
.qeel_groupes a {
        color: #ffffff;
        display: block;
        font-weight: 700;
        margin: .8rem 0;
        padding: .5rem 0;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
        border-radius: 5px;
}

.qeel_groupes a:hover {
       color: #FFFFFF !important;
}

a#q_basic {background: #000000;}
a#q_magic {background: #ad3737;}
a#q_wizard {background: #3e3b96;}

index_body:
Código:
<div class="qeel_bloc">
                     <div class="qeel_dernier">
                             {NEWEST_USER}
                     </div>
                  
                     <div class="qeel_groupes">
                             <a href="g2-narradores" id="q_basic">
                                     Narradores
                             </a>
                          
                             <a href="g3-pirata" id="q_magic">
                                     Piratas
                             </a>
                          
                             <a href="g4-marinha" id="q_wizard">
                                     Marinheiros
                             </a>
                     </div>
             </div>

Se necessário posso encaminhar ambos os códigos por completo!
Master Yip
Master Yip
Novo Membro

Membro desde : 15/01/2017
Mensagens : 25
Pontos : 48

https://kaizoku-history.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Grupos com Imagens

Mensagem por Fraise 07.04.23 10:52

Olá @Master Yip!

Acrescente este código a seu CSS já existente:
Código:
a#q_grupo1 {
  background-image: url(https://i.imgur.com/4Jp6rY8.png);
  text-indent: -9999em;
  display: inline-block;
  width: 75px;
  height: 75px;
}
a#q_grupo2 {
  background-image: url(https://i.imgur.com/qQi0Wxm.png);
  text-indent: -9999em;
  display: inline-block;
  width: 75px;
  height: 75px;
}
a#q_grupo3 {
  background-image: url(https://i.imgur.com/khzpaDU.png);
  text-indent: -9999em;
  display: inline-block;
  width: 75px;
  height: 75px;
}

E troque o seu código HTML por:
Código:
<div class="qeel_bloc">
    <div class="qeel_dernier">
        {NEWEST_USER}
    </div>
    <div class="qeel_groupes">
        <a href="g2-narradores" id="q_grupo1">
            Narradores
        </a>
        <a href="g3-pirata" id="q_grupo2">
            Piratas
        </a>
        <a href="g4-marinha" id="q_grupo3">
            Marinheiros
        </a>
    </div>
</div>

Creio que a partir deste modelo você já consegue fazer os restantes grupos. Feliz

Cumprimentos,
Fraise.
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Grupos com Imagens

Mensagem por Master Yip 08.04.23 12:49

Consegui sim! Ficou perfeito! Muitisisissi-simo obrigado!!!

A partir daqui consigo customizar o resto sim, muito obrigado mestre Jedi @Fraise .

Grupos com Imagens Image
Master Yip
Master Yip
Novo Membro

Membro desde : 15/01/2017
Mensagens : 25
Pontos : 48

https://kaizoku-history.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Grupos com Imagens

Mensagem por Sleep 08.04.23 13:37

Tópico resolvido


Movido para "Questões resolvidas".

Muito obrigado @Fraise. Eu amo você
Sleep
Sleep
Ajudeiro
Ajudeiro

Membro desde : 10/08/2012
Mensagens : 1117
Pontos : 1352

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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