![[FORUMEIROS] Botões de tópico personalizado Empty](https://2img.net/i/empty.gif)
![[FORUMEIROS] Botões de tópico personalizado 8C5CLjj](https://i.imgur.com/8C5CLjj.png)
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!
Última edição por RafaelS. em Sáb Fev 20, 2016 2:01 am, editado 3 vez(es) (Motivo da edição : Melhorias no código)
