Grupos com Imagens

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.

   

Como é:


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


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!

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.

Cumprimentos,
Fraise.

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

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

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

Muito obrigado @Fraise.