Caixas personalizadas

3 participantes

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

Tópico resolvido Caixas personalizadas

Mensagem por Jhonny_. 05.09.18 22:20

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_.
Jhonny_.

Jhonny_.
***

Membro desde : 04/09/2018
Mensagens : 184
Pontos : 298

http://bplgames.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Caixas personalizadas

Mensagem por Fraise 05.09.18 22:28

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'
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. 06.09.18 1:10

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?
Jhonny_.

Jhonny_.
***

Membro desde : 04/09/2018
Mensagens : 184
Pontos : 298

http://bplgames.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Caixas personalizadas

Mensagem por Fraise 06.09.18 1:25

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:
Seta 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.

Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. 06.09.18 5:19

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

Att,
Jhonny_.
Jhonny_.

Jhonny_.
***

Membro desde : 04/09/2018
Mensagens : 184
Pontos : 298

http://bplgames.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Caixas personalizadas

Mensagem por tikky 06.09.18 8:34

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.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. 06.09.18 22:45

Funcionou perfeitamente pode fechar! Obrigado!

Att,
Jhonny_.
Jhonny_.

Jhonny_.
***

Membro desde : 04/09/2018
Mensagens : 184
Pontos : 298

http://bplgames.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Caixas personalizadas

Mensagem por Fraise 06.09.18 23:35

Tópico resolvido


Movido para "Questões resolvidas".
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

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