Caixas personalizadas

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

Atendido / Resolvido Caixas personalizadas

Mensagem por Jhonny_. em 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_.
Nível 9

Masculino
Inscrito dia : 04/09/2018
Mensagens : 156
Pontos Ativos : 252

Ver perfil do usuário http://bplgames.forumeiros.com/

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 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'


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Fraise — Admineiro
Fraise

Fraise
Admineiro
Admineiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 6254
Pontos Ativos : 7727

Ver perfil do usuário https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. em 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_.
Nível 9

Masculino
Inscrito dia : 04/09/2018
Mensagens : 156
Pontos Ativos : 252

Ver perfil do usuário http://bplgames.forumeiros.com/

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 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.



Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Fraise — Admineiro
Fraise

Fraise
Admineiro
Admineiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 6254
Pontos Ativos : 7727

Ver perfil do usuário https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. em 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_.
Nível 9

Masculino
Inscrito dia : 04/09/2018
Mensagens : 156
Pontos Ativos : 252

Ver perfil do usuário http://bplgames.forumeiros.com/

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Pedxz em 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.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2741
Pontos Ativos : 3462

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. em 06.09.18 22:45

Funcionou perfeitamente pode fechar! Obrigado!

Att,
Jhonny_.
Jhonny_.

Jhonny_.
Nível 9

Masculino
Inscrito dia : 04/09/2018
Mensagens : 156
Pontos Ativos : 252

Ver perfil do usuário http://bplgames.forumeiros.com/

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 06.09.18 23:35

Tópico resolvido


Movido para "Questões resolvidas".


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Fraise — Admineiro
Fraise

Fraise
Admineiro
Admineiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 6254
Pontos Ativos : 7727

Ver perfil do usuário https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum