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, 06:20 pm

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

Jhonny_.
Nível 6

Masculino
Inscrito dia : 04/09/2018
Mensagens : 67
Pontos Ativos : 113

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 05/09/18, 06:28 pm

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 — Moderadeiro
avatar

Fraise
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5962
Pontos Ativos : 7533

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. em 05/09/18, 09:10 pm

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?
avatar

Jhonny_.
Nível 6

Masculino
Inscrito dia : 04/09/2018
Mensagens : 67
Pontos Ativos : 113

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 05/09/18, 09:25 pm

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 — Moderadeiro
avatar

Fraise
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5962
Pontos Ativos : 7533

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, 01:19 am

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

Att,
Jhonny_.
avatar

Jhonny_.
Nível 6

Masculino
Inscrito dia : 04/09/2018
Mensagens : 67
Pontos Ativos : 113

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Pedxz em 06/09/18, 04:34 am

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.


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário  2007 Forumeiros

avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1784
Pontos Ativos : 2299

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Jhonny_. em 06/09/18, 06:45 pm

Funcionou perfeitamente pode fechar! Obrigado!

Att,
Jhonny_.
avatar

Jhonny_.
Nível 6

Masculino
Inscrito dia : 04/09/2018
Mensagens : 67
Pontos Ativos : 113

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

Atendido / Resolvido Re: Caixas personalizadas

Mensagem por Fraise em 06/09/18, 07:35 pm

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 — Moderadeiro
avatar

Fraise
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5962
Pontos Ativos : 7533

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