Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


Você não está conectado. Conecte-se ou registre-se

 » Programação » Tutoriais de Códigos » Tutoriais para Forumeiros » 

[FORUMEIROS] Botões de tópico personalizado

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]


Novato

em Qui Abr 23, 2015 12:28 am
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)

Ver perfil do usuário

Novato

em Dom Abr 26, 2015 1:38 am
Um código simples e realmente útil. Visto que, o mesmo substitui imagens por CSS puro...

Ver perfil do usuário

Novato

em Sab Maio 30, 2015 12:17 am
Código atualizado! Muito feliz (rindo)

Ver perfil do usuário

Administrador

em Sab Maio 30, 2015 12:37 pm
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.

Ver perfil do usuário http://techmais.forumeiros.com

Novato

em Dom Maio 31, 2015 2:40 am
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!

Ver perfil do usuário
Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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