Tech Mais
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

techadd

Conectar-se

description[FORUMEIROS] Botões de tópico personalizado Empty[FORUMEIROS] Botões de tópico personalizado

more_horiz
[FORUMEIROS] Botões de tópico personalizado 8C5CLjj
Nome do Arquivo: Botões de tópico customizados
Autor: DeeW.
Funcionalidade: Todas as versões

Um código simples que criei para substituir os botões de "Novo Tópico", "Responder" e "Tópico Bloqueado" por HTML customizavél. assim não necessita de imagens para criar estes botões!

Painel de Controle --> Módulos --> Gestão dos códigos Javascript --> Novo Javascript:

Código:

$(function() {
console.log("name: Custom Button Topics");
console.log("version: r1");
console.log("*Without bugs and simple code");
console.log("author: DeeW. --> David Peixoto");
console.log("If you remove my credits of the code, i report your forum");
if (window.location.pathname.indexOf('/f') == 0) {
 var newtopic = '<span class="topic_buttons">Criar Novo Tópico</span>';
 $("img[alt='Novo Tópico']").replaceWith(newtopic);
}
else if (window.location.pathname.indexOf('/t') == 0) {
 var newtopic = '<span class="topic_buttons">Criar Novo Tópico</span>';
 var reply = '<span class="topic_buttons">Responder este tópico</span>';
 var locked = '<span class="topic_buttons important">Este tópico está fechado</span>';
 $("img[alt='Novo Tópico']").replaceWith(newtopic);
 $("img[alt='Responder ao tópico']").replaceWith(reply);
 $("img[alt='Este Tópico está bloqueado. Você não pode editar as mensagens ou responder.']").replaceWith(locked);
}else{
 console.log("CustomButtonTopicsLOG: All right!");
}
});


O código está bem fácil de entender, então caso queira editar as classes do elemento, vá lá e edite, você só precisa de um minímo conhecimento em HTML para compreender a edição.

Após adicionar isto só precisa criar um estilo ao botão, deixarei um CSS de base para vocês, caso precisem:

Código:


.topic_buttons {
  background-color: rgb(60, 65, 75)!important;
  padding: 10px 15px!important;
  border: none!important;
  cursor: pointer!important;
  color: white!important;
  font-weight: bold!important;
  text-transform: uppercase!important;
  border-radius: 4px!important;
  font-size: 11px!important;
  font-family: Open Sans,cursive;
  text-shadow: 0 1px 1px black;
}
.topic_buttons.important{background: darkred!important;}


É isso pessoal, até a proxima! Feliz

Última edição por RafaelS. em Sab Fev 20, 2016 2:01 am, editado 3 vez(es) (Razão : Melhorias no código)

description[FORUMEIROS] Botões de tópico personalizado EmptyRe: [FORUMEIROS] Botões de tópico personalizado

more_horiz
Um código simples e realmente útil. Visto que, o mesmo substitui imagens por CSS puro...

description[FORUMEIROS] Botões de tópico personalizado EmptyRe: [FORUMEIROS] Botões de tópico personalizado

more_horiz
Código atualizado! Muito feliz (rindo)

description[FORUMEIROS] Botões de tópico personalizado EmptyRe: [FORUMEIROS] Botões de tópico personalizado

more_horiz
Olá.

O código não irá funcionar pois ele não verifica se o document está pronto a receber códigos. Fiz uma pequena alteração que ira resolver esse problema.

Até mais.


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador

description[FORUMEIROS] Botões de tópico personalizado EmptyRe: [FORUMEIROS] Botões de tópico personalizado

more_horiz
iChees escreveu:
Olá.

O código não irá funcionar pois ele não verifica se o document está pronto a receber códigos. Fiz uma pequena alteração que ira resolver esse problema.

Até mais.


Sim antes eu tinha colocado mais não tava indo, eu gosto mais desse jeito do que usar imagens, acho mais "elegante" parabéns DeeW!

description[FORUMEIROS] Botões de tópico personalizado EmptyRe: [FORUMEIROS] Botões de tópico personalizado

more_horiz
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum