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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» PAGINA HTML
Hoje à(s) 12:08 am por T1ag0

» Concurso do Dia das Bruxas: Vossas participações
Ontem à(s) 11:05 pm por iScroll

» Logo fixo
Ontem à(s) 10:50 pm por iScroll

» Logo para um fórum
Ontem à(s) 10:36 pm por Hyouran

» Efeito nos grupos
Ontem à(s) 10:33 pm por Harleen

» Rank para o meu fórum
Ontem à(s) 10:33 pm por Matt Shultz

» Menu & Fundo
Ontem à(s) 10:25 pm por Matt Shultz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Matt Shultz
 
iScroll
 
Harleen
 
Ketholy123
 
T1ag0
 
PlayWillian
 
zHugh
 
soldado
 
Lecxa
 

Quem está conectado
240 usuários online :: 8 usuários cadastrados, 1 Invisível e 231 Visitantes :: 2 Motores de busca

BlueJOkeR, CaioCrisostomo, Heikki, iScroll, Matt Shultz, ranzatti, soldado, T1ag0

[ 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 : 2946
Pontos Ativos : 4084

Ver perfil do usuário http://suporte-design.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


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.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário 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 : 2946
Pontos Ativos : 4084

Ver perfil do usuário http://suporte-design.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;}


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.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário 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 : 2946
Pontos Ativos : 4084

Ver perfil do usuário http://suporte-design.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


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.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário 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 : 2946
Pontos Ativos : 4084

Ver perfil do usuário http://suporte-design.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


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.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário 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 : 2946
Pontos Ativos : 4084

Ver perfil do usuário http://suporte-design.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".


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.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário 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