Atalhos no topo da página Inicial

3 participantes

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

Tópico resolvido Atalhos no topo da página Inicial

Mensagem por República 22.06.20 21:56

Detalhes da questão


Endereço do fórum: https://cnage.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Boa tarde,
Gostaria de saber como faço para criar aqueles "atalhos" que são quadrados/retângulos coloridos que envolvem uma palavra e simbolo podendo ser linkados como atalhos, como aqui no próprio forumeiros possui:

inicial - Atalhos no topo da página Inicial Whatsa10


OBS: Os símbolos (fontawesome) já coloquei no meu fórum e estão funcionando, minha duvida é apenas saber como crio e coloco esses balões ou formatos coloridos exatamente neste espaço do fórum, também como fazer deles links/atalhos,
República

República
Novo Membro

Membro desde : 15/04/2020
Mensagens : 12
Pontos : 18

https://cnage.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por tikky 22.06.20 22:21

Olá @República,

Entre no Painel de controle > Visualização > Página inicial > Geral do "Conteúdo da mensagem" ("Mensagem na Página Inicial") use o seguinte código:
Código:
<div class="btn-qk">
  <a href="#">Botão 1</a>  <a href="#">Botão 2</a>  <a href="#">Botão 3</a>
</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>

Atenciosamente,
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: Atalhos no topo da página Inicial

Mensagem por República 22.06.20 22:32

Funcionou aqui, já estou editando, obrigado
Mas para criar nesse formato/modelo seria como?
inicial - Atalhos no topo da página Inicial Whatsa11


EDIT: Também não sei onde por o link nesses balões (url) , se puder me ajudar


Última edição por República em 22.06.20 22:39, editado 1 vez(es)
República

República
Novo Membro

Membro desde : 15/04/2020
Mensagens : 12
Pontos : 18

https://cnage.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por tikky 22.06.20 22:34

República escreveu:Funcionou aqui, já estou editando, obrigado
Mas para criar nesse formato/modelo seria como?
inicial - Atalhos no topo da página Inicial Whatsa11
O senhor vai querer semelhante a esse modelo sem o uso de texto?

Lembre-se de preencher o formulário corretamente a versão do seu fórum é #ModernBB não #phpBB3.
tikky

tikky
Admineiro
Admineiro

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por República 22.06.20 22:50

pedxz escreveu:
República escreveu:Funcionou aqui, já estou editando, obrigado
Mas para criar nesse formato/modelo seria como?
inicial - Atalhos no topo da página Inicial Whatsa11
O senhor vai querer semelhante a esse modelo sem o uso de texto?

Lembre-se de preencher o formulário corretamente a versão do seu fórum é #ModernBB não #phpBB3.

Desculpe vou corrigir a versão, é ModernBB

Então, esses icones eu usaria do Fontawesome, e se a pessoa passar o mouse emcima deles apareceria o nome ( exemplo: passa mouse emcima do atalho com um jornal, e aparece escrito "Noticias" )

E, também não consegui por o link nesses botoes (url) se puder me ajudar onde faço isso

Obrigado
República

República
Novo Membro

Membro desde : 15/04/2020
Mensagens : 12
Pontos : 18

https://cnage.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por tikky 23.06.20 18:45

Altere o seu código para:
Código:
<div class="btn-qk">
                       <a href="#"><em class="fa fa-cogs"></em> Configurações</a>  <a href="#"><em class="fa fa-archive"></em> Arquivo</a>  <a href="#"><em class="fa fa-users"></em> Membros</a>
</div><style>
.btn-qk {
  display: flex;
  flex-flow: row wrap;
}

.btn-qk a {
  background: #4A89DC;
  border-bottom: 2px solid #5D9CEC;
  border-radius: .2rem;
  padding: 5px;
  font-size: 0;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  color: white;
  text-align: center;
  transition: 0.3s;
}

.btn-qk [class^="fa fa-"],
.btn-qk a:hover {
  font-size: 12px;
  line-height: 20px;
}

.btn-qk a:hover {
  width: auto;
  background: #5D9CEC;
}

</style>

Localize:
Código:
<div class="btn-qk">
em baixo estará as hiperligações:
Código:
<a href="{AQUI FICA A URL}"><em class="fa fa-{NOME DO ÍCONE}"></em> {NOME DA HIPERLIGAÇÃO}</a>
tikky

tikky
Admineiro
Admineiro

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por República 23.06.20 23:58

Testei aqui e ficou muito bom e funcionando , só que ficou muito pequeno os quadrados e icones (muito mesmo), como faço para aumentar eles? tentei usar "fa-2x" etc para aumentar os ícones mas continuaram iguais
Mas gostei muito do resultado, apenas esse detalhe que gostaria de saber para aumentar eles

E, se caso eu quiser criar mais, seria só copiar essa parte mais vezes?
Código:
a href="{AQUI FICA A URL}"><em class="fa fa-{NOME DO ÍCONE}"></em> {NOME DA HIPERLIGAÇÃO}</a>

Uma ultima duvida também, se eu quiser mudar a cor de um quadrado especifico, fica em que parte do codigo? Se não for possível, não tem problema

Desde já agradeço muito
República

República
Novo Membro

Membro desde : 15/04/2020
Mensagens : 12
Pontos : 18

https://cnage.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por tikky 24.06.20 0:06

Localize do código:

  • Largura e altura
    Código:
    width: 20px;
      height: 20px;

  • Tamanho da letra
    Código:
    font-size: 12px;

  • Criar nova cor de fundo
    Código:
    <a class="btn-green" href="{AQUI FICA A URL}"><em class="fa fa-{NOME DO ÍCONE}"></em> {NOME DA HIPERLIGAÇÃO}</a>
    Adicionei uma class="btn-green" ao código, agora só existe a necessidade de adicionar dentro da tag <style> a classe:
    Código:
    .btn-green {
       background: green!important;
    }

  • Para criar mais sim, basta duplicar esse código!
tikky

tikky
Admineiro
Admineiro

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por República 24.06.20 15:26

Muito obrigado! Me ajudou muito pedxz
Pode fechar o topico, agradeço pela ajuda
República

República
Novo Membro

Membro desde : 15/04/2020
Mensagens : 12
Pontos : 18

https://cnage.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Atalhos no topo da página Inicial

Mensagem por Chanp 24.06.20 15:48

Tópico resolvido


Movido para "Questões resolvidas".
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

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