AjudaFM
Bem-Vindo
não é obrigado se registra para ver nosso tutoriais
agora se quiser tirar uma duvida registre-se
Bem vindo ao AJUDAFM 4.0
Cadastre-se agora para ter acesso a todos os nossos recursos. Uma vez cadastrado e logado, você será capaz de criar tópicos, postar respostas a tópicos já existentes, a reputação de seus companheiros, começar seu próprio mensageiro privado, atualizações de status post, gerir o seu perfil e muito mais. Esta mensagem será removida assim que tiver logado no AJUDAFM 4.0
Entrar Cadastre-se
AjudaFM

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

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

1 [Tutorial] Seletor de background By AJUDAFM em Sab Jun 29, 2013 12:45 am

Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

Código by Max Kyle | http://ajudafm.ativofrum.com
Todos os direitos reservados, não post no seu fórum




[Tutorial] Seletor de background

Nesse tutorial vou ensinar um efeito onde o usuário pode escolher o background

Código testado apenas em PunBB, mas creio que funcione em todas as versões teste e avise-nos
--> Tutoriais, dicas e astúcias <--
[Tutorial] Seletor de background



- CSS
Primeiramente aceda ao seu css
Visualização :seta3:Imagens e Cores :seta3:Cores :seta3:Folha de estilo CSS
e cole este código:

Código:
/* Seletor de background - www.ajudafm.ativoforum.com */
#custom_background{background-image:url('http://i48.servimg.com/u/f48/16/58/89/73/backgr18.jpg') !important;box-shadow:0 0 10px rgba(0,0,0,0.8) inset;color:#FFF;position:relative;padding:15px 0 15px 15px}
#custom_background span{-moz-transition:all .2s ease-in-out 0;background:none no-repeat scroll 50% 50% #000;border-radius:7px 7px 7px 7px;box-shadow:0 1px 7px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35);cursor:pointer;display:block;float:left;height:90px;margin-right:15px;width:140px}
#custom_background span:hover{box-shadow:0 1px 2px #000 inset, 0 1px 0 rgba(255,255,255,0.05), 0 0 1px rgba(255,255,255,0.35)}
#bg1{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr20.jpg)!important;background-repeat:repeat-x!important}
#bg6{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr15.jpg)!important}
#bg5{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr16.jpg)!important}
#bg2{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr17.jpg)!important}
#bg3{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/guitar10.jpg)!important}
#bg4{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr18.jpg)!important}
#custom_url{clear:left;padding-top:10px;text-align:center}
#custom_input{background:none repeat scroll 0 0 rgba(0,0,0,0.5);border:0 none;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(0,0,0,0.75) inset, 0 1px 0 rgba(255,255,255,0.15);color:#FFF;font-size:20px;height:40px;margin-left:-15px;margin-right:8px;white-space:nowrap;width:780px;padding:0 10px 0 0}
#custom_submit{background:url(http://i48.servimg.com/u/f48/16/58/89/73/highli10.png) repeat-x scroll 0 0 rgba(197,206,213,0.4);border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(0,0,0,0.6);color:#FFF;cursor:pointer;display:inline-block;font-size:20px;font-weight:400;line-height:40px;text-shadow:0 -1px 0 #4C5057;padding:0 10px}
.bg1{background:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr20.jpg) repeat fixed 50% 0 #000!important}
.bg2{background:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr12.jpg) no-repeat fixed 50% 0 #000!important}
.bg3{background:url(http://i48.servimg.com/u/f48/16/58/89/73/guitar10.jpg) repeat fixed 50% 0 #000!important}
.bg4{background:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr14.jpg) repeat fixed 50% 0 #000!important}
.bg5{background:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr11.jpg) no-repeat fixed 50% 0 #0E1E2D!important}
.bg6{background:url(http://i48.servimg.com/u/f48/16/58/89/73/backgr19.jpg) no-repeat fixed 50% 0 #000!important}
.bg_custom{background-attachment:fixed;background-color:#000;background-repeat:repeat}
#nav_background{background-color:#000;border:3px dotted #444!important;border-radius:15px 15px 15px 15px;cursor:pointer;float:right;padding:5px}
#nav_background:hover{background-color:#FFF}
#nav_background:active{background-color:#E71E7B}


- JavaScript
Agora crie um novo JS
Módulos :sete3: HTML & JAVASCRIPT :seta3:Gestão dos códigos JavaScript :seta3:Criar um novo JavaScript

Título *: Trocar background [AjudaFM]
Investimento: Em todas as páginas
Código JavaScript *:
Código:
var CopyrightNoticeEn = 'Copyright ©️  by AjudaFM. Todos os direitos reservados. Não modifique sem autorização direitos protegidos, denuncie qualquer tipo de modificação(ajudafm@outlook.com). ESTE AVISO DO AUTOR DEVE PERMANECER ALTERANDO OU COPIANDO O SCRIPT ORIGINAL';
var CopyrightNoticeVi = 'Direitos Reservados a AjudaFM | Max Kyle. Caso saiba de alguém que modificou os direitos denuncie (ajudafm@outlook.com)';
$(function () {
  $("#pun-intro").prepend('<img src="http://i48.servimg.com/u/f48/16/58/89/73/nav_ba10.png" alt="Change background image" title="Change background image" id="nav_background" />');
  $("#content").prepend('<div id="toggle_background" style="display: none;"><div id="custom_background"><span id="bg1"></span><span id="bg6"></span><span id="bg5"></span><span id="bg2"></span><span id="bg3"></span><span id="bg4"></span><div id="custom_url"><input type="text" placeholder=" Escolha diferentes wallpapers, digitando uma URL da imagem e pressione [alterar]" id="custom_input"><strong id="custom_submit">Alterar</strong></div></div></div>');
  $("#custom_background span").click(function () {
      $("body, .main-head, .main-foot, #pun-intro").removeClass("bg1 bg2 bg3 bg4 bg5 bg6 bg_custom").addClass($(this).attr("id"));
      my_setcookie("custom_background", $(this).attr("id"), true);
  });
  $("#custom_submit").click(function () {
      var urlbg = $("#custom_input").val();
      $("body, .main-head, .main-foot, #pun-intro").removeClass("bg1 bg2 bg3 bg4 bg5 bg6 bg_custom").addClass("bg_custom").css("background-image", "url('" + urlbg + "')");
      my_setcookie("custom_background", urlbg, true);
  });
  $("#nav_background").click(function () {
      $("#toggle_background").slideToggle()
  });
  if (my_getcookie("custom_background") != "") {
      if (my_getcookie("custom_background").length > 4) {
        $("body, .main-head, .main-foot, #pun-intro").addClass("bg_custom").css("background-image", "url(" + my_getcookie("custom_background") + ")");
      } else {
        $("body, .main-head, .main-foot, #pun-intro").addClass(my_getcookie("custom_background"))
      }
  }
});




- Resultado





©️ AjudaFM


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Tutorial] Seletor de background


_________________________________________________________________________________________________________

Olá Convidado, Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://ajudafm.ativoforum.com
Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

Pessoal criei uma vídeo aula do tutorial e to fazendo o upload agora no youtube.

@EDIT: Link do vídeo -> http://www.youtube.com/watch?v=EgX0rUPyAS0
por favor comente, clique em gostei e se possível favorite


_________________________________________________________________________________________________________

Olá Convidado, Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://ajudafm.ativoforum.com
Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 02/01/2014

avatar

sivastar

Sou Nível 1


Thanks

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