Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Colocar link do perfil no menu
Hoje à(s) 02:44 am por Flames

» Categoria do fórum
Hoje à(s) 12:06 am por PrisoN†BreaK

» Cor do fundos dos tópicos
Ontem à(s) 11:03 pm por [SRD]JimClark

» Caixa de resposta rápida nos tópicos
Ontem à(s) 09:53 pm por Harleen

» Remover "Não há mensagens"
Ontem à(s) 09:45 pm por Harleen

» Template quebra ao ser editado
Ontem à(s) 09:21 pm por Starset

» Aparecer pop-up de login ao clicar em Conectar-se
Ontem à(s) 07:39 pm por Flames

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
JulioPais
 
Shek
 
Flames
 
APOllO
 
Forumpw
 

Quem está conectado
195 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 193 Visitantes :: 2 Motores de busca

Flames, Luiz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Botões em .CSS

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

Resolvido Botões em .CSS

Mensagem por IsmaelS. em 30/03/17, 07:11 pm

Detalhes da questão


Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: phpBB2

Descrição


Olá!

Eu gostava de colocar os botões de (Novo Tópico, Responder, Bloqueado) em .CSS ou seja algo parecido com isto:


Última edição por IsmaelS. em 30/03/17, 08:03 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Botões em .CSS

Mensagem por Luiz em 30/03/17, 07:24 pm

Olá,

Crie um novo JavaScript com investimento em todas as páginas, contendo o código:
Código:
(function ($) {
  'use strict';

  var cssBtn = [
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_new_en.png',
      'template': '<span class="fa-btn">Novo Tópico</span>'
    }, // [!] Lembre-se de adicionar vírgula antes de iniciar outra array.
    {
      'imgSrc': 'URL_DA_IMAGEM',
      'template': 'TEMPLATE_EM_HTML'
    } // [!] ATENÇÃO! No último NÃO tem vírgula!
  ];

  $(function () {
    $.each(cssBtn, function (index, cssBtn) {
      $('img[src="' + cssBtn.imgSrc + '"]')
        .replaceWith(cssBtn.template)
      ;
    });
  });
 
}(jQuery));
No exemplo acima, eu setei uma array, que substitui os botões de "Novo Tópico".
Basta pegar a URL da imagem do botão, e criar uma nova array, como fiz no código acima.

Feito isso, dou uma sugestão de CSS (basta adicionar em sua Folha de Estilo):
Código:
span.fa-btn {
  background-color: #3091c1;
  color: #fff;
  transition: all 200ms ease-in-out;
  padding: 5px 9px;
  border-radius: 4px;
  border-bottom: solid 3px #2a79a0;
}

span.fa-btn:hover {
  background-color: #2a2c33;
  border-bottom-color: #202127;
}

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3554
Pontos Ativos : 4228

https://github.com/lffg/

Resolvido Re: Botões em .CSS

Mensagem por IsmaelS. em 30/03/17, 07:34 pm

Percebi e tentei colocar o Responder mas não aparece o efeito de .CSS:
Código:
(function ($) {
  'use strict';
 
  var cssBtn = [
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_new_en.png',
      'template': '<span class="fa-btn">Novo Tópico</span>'
    }, // [!] Lembre-se de adicionar vírgula antes de iniciar outra array.
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_reply_en.png',
      'template': '<span class="i_reply">Responder</span>'
    } // [!] ATENÇÃO! No último NÃO tem vírgula!
  ];
 
  $(function () {
    $.each(cssBtn, function (index, cssBtn) {
      $('img[src="' + cssBtn.imgSrc + '"]')
        .replaceWith(cssBtn.template)
      ;
    });
  });
 
}(jQuery));

Outra coisa o botão Bloqueado consegue depois deixar em vermelho em vez de azul?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Botões em .CSS

Mensagem por Luiz em 30/03/17, 07:44 pm

