Guild Imperium


    [TUTORIAL] Background à escolha do usuário

    Compartilhe
    avatar
    #BadBoy#
    Fundador
    Fundador

    Mensagens Mensagens : 39 SCPoint SCPoint : 1424 Reputação Reputação : 309 Localização Localização : Cara a cara com o meu munitor

    9xStudio [TUTORIAL] Background à escolha do usuário

    Mensagem por #BadBoy# em Seg Jul 16, 2012 10:36 pm

    Background à escolha do usuário
    Com este efeito será possível através de um botão mudar o background do fórum com imagens pré-definidas ou adicionando uma URL.

    Esta função está disponível nos fóruns com sistema PHPBB3 E PUNBB.

    Nº1 - Código .JS:

    Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript

    Crie um novo código Java Script, com o conteúdo abaixo:

    PHPBB3
    Código:

    $(document).ready(function () {
      $("#site-title").prepend('[img]http://i48.servimg.com/u/f48/16/58/89/73/nav_ba10.png[/img]');
      $("#main-content").prepend('');
      $("#custom_background span").click(function () {
          $("body").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").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").addClass("bg_custom").css("background-image", "url(" + my_getcookie("custom_background") + ")");
          } else {
            $("body").addClass(my_getcookie("custom_background"));
          }
      }
    });

    PUNBB
    Código:

    $(document).ready(function () {
      $("#pun-intro").prepend('[img]http://i48.servimg.com/u/f48/16/58/89/73/nav_ba10.png[/img]');
      $("#content").prepend('');
      $("#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"));
          }
      }
    });

    Em investimento, marque "em todas as páginas". Não esqueça de salvar.

    Nº2 - Código CSS:

    Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

    Adicione o código abaixo em sua folha CSS:

    Código:
    /* Tùy chọn hình nền - www.FMvi.vn */
    #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:15%}
    #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}

    Salve.


    Resultado:


    Créditos a Baivong pela criação do código. Tradução por: Perseu/Near.

    © [Você precisa estar registrado e conectado para ver este link.]

    OBS: TUTORIAL PEGO DO FORUM SPDESIGN, CLIQUE AQUI PARA IR AO TÒPICO ORIGINAL: [Você precisa estar registrado e conectado para ver este link.]

      Data/hora atual: Qui Ago 16, 2018 8:34 am