Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Personalização dos termos do fórum

+5
Ground
Target
[Dark]Doki-.
Inspirage
Daemon
9 participantes

Daemon Daemon  • Qui 6 Fev 2014 - 12:00

Personalização dos termos do fórum Empty Personalização dos termos do fórum Qui 6 Fev 2014 - 12:00

Reputação da mensagem: 100% (5 votos)
[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 Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript Seta 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 Seta Imagens e Cores Seta Cores Seta 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;
}
Valide o css.

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.


Última edição por Daemon em Dom 16 Ago 2015 - 17:26, editado 1 vez(es)

Inspirage Inspirage  • Qui 6 Fev 2014 - 12:13

[Dark]Doki-. [Dark]Doki-.  • Qui 6 Fev 2014 - 12:15

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum Qui 6 Fev 2014 - 12:15

Muito lindo de bonito ema !
Perfect

Target Target  • Qui 6 Fev 2014 - 12:18

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum Qui 6 Fev 2014 - 12:18

Excelente ! Smile
Parabéns pelo código emo *-*

Ground Ground  • Qui 6 Fev 2014 - 13:13

Target Target  • Qui 6 Fev 2014 - 13:19

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum Qui 6 Fev 2014 - 13:19

ScreeN escreveu:Como que modifica o tempo de espera?
Até!

Modifique no script:

jQuery('#tos').hide(2000).delay(20000).show(2000);

Aonde delay e show são em segundos, modifique os dois, ou os três, como preferir!

Até mais.

avatar Eragon™  • Seg 10 Mar 2014 - 0:50

luccasmartens luccasmartens  • Qua 2 Abr 2014 - 12:28

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum Qua 2 Abr 2014 - 12:28

Daemon gostei dei até uma modificada nas cores, mas enfim... Só queria entender como eu mudo o tempo de espera!

[S]herlock H. [S]herlock H.  • Qua 2 Abr 2014 - 13:19

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum Qua 2 Abr 2014 - 13:19

luccasmartens escreveu:Daemon gostei dei até uma modificada nas cores, mas enfim... Só queria entender como eu mudo o tempo de espera!

6Eyes escreveu:
ScreeN escreveu:Como que modifica o tempo de espera?
Até!

Modifique no script:

jQuery('#tos').hide(2000).delay(20000).show(2000);

Aonde delay e show são em segundos, modifique os dois, ou os três, como preferir!

Até mais.

avatar -Jonathan-  • Sáb 7 Fev 2015 - 23:38

Conteúdo patrocinado  • 

Personalização dos termos do fórum Empty Re: Personalização dos termos do fórum

Permissões neste sub-fórum
Não podes responder a tópicos