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
» Caixa de login ao clicar na barra de ferramentas
Hoje à(s) 11:39 pm por MatiasReis123

» Espaçamento entre a imagem e o título
Hoje à(s) 11:20 pm por MatiasReis123

» sistema de shop bugado
Hoje à(s) 11:01 pm por weverson lopes

» Como alargar o tópico
Hoje à(s) 09:39 pm por Luiz

» Emblemas css
Hoje à(s) 09:16 pm por Luiz

» Ajuda sobre esse Codigo
Hoje à(s) 08:49 pm por Taxy_InSaniTy

» Corrigir erro no widget de últimos assuntos personalizado
Hoje à(s) 08:35 pm por Luiz

Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
251 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 242 Visitantes :: 2 Motores de busca

Br_SP_Rodrigo, CesarWatsom2, Gustavor, iScroll, MatiasReis123, odelgado, Taxy_InSaniTy, weverson lopes, YuuriFonseca

[ 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 : 2837
Pontos Ativos : 3935

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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4188
Pontos Ativos : 4827

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 : 2837
Pontos Ativos : 3935

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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4188
Pontos Ativos : 4827

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 : 2837
Pontos Ativos : 3935

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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4188
Pontos Ativos : 4827

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 : 2837
Pontos Ativos : 3935

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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4188
Pontos Ativos : 4827

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 : 2837
Pontos Ativos : 3935

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.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4188
Pontos Ativos : 4827

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