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:

PHPBB3 - 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
Nível 2

Masculino
Inscrito dia : 15/04/2020
Mensagens : 12
Pontos ativos : 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 pedxz 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.


Boas-vindas 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 editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

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?
PHPBB3 - 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
Nível 2

Masculino
Inscrito dia : 15/04/2020
Mensagens : 12
Pontos ativos : 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 pedxz 22.06.20 22:34

@República escreveu:Funcionou aqui, já estou editando, obrigado
Mas para criar nesse formato/modelo seria como?
PHPBB3 - 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.


Boas-vindas 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 editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

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?
PHPBB3 - 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
Nível 2

Masculino
Inscrito dia : 15/04/2020
Mensagens : 12
Pontos ativos : 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 pedxz 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>


Boas-vindas 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 editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

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
Nível 2

Masculino
Inscrito dia : 15/04/2020
Mensagens : 12
Pontos ativos : 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 pedxz 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!


Boas-vindas 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 editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6485
Pontos ativos : 7649

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
Nível 2

Masculino
Inscrito dia : 15/04/2020
Mensagens : 12
Pontos ativos : 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
Membro do fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos ativos : 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


Permissões neste fórum
Você não pode responder aos tópicos