Mas é claro. Muito feliz
Troque o JavaScript por este:
Código:
(function ($) {
  'use strict';

  var cssBtn = [
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_new_en.png',
      'template': '<span class="fa-btn"><i class="fa fa-pencil-square-o"></i> Novo Tópico</span>'
    }, // [!] Lembre-se de adicionar vírgula antes de iniciar outra array.
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_locked_en.png',
      'template': '<span class="fa-btn fa-btnRed"><i class="fa fa-ban"></i> Bloqueado</span>'
    },
    {
      'imgSrc': 'https://illiweb.com/fa/prosilver/button_topic_reply_en.png',
      'template': '<span class="fa-btn"><i class="fa fa-pencil-square-o"></i> Responder</span>'
    }
  ];

  $(function () {
    $.each(cssBtn, function (index, cssBtn) {
      $('img[src="' + cssBtn.imgSrc + '"]')
        .replaceWith(cssBtn.template)
      ;
    });
  });
 
}(jQuery));

E troque o CSS que passei antes por:
Código:
span.fa-btn {
  background-color: #3091c1;
  color: #fff;
  transition: all 200ms ease-in-out;
  padding: 5px 9px;
  border-radius: 4px;
  border-bottom: solid 3px #2a79a0;
}

span.fa-btnRed {
  background-color: #da4d45;
  border-bottom-color: #a53933;
}
 
span.fa-btn:hover {
  background-color: #2a2c33;
  border-bottom-color: #202127;
}

Tchau

Spoiler:
Dei umas incrementadas no estilo dos botões usando Font-Awesome. Cool! Estilo cool
Caso o senhor não queira tais ícones, simplesmente, adicione à sua CSS:
Código:
.fa-btn .fa {display: none;}
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3554
Pontos Ativos : 4228

https://github.com/lffg/

Resolvido Re: Botões em .CSS

Mensagem por IsmaelS. em 30/03/17, 07:50 pm

Ficou melhor ainda com o font awsome obrigado! Só uma coisa tem algum código para dar espaço nos botões pois está muito em cima das barras:

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Botões em .CSS

Mensagem por Luiz em 30/03/17, 07:52 pm

Tente alterar o código que lhe passei acima por:
span.fa-btn {
background-color: #3091c1;
color: #fff;
transition: all 200ms ease-in-out;
padding: 5px 9px;
border-radius: 4px;
border-bottom: solid 3px #2a79a0;
display: inline-block;
margin-top: 15px;
}

span.fa-btnRed {
background-color: #da4d45;
border-bottom-color: #a53933;
}

span.fa-btn:hover {
background-color: #2a2c33;
border-bottom-color: #202127;
}

Altere o valor destacado à teu gosto.

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3554
Pontos Ativos : 4228

https://github.com/lffg/

Resolvido Re: Botões em .CSS

Mensagem por IsmaelS. em 30/03/17, 07:57 pm

Não tem esse trecho no código, fiz inspecionar elemento a classe era ".pun .paged-foot, .pun .paged-head" e tentei usar assim e agradou-me o efeito:
Código:
margin-top: 20px;
margin-bottom: 20px;

Adiciono assim na .CSS?:
Código:
.pun .paged-foot, .pun .paged-head{
margin-top: 20px;
margin-bottom: 20px;
}

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Botões em .CSS

Mensagem por Luiz em 30/03/17, 07:58 pm

Na verdade, é só trocar o código CSS que te passei nesta mensagem, por este:
-> http://ajuda.forumeiros.com/t108585-botoes-em-css#760797

E alterar o valor vermelho à teu gosto.

Tchau
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3554
Pontos Ativos : 4228

https://github.com/lffg/

Resolvido Re: Botões em .CSS

Mensagem por IsmaelS. em 30/03/17, 08:03 pm

Perfeito obrigado e resolvido!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Botões em .CSS

Mensagem por Luiz em 30/03/17, 08:05 pm

Sempre às ordens. Rose

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3554
Pontos Ativos : 4228

https://github.com/lffg/

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