Caixas personalizadas

Detalhes da questão

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

Descrição

Quero saber como aplico isto no início do meu fórum e como modifica-lo:
https://imgur.com/a/99UO0JE

Att,
Jhonny_.

Olá @Jhonny_.,

Onde deseja adicionar?
No mais, cá está o código:

Código:

<style>
.cards .card {
    color: #fff;
    float: left;
    font-size: 22px;
    margin-top: 10px;
    padding: 20px 30px;
    width: 31%;
}
.cards .card.red-card {
    background-color: #E54732;
    border-bottom: 3px solid #C62F1A;
    margin-left: 1.5%;
    text-shadow: 0 0 1px #C62F1A;
    width: 32%;
}
.cards .fa {
    font-size: 37px;
    margin-right: 15px;
   vertical-align: middle;
}
.fa-bullhorn:before {
    content: "\f0a1";
}
.cards a { text-decoration: none!important; }
</style>
<div class="cards">
<a href="/f1-anuncios-e-atualizacoes" class="card red-card"> <em class="fa fa-bullhorn"></em> Novidades </a>
</div>

Até mais,
Fraise.

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

Eu quero tirar esse anúncio e colocar três caixas personalizadas no lugar deste anúncio:
https://imgur.com/a/uhKrL7w

E como eu faço pra mudar a escrita que está na caixa?

Olá novamente!

Não é possível remover as publicidades gratuitamente, você deverá pagar com créditos para remover a publicidade do fórum. Para mais informações acerca da remoção de publicidades, solicito que crie um novo tópico pois este tem como finalidade as caixas personalizadas que pediu.

Primeiramente, irei precisar que instale a FontAwesome em seu fórum seguindo este tópico:
https://ajuda.forumeiros.com/t103208-

Em seguida, aceda a Painel de Controle > Visualização > Página inicial > Configuração e cole o seguinte código na mensagem da página inicial:

Código:

<style>
.cards .fa {
    font-size: 37px;
    margin-right: 15px;
   vertical-align: middle;
}
.fa-life-ring:before {
    content: "\f1cd";
}
.fa-bullhorn:before {
    content: "\f0a1";
}
.fa-cubes:before {
    content: "\f1b3";
}
.cards .card {
    color: #fff;
    float: left;
    font-size: 22px;
    margin-top: 10px;
    padding: 20px 30px;
    width: 31%;
    text-decoration: none;
}
.cards .card.green-card {
    background-color: #71be47;
    border-bottom: 3px solid #60a53a;
    margin-left: 1.5%;
    text-shadow: 0 0 1px #60a53a;
    width: 32.5%;
}
.cards .card.yellow-card {
    background-color: #e6ad1d;
    border-bottom: 3px solid #c79616;
    margin-right: 1.5%;
    text-shadow: 0 0 1px #c79616;
}
.cards .card.red-card {
    background-color: #E54732;
    border-bottom: 3px solid #C62F1A;
    margin-left: 1.5%;
    text-shadow: 0 0 1px #C62F1A;
    width: 32%;
}

</style>
<div class="cards">
  <a href="/c2-atendimento" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Suporte </a><a href="/f1-anuncios-e-atualizacoes" class="card red-card"> <em class="fa fa-bullhorn"></em> Novidades </a> <a href="/c5-servicos" class="card green-card"> <em class="fa fa-cubes"></em> Serviços </a>       
</div>

Para editar o código, é simples. Por exemplo, se quiser substituir "Suporte" por "Ajuda", é só localizar no código "Suporte", e substituir o texto por "Ajuda". Por exemplo:

Código:

<a href="/c2-atendimento" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Suporte </a>

Código:

<a href="/c2-atendimento" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Ajuda </a>

Para editar o link também é simples, é somente substituir o que está dentro das aspas em <a href="link">, por exemplo:

Código:

<a href="/c2-atendimento" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Suporte </a>

Código:

<a href="google.com" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Suporte </a>

Até mais,
Fraise.

Consegui colocar só que uma ficou em baixo queria as 3 na horizontal.
Olha como ficou:
https://imgur.com/a/EhMCFdX

Att,
Jhonny_.

Olá @Jhonny_.,
Mude o código passado pelo meu colega Chefe Fraise para:

Código:

<style>
.cards .fa {
    font-size: 37px;
    margin-right: 15px;
  vertical-align: middle;
}
.fa-life-ring:before {
    content: "\f1cd";
}
.fa-bullhorn:before {
    content: "\f0a1";
}
.fa-cubes:before {
    content: "\f1b3";
}
.cards .card {
    color: #fff;
    float: left;
    font-size: 22px;
    margin-top: 10px;
    padding: 20px 30px;
    width: 30%;
    text-decoration: none;
}
.cards .card.green-card {
    background-color: #71be47;
    border-bottom: 3px solid #60a53a;
    margin-left: 1.5%;
    text-shadow: 0 0 1px #60a53a;
    width: 20%;
}
.cards .card.yellow-card {
    background-color: #e6ad1d;
    border-bottom: 3px solid #c79616;
    margin-right: 1.5%;
    width: 20%;
    text-shadow: 0 0 1px #c79616;
}
.cards .card.red-card {
    background-color: #E54732;
    border-bottom: 3px solid #C62F1A;
    margin-left: 1.5%;
    text-shadow: 0 0 1px #C62F1A;
    width: 30%;
}
 
</style>
<div class="cards">
         <a href="/c2-atendimento" class="card yellow-card"> <em class="fa fa-life-ring"> </em> Suporte </a><a href="/f1-anuncios-e-atualizacoes" class="card red-card"> <em class="fa fa-bullhorn"></em> Novidades </a> <a href="/c5-servicos" class="card green-card"> <em class="fa fa-cubes"></em> Serviços </a>     
</div>


Cordialmente,
pedxz.

Funcionou perfeitamente pode fechar! Obrigado!

Att,
Jhonny_.