Olá docetes e doces, tudo bem com vocês? Eu espero que sim.
Neste post irei ensinar como fazer um tema para o Amor Doce, mas é claro, com o Amor Doce atualizado. Você ainda pode encontrar o antigo tutorial, para relembrar. Infelizmente, já adiantando digo que é bem mais complicado fazer um layout agora, porém nada impossível e irei tentar explicar para vocês da melhor forma possível.
Irei ensinar de duas formas diferentes, um mais fácil, caso você só queira para você mesmo ou caso você queira disponibilizar o código para outros que é o mais difícil.
Fazendo o seu próprio tema
01. Faça login ou crie uma conta no site da stylish, clique aqui para acessar;
02. Depois de ter criado a conta, na página inicial clique em "Create new style";
03. Abra o seu bloco de notas ou qualquer outro programa de editar texto.
Você vai precisar de uma tabela de cores em HTML.
Uma imagem de fundo com no máximo 2000x1524, uma imagem do banner do Amor Doce e uma imagem no canto do Amor Doce e uma uma imagem pequena, do tamanho 50x17 para substituir o clipe do lado do nome do jogador, caso você queira.
Copie e cole no seu bloco de notas ou outra coisa, este código abaixo:
@namespace url("http://www.w3.org/1999/xhtml");
@-moz-document domain("amoursucre.com"), domain("amordoce.com"), domain("sweetamoris.de"), domain("corazondemelon.es"), domain("flirttistoori.com"), domain("csabitasboljeles.hu"), domain("slodkiflirt.pl"), domain("sweetflirt.ro"), domain("sladkiiflirt.ru"), domain("askito-m.com"), domain("sweetcrush.co.uk"), domain("mycandylove.com") {
/* Esses são os dominios que o style vai pegar, não mexer */
/* Fundo da página */
index > .connected {
background-color : #FFFFFF !important;
background-image : url("BACKGROUND") !important ;
background-repeat : no-repeat !important ;
background-position : center center !important ;
background-attachment : fixed !important ;
}
01. Em BACKGROUND, apague e substitua pelo link da imagem que quer de fundo;
02. Caso a imagem do seu fundo seja pequena e você quer que ela repita, mude o background-repeat : no-repeat !important ; por background-repeat : repeat !important ;
Caso você não queira que repita a imagem, não altere essa parte.
Após alterar da maneira que preferir, cole em baixo desse código:
/* Logo do Amor Doce*/
#site-logo > a > img[src*="/logo-as.png"] {
height : 0 !important ;
width : 0 !important ;
background: url("LOGOAD") no-repeat !important ;
padding-left : 427px !important ;
padding-top : 142px !important ;
}
.halo {background-image : url("http://www.amoursucre.com/image/halo.png") !important ;}
01. Em LOGOAD troque pelo link da imagem da logo do Amor Doce que você quiser.
Após colocar o link, abaixo cole:
/* Info do jogador*/
panel-connected {background : #FFFFFF !important ;}
#pseudo-container > .blue {
background : #FFF000 !important ;
box-shadow : 0 1px 1px rgba(125,125,125,0.75) !important ;
}
.title-container a {
color : #FFFFFF !important ;
text-shadow : 0 1px 1px rgba(125,125,125,0.75) !important ;
}
#episode-container {background : #EDEB5C !important ;}
#episode-container span {color : #213369 !important ;}
#episode-container .number {color : #FFFFFF !important ;}
.trombone {background-image : url("http://www.amoursucre.com/image/paper-clip/left.png") !important ;}
Agora, vamos editar essa caixinha:
01. Em #FFFFFF coloque a cor de fundo que você quer na caixinha;
02. Em #FFF000 coloque a cor de fundo que você quer no nome do jogador;
03. Em #FFFFFF coloque a cor que você que seja a letra do nome do jogador;
04. Em #EDEB5C coloque a cor que você quer que o fundo da caixa do episódio;
05. Em #213369 coloque a cor que você quer que a palavra "Episódio" apareça;
06. Em #FFFFFF coloque a cor que você quer que o número do episódio apareça;
07. Em http://www.amoursucre.com/image/paper-clip/left.png, caso você queira, troque pela imagem que você quer que substitua o clipe ao lado do nome da Docete, caso você não queira, então não mexa.
Após terminar de editar, cole este trecho abaixo:
#currencies-container .values {
background : #F7D522 !important ;
border : 2px solid #213369 !important ;
color : #FFFFFF !important ;
}
01. Em #F7D522 troque pela cor que você quer que seja o fundo do quadradinho do cash($) e do PA;
02. Solid é a borda em volta do cash e do PA, que está normal, mas você pode trocar solid por dashed que fica com pequenas linhas, ou dotted que fica com pontinhos;
03. Em #213369 você coloca a cor da borda do cash e do PA;
04. Em #FFFFFF você colocar a cor do texto do cash e do PA.
Após editar, adicione mais essa parte:
#panel-menu a {
background : #8A2BE2 !important ;
color : #FFFFFF !important ;
}
#panel-menu a:hover {
background : #FF00FF !important ;
color : #B99096 !important ;
}
01. Em #8A2BE2 coloque a cor do fundo dos botões do Perfil, Fórum, Goodies e Ajuda;
02. Em #FFFFFF coloque a cor da letra dos botões do Perfil, Fórum, Goodies e Ajuda;
03. Em #FF00FF coloque a cor do fundo desses mesmos botões quando você passa o mouse e muda;
04. Em #B99096 coloque a cor da letra dos botões quando eles mudam de cor.
E após editar, por fim, adicione mais essa parte:
navigation-menu > div > .pink, navigation-menu > div > .blue {
background : #FF0000 !important ;
color : #FFFFFF !important ;
}
navigation-menu > div > .active, navigation-menu > div > a:hover {
background : #D8918F !important ;
color : #F4C8C7 !important ;
}
navigation-menu > div > .border {
border : none !important ;
}
side-links > .link-entry {
background : #2649D4 !important ;
}
}
Agora vamos editar as barras com os menus:
01. Em #FF0000 coloque a cor do fundo do menu no topo;
02. Em #FFFFFF coloque a cor da letra do menu do topo;
03. Em #D8918F coloque a cor do fundo do menu no topo quando passar o mouse;
04. Em #F4C8C7 coloque a cor da letra quando passar o mouse no menu do topo;
05. Em #2649D4 coloque a cor do fundo dos botões da música, facebook e twitter.
E fim! Depois do código todo completo, vá na página do Stylish, em create new style, dê um nome, descreva e em CSS cole o código editado. Em Primary Screenshot coloque o print que você quer que apareça no inicio e em Additional Screenshots coloque mais prints caso você queira, depois salve e seu estilo está pronto para qualquer um usar.
Utilizando um style pronto
Neste, você também irá precisar das mesmas coisas que o outro. Acesse este style aqui, e edite da maneira que preferir, após terminar, instale o tema pronto! Vai estar do jeito que você havia feito.
Clique na imagem para ver a tradução dos tópicos.
A única diferença é que nesse, você não irá conseguir disponibilizar para outras pessoas baixarem. E também não há como mudar algumas coisas como o clipe, e as cores de alguns itens.
É isso pessoal, espero que tenham gostado e entendido! Qualquer dúvida é só comentar, até o próximo post!
Ficou horrível o novo template, por favor muda
ResponderExcluirPor que você não gostou? Talvez eu ou a Sara mude, mas pode demorar. ;^;
ExcluirPoxa.. Eu gostei do novo template *^*/
ExcluirMiih Chan, é que antes deste atual era um outro diferente em si, mas era preto e branco mesmo.
ExcluirAí no dia seguinte mudei para este. ^^
oh...Não tem mais como mudar o cabeçalho e nem a carteirinha?? ;w; só dá pra mudar a cor ,o fundo e o logo do AD?? pouxa...
ResponderExcluirSó a carteirinha que não.
ExcluirNo meu fica dizendo "1 erro proibido este estilo de ser salvo
ResponderExcluirOcorreram problemas com os seguintes campos:
Código de estilo tem um erro - erro de análise no valor "$" ($ end) na linha 53 ao redor "ortant;}". Se precisar de ajuda, publique uma nova discussão em https://forum.userstyles.org/post/discussion/5."
O que faço?
Quando eu fui usar meu tema, o fundo todo fica branco. As cores da caixinha tudo normal como eu modifiquei, mas o background e o Logo do amor doce não tem! Já tentei vários sites pra hospedar imagem mas não vai. Me ajuda plss!
ResponderExcluir