![[TUTORIAL] Background diferente para cada membro Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[TUTORIAL] Background diferente para cada membro Images10](https://i.servimg.com/u/f66/15/86/37/09/images10.png) | Background |
As
vezes alguns membros não gostam do fundo do fórum e gostariam de poder
modificar o fundo do fórum e adicionar seu próprio background, agora
podemos ter esta nova função!
--> Tutoriais, dicas e astúcias <--
Background diferente para cada membro
Background diferente para cada membro
1º - Código a ser utilizado:
- Código:
jQuery(function () {
jQuery("body").prepend('<img
src="http://i31.servimg.com/u/f31/17/41/76/40/nav_ba10.png" alt="Change
background image" title="Trocar a imagem de fundo" id="nav_background"
/>');
jQuery("body").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=" Endereço de outra imagem"
id="custom_input"><strong
id="custom_submit">Aplicar</strong></div></div></div>');
jQuery("#custom_background span").click(function () {
jQuery("body").removeClass("bg1 bg2 bg3 bg4 bg5 bg6 bg_custom").addClass(jQuery(this).attr("id"));
my_setcookie("custom_background", jQuery(this).attr("id"), true);
});
jQuery("#custom_submit").click(function () {
var urlbg = jQuery("#custom_input").val();
jQuery("body").removeClass("bg1 bg2 bg3 bg4 bg5 bg6
bg_custom").addClass("bg_custom").css("background-image", "url('" +
urlbg + "')");
my_setcookie("custom_background", urlbg, true);
});
jQuery("#nav_background").click(function () {
jQuery("#toggle_background").slideToggle()
});
if (my_getcookie("custom_background") != "") {
if (my_getcookie("custom_background").length > 4) {
jQuery("body").addClass("bg_custom").css("background-image", "url(" + my_getcookie("custom_background") + ")");
} else {
jQuery("body").addClass(my_getcookie("custom_background"))
}
}
});
2º - Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
![[TUTORIAL] Background diferente para cada membro Painel13](https://i.servimg.com/u/f48/15/88/72/83/painel13.png)
![[TUTORIAL] Background diferente para cada membro 110111](https://i.servimg.com/u/f36/11/66/91/15/110111.gif) | ![[TUTORIAL] Background diferente para cada membro 398853](https://2img.net/u/2112/28/77/07/smiles/398853.gif) Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
![[TUTORIAL] Background diferente para cada membro 110210](https://i.servimg.com/u/f36/11/66/91/15/110210.gif) | Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas. |
![[TUTORIAL] Background diferente para cada membro 110310](https://i.servimg.com/u/f36/11/66/91/15/110310.gif) | Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
![[TUTORIAL] Background diferente para cada membro 110410](https://i.servimg.com/u/f36/11/66/91/15/110410.gif) | Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
4º - Código CSS a ser utilizado:
- Código:
#custom_background{background-image:url('http://i31.servimg.com/u/f31/17/41/76/40/backgr21.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://i31.servimg.com/u/f31/17/41/76/40/backgr22.jpg)!important;background-repeat:repeat-x!important}
#bg6{background-image:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr23.jpg)!important}
#bg5{background-image:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr24.jpg)!important}
#bg2{background-image:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr25.jpg)!important}
#bg3{background-image:url(http://i31.servimg.com/u/f31/17/41/76/40/guitar10.jpg)!important}
#bg4{background-image:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr21.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://i31.servimg.com/u/f31/17/41/76/40/backgr22.jpg) repeat fixed 50% 0 #000!important}
.bg2{background:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr33.jpg) no-repeat fixed 50% 0 #000!important}
.bg3{background:url(http://i31.servimg.com/u/f31/17/41/76/40/guitar10.jpg) repeat fixed 50% 0 #000!important}
.bg4{background:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr27.jpg) repeat fixed 50% 0 #000!important}
.bg5{background:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr32.jpg) no-repeat fixed 50% 0 #0E1E2D!important}
.bg6{background:url(http://i31.servimg.com/u/f31/17/41/76/40/backgr31.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}
5º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
![[TUTORIAL] Background diferente para cada membro 1114](https://i.servimg.com/u/f71/11/61/24/05/1114.gif)
Resultado:
![[TUTORIAL] Background diferente para cada membro Sem_t119](https://i.servimg.com/u/f46/12/46/70/00/sem_t119.png)
