Suporte Design

O Suporte Design dispõe de várias áreas de interesse do usuário, para que o mesmo possa desfrutar do nosso trabalho. Somos também, especialistas naquilo que fazemos, para auxiliar ao utilizador exatamente o que precisa.


Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Membro
Mensagens : 47
Pontos : 83
Ver perfil do usuáriohttp://gamesbrforum.forumeiros.com

Botões de tópico customizados

Reputação da mensagem: 100% (2 votos)
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:

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! Smile
avatar
Membro
Mensagens : 328
Pontos : 562
Ver perfil do usuáriohttp://www.suportedesign.net/
Olá,

Retirei o código que deixa os códigos escondidos, pois caso contrário iria gerar flood.
Estou avisando para que o autor do tópico tenha ciência do ocorrido.

Atenciosamente, JonasB. Wink
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte