Personalização dos termos do fórum Qui 6 Fev 2014 - 12:00
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Personalização dos termos do fórum Autor: Daemon
Funcionalidade: PunBB
Categoria: Recursos BestSkins
Olá,
neste tutorial iremos ensina-los a personalizar os termos e condições do fórum, os termos da página de registro.
Primeiro iremos aceder em Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript Criar um novo JavaScript
O investimento será em todas as páginas
Código a ser utilizado
- Código:
jQuery(document).ready(function() {
if(location.pathname == '/register') {
var message = '<div id="tosmessage" class="message">' +
'<b>Por favor, solicitamos que leia atentamente as regras. Em alguns segundos o botão estará disponível para você prosseguir!</b>' +
'</div>';
var tos = '<div id="tos" style="display: none;">' +
' <fieldset class="submit">' +
' <form method="post" action="/register?agreed=true&step=2" onsubmit="return checkCheckBox(this)">' +
' <input class="input_check" type="checkbox" id="agree_cbox" name="agree" value="1">' +
' <label for="agree_cbox">' +
' <strong>Eu li os termos e concordo com o exposto acima e desejo prosseguir.</strong>' +
' </label>' +
' <br /><br />' +
' <input type="submit" value="Continuar" class="input_submit">' +
' </form>' +
' </fieldset>' +
'</div>';
jQuery('.standalone:first').addClass('error').before(message).after(tos);
jQuery('.standalone:last').remove();
jQuery('#tosmessage').hide(0).delay(1000).show(1500);
jQuery('#tos').hide(2000).delay(20000).show(2000);
setTimeout(function() {
jQuery('#tosmessage').fadeOut(2500);
}, 21000);
}
});
function checkCheckBox(f) {
if (f.agree.checked == false ) {
location.href='/register';return false;
}
else
return true;
}
Depois ainda no painel iremos em Visualização Imagens e Cores Cores Folha de estilo CSS
- Código:
.message {
background: #cde3a4 url('hhttp://i38.servimg.com/u/f38/17/31/71/58/highli11.png') repeat-x 0 0 !important;
padding: 10px;
border: 1px solid #a8c471;
text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;
line-height: 1.6;
font-size: 12px;
-webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
}
.standalone.error, .standalone.error a, .standalone.error h2 {
color: #80001c;
}
.standalone.error {
background-color: #f3e3e6 !important;
border-color: #e599aa;
}
fieldset.submit {
background: #f3f5f6 url('http://i38.servimg.com/u/f38/17/31/71/58/highli11.png') repeat-x 0 1px;
padding: 15px 6px 15px 6px;
text-align: center;
}
Depois de alguns segundos, a mensagem verde irá sumir e irá aparecer o botão para prosseguir:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Se tiver alguma dúvida em relação a este tutorial crie um tópico de mesmo nome.