Atalhos na página principal

4 participantes

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

Tópico resolvido Atalhos na página principal

Mensagem por PauloVinicios1755 18.03.22 21:30

Detalhes da questão


Endereço do fórum: https://brasilplaycloud.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Detalhes da questão


Endereço do fórum: https://brasilplaycloud.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Primeiramente peço perdão pelo titulo não sei como se chama isso,
queria saber como faço isso no meu fórum, claro não quero fazer identico quero pegar essa base
https://imgur.com/SQKiRT6
onde eu vi https://redeparadox.forumeiros.com/
PauloVinicios1755

PauloVinicios1755
Nível 9

Masculino
Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por Harleen 22.03.22 14:00

Bom dia, use o código passado pelo pedxz nesse tópico.
Seta Atalhos na página inicial
Harleen

Harleen
Membro do fórum

Feminino
Membro desde : 09/07/2012
Mensagens : 1777
Pontos : 2371

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por PauloVinicios1755 22.03.22 14:20

Certo eu já fiz, mas tenho uma dúvida!
Como faço para colocar um icone dentro dessa caixa?
e como faço pra colocar uma imagem de lado igual ao print?
PauloVinicios1755

PauloVinicios1755
Nível 9

Masculino
Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por Harleen 22.03.22 14:55

Troque o código por esse
Código:
<div class="btn-qk">
    <a href="https://brasilplaycloud.forumeiros.com/f9-regras-do-servidor">
        <em class="fa fa-cogs fa-lg" aria-hidden="true"></em>
        <span style="font-family: Verdana;font-size: 18px;">Regras</span></a>
    <br />
    <a href="#"><em class="fa fa-archive fa-lg" aria-hidden="true"></em>
        <span style="font-family: Verdana; font-size: 18px;"> Noticias e Informações</span></a>
    <a href="https://brasilplaycloud.forumeiros.com/f1-atualizacoes"><em class="fa fa-users fa-lg" aria-hidden="true"></em>
        <span style="font-family: Verdana; font-size: 18px;"> Atualizações</span></a>
    <br />

</div>

Resultado
Atalhos na página principal  6vYH1Jv

Para trocar os ícones (e os tamanhos) procure nessa parte
fa fa-cogs fa-lg

Seta Font Awesome Size Icons
Harleen

Harleen
Membro do fórum

Feminino
Membro desde : 09/07/2012
Mensagens : 1777
Pontos : 2371

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por PauloVinicios1755 22.03.22 15:07

funfou mais ficou assim:https://imgur.com/zWHb7sX

Outra coisa, queria os botões todos na cor azul tipo do banner do meu fórum, e diminuir um pouco os botões

codigo:
Código:
<div class="btn-qk">
       <a href="https://brasilplaycloud.forumeiros.com/f9-regras-do-servidor">        <em aria-hidden="true" class="fa fa-cogs fa-lg"></em>        <span style="font-family: Verdana;font-size: 18px;">Regras</span></a>    <br />    <a href="#"><em aria-hidden="true" class="fa fa-archive fa-lg"></em>        <span style="font-family: Verdana; font-size: 18px;"> Noticias e Informações</span></a>    <a href="https://brasilplaycloud.forumeiros.com/f1-atualizacoes"><em aria-hidden="true" class="fa fa-users fa-lg"></em>        <span style="font-family: Verdana; font-size: 18px;"> Atualizações</span></a>    <br />
</div>
<div style="text-align: center;">
                 <span style="font-size: 18px;"> Fique por dentro de nosso servidor pelo fórum, aqui é onde se concentra boa parte dos nossos players fora do jogo. Pelo fórum, você poderá interagir com todos os membros e participar de debates, votações, tópicos importantes feitos pela nossa administração. É importante, você, player, ficar atento as nossas regras e os anúncios que são feitos pelos administradores. Não sabe a onde encontrar estes tópicos? Veja abaixo alguns links de áreas importantes em nosso fórum.</span>
</div>
<div class="btn-qk">
       <a href="https://brasilplaycloud.forumeiros.com/f9-regras-do-servidor"><span style="font-family: Verdana; font-size: 18px;">Regras</span></a><br />  <a href="#"><span style="font-family: Verdana; font-size: 18px;">Noticias e Informações</span></a>  <a href="https://brasilplaycloud.forumeiros.com/f1-atualizacoes"><span style="font-family: Verdana; font-size: 18px;">Atualizações</span></a><br />
</div><style>
  .btn-qk {
  margin: 10px auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 90%;
  }
  .btn-qk  a {
  background: #F6BA59;
  padding: 1em;
  font-size: .9em;
  margin: .3em;
  color: white!important;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  }
  .btn-qk a:hover,
  .btn-qk a:focus {
  background: #FFCD69;
  }
  .btn-qk a:nth-child(2) {
  background: #DA4453;
  }
  .btn-qk a:nth-child(2):hover,
  .btn-qk a:nth-child(2):focus {
  background: #ED5565;
  }
  .btn-qk a:nth-child(3) {
  background: #8BC163;
  }
  .btn-qk a:nth-child(3):hover,
  .btn-qk a:nth-child(3):focus {
  background: #9FD477;
  }
</style>
PauloVinicios1755

PauloVinicios1755
Nível 9

Masculino
Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por Harleen 22.03.22 16:44

PauloVinicios1755 escreveu:funfou mais ficou assim:https://imgur.com/zWHb7sX

Outra coisa, queria os botões todos na cor azul tipo do banner do meu fórum, e diminuir um pouco os botões


É só trocar por esse código
Código:
<div style="text-align: center;">
                 <span style="font-size: 18px;"> Fique por dentro de nosso servidor pelo fórum, aqui é onde se concentra boa parte dos nossos players fora do jogo. Pelo fórum, você poderá interagir com todos os membros e participar de debates, votações, tópicos importantes feitos pela nossa administração. É importante, você, player, ficar atento as nossas regras e os anúncios que são feitos pelos administradores. Não sabe a onde encontrar estes tópicos? Veja abaixo alguns links de áreas importantes em nosso fórum.</span>
</div>
<div class="btn-qk">
    <a href="https://brasilplaycloud.forumeiros.com/f9-regras-do-servidor">
        <em class="fa fa-cogs" aria-hidden="true"></em>
        <span style="font-family: Verdana;font-size: 18px;">Regras</span></a>
    <br />
    <a href="#"><em class="fa fa-archive" aria-hidden="true"></em>
        <span style="font-family: Verdana; font-size: 18px;"> Noticias e Informações</span></a>
    <a href="https://brasilplaycloud.forumeiros.com/f1-atualizacoes"><em class="fa fa-users" aria-hidden="true"></em>
        <span style="font-family: Verdana; font-size: 18px;"> Atualizações</span></a>
    <br />
 </div>

<style>
 .btn-qk {
  margin: 10px auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 90%;
  }
  .btn-qk a {
  background: #F6BA59;
  padding: 1em;
  font-size: .9em;
  margin: .3em;
  color: white !important;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  }
  .btn-qk a:hover,.btn-qk a:focus {
  background: #FFCD69;
  }
  .btn-qk a:nth-child(2) {
  background: #DA4453;
  }
  .btn-qk a:nth-child(2):hover,
  .btn-qk a:nth-child(2):focus {
  background: #ED5565;
  }
  .btn-qk a:nth-child(3) {
  background: #8BC163;
  }
  .btn-qk a:nth-child(3):hover,
  .btn-qk a:nth-child(3):focus {
  background: #9FD477;
  }
.btn-qk [class^="fa fa-"] {
  color: #3284D6;
}
</style>

Quanto a cor dos botões, é só alterar esse código.
Código:
.btn-qk [class^="fa fa-"] {
  color: #3284D6;
}

Harleen escreveu: Tamanho dos ícones

Seta Font Awesome Size Icons
Harleen

Harleen
Membro do fórum

Feminino
Membro desde : 09/07/2012
Mensagens : 1777
Pontos : 2371

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por PauloVinicios1755 22.03.22 23:01

não amigo desculpa foi falta de atenção minha. eu quero deixar o icone e o texto branco, e os 3 botão azul
PauloVinicios1755

PauloVinicios1755
Nível 9

Masculino
Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por Harleen 23.03.22 12:40

Troque o CSS dentro do style, por esse
Código:
<style>
  .btn-qk {
  margin: 10px auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 90%;
  }
  .btn-qk a {
  background: #2a81e7;
  padding: 1em;
  font-size: .9em;
  margin: .3em;
  color: white !important;
  text-decoration: none;
  flex-grow: 1;
  text-align: center;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  }
  .btn-qk a:hover,.btn-qk a:focus {
  background: #69a5ff;
  }
  .btn-qk a:nth-child(2) {
  background: #DA4453;
  }
  .btn-qk a:nth-child(2):hover,
  .btn-qk a:nth-child(2):focus {
  background: #ED5565;
  }
  .btn-qk a:nth-child(3) {
  background: #2077dd;
  }
  .btn-qk a:nth-child(3):hover,
  .btn-qk a:nth-child(3):focus {
  background: #69a5ff;
  }
</style>

Resultado
Atalhos na página principal  ABYwkoK
Harleen

Harleen
Membro do fórum

Feminino
Membro desde : 09/07/2012
Mensagens : 1777
Pontos : 2371

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por PauloVinicios1755 24.03.22 23:49

perfeito, Agora como coloco uma imagem ao lado do texto e ao lado dos botões lado esquerdo
PauloVinicios1755

PauloVinicios1755
Nível 9

Masculino
Membro desde : 04/04/2021
Mensagens : 237
Pontos : 345

https://brasilplayobscure.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos na página principal

Mensagem por Mpezin 28.03.22 20:34

As imagens referidas pelo senhor são os ícones atrás dos textos nos botões?
Mpezin

Mpezin
Nível 9

Masculino
Membro desde : 28/05/2020
Mensagens : 184
Pontos : 173

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Atalhos na página principal

Mensagem por pedxz 02.04.22 17:17

Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
pedxz

pedxz
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7144
Pontos : 8375

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