Tutorial #01 - Como fazer style para o Social Spirit? (Atualizado - 2015)

Olá pessoal! Eu reparei que não existem muitos tutoriais de como fazer um style para o Social Spirit e os que tem são bem desatualizados, então decidi fazer para vocês.


Faz tempo que eu não faço styles e os que eu fiz estão bem básicos e a maioria bem escrotos. Como é o primeiro tutorial, eu vou ensinar a fazer um bem simples, sem mudar muita coisa na estrutura do style base que o Spirit fornece.

Sem mais delongas, vamos começar!

Bom, a primeira coisa a fazer é baixar o style base que o Spirit fornece. Para baixa-lo é bem fácil.
Entre no site do Social Spirit e faça o login. Na página inicial, no canto superior direito você vai encontrar uma bolinha azul com um sinal de mais (+). Clique nela e vá em 'Enviar um Style'.

Assim que clicar em 'Enviar um Style' você vai para uma página de regras. O tutorial que eu vou ensinar está dentro das regras, mas eu aconselho vocês à lê-las mesmo assim. Se houver algo infringindo aos termos, eles retiram mesmo do site. Acreditem, já aconteceu comigo só porque eu não coloquei os links das fotos que tinha usado no Style. Dependendo do que você fizer pode até ser banido do site, então tomem cuidado e leiam as regras direitinho.

Depois de ler todos os termos, clique em 'Sim, eu aceito os termos' e você vai direto para a página de envio do Style. Na parte de cima há um box amarelo com o link do modelo base de CSS. Baixe esse modelo.

Depois de baixar o modelo, extraia ele e abra o arquivo 'modelo'. É nele que vamos mexer para mudar tudo. 

No arquivo extraído vai ter também o símbolo do Google Chrome. Abrindo ele você vai poder ver como o seu tema está todas as vezes que mudar algo, até que ele fique perfeito para ser enviado para o site do Spirit. Se abri-lo agora, ele estará assim: 

Vamos começar mudando a parte de cima, onde está escrito 'LOGO'.

Você vai precisar criar uma imagem em algum editor de imagem, como o Photoshop por exemplo, que foi o que eu usei. A imagem criada precisa ter 1000 pixels de largura, já a altura você escolhe. Não existe um 'máximo', pelo menos nessa atualização, que eu saiba, não existe. Eu sugiro uns 300 pixels de altura. Acho um tamanho bom, nem grande demais, nem pequeno demais.

Depois de fazer a sua imagem no Photoshop, ou em qualquer editor de imagem, você vai precisar hospeda-la em algum lugar. Eu sempre hospedo as minhas imagens no sistema de hospedagem do Tumblr.

Copie o link da sua imagem e no arquivo 'modelo', procure por imgcimaLogo e substitua isso pelo link da sua imagem.

Acima de img/cimaLogo há o código height, que significa a altura. Ele está marcando 120px. Troque o 120 pelo número que você escolheu para a altura do seu topo. No meu caso, foi 300. Vai ficar assim:

Depois de substituir, clique em 'File' e 'Salvar'. Para ver como ficou o seu topo, clique no ícone do Chrome na pasta que você extraiu onde está escrito perfil.

O meu ficou assim:

Estão vendo a parte branca na imagem de cima? O fundo de todo o perfil? Agora é hora de mudar essa parte.

Escolha uma imagem grande de mais ou menos 1022x520 pixels se você quiser que ela fique fixa ou um background que pode ser repetido.

Depois que hospedar e pegar o link dessa imagem, ache img/fundobase no seu código e substitua isso pelo seu link, da mesma forma que fez com o topo. Se tiver escolhido uma imagem grande para ficar fixa no style, substitua o 'no-repeat center top' por 'fixed'.

No meu caso eu não vou colocar imagem alguma, apenas vou mudar a cor. Se quiser fazer o mesmo, apague essa parte do código:

url(img/fundoBase.jpg) no-repeat center top

E substitua por # com a cor que você deseja em hexadecimal. Assim:

Como da primeira vez, salve e clique no ícone do Chrome na pasta extraída para ver o resultado:

Agora vamos mudar o fundo de tudo, que seria aquela parte cinza degradê horrível ali. Para deixar essa parte fixa você também vai precisar de uma imagem grande, talvez uns 1210x400. Ou então você pode colocar um background que se repete, como eu expliquei no item acima. 

Como eu sou bem preguiçosa para fazer e/ou pesquisar essas imagens e, além disso, o style que eu estou fazendo é bem simples, no estilo minimalista, eu vou substituir esse fundo pela mesma cor que eu usei no fundo do perfil e do topo.

Faça a mesma coisa que você fez no item acima, mas dessa vez procure por img/fundoDegrade para colar o link da sua imagem. Se não quiser colocar uma imagem, como eu, troque o código pelo # seguido da cor em hexadecimal, da mesma forma que foi feito acima. 

Agora vamos mexer com as cores do tema!

Para trocar as cores das letras dessas barrinhas:

Procure por:

E troque o #D7575B pela cor em Hexadecimal que desejar. Eu usei o #000, que é a cor preta.

Para trocar o fundo dessa barrinha:

Procure por: 

E troque o #FAF7F5 pela cor em hexadecimal que você deseja.

Agora vamos alterar a cor do fundo e da borda dessa parte:

Procure por:

E troque novamente o #FAF7F5 pela cor que você deseja para alterar o fundo. 

Agora vamos falar da borda. Abaixo do código do fundo podemos ver o seguinte código:

border: 1px solid #EEE8E1

Ele indica a grossura da borda e a cor. Para alterar a grossura é só aumentar o número do px. Para alterar a cor é só trocar o #EEE8E1 pela cor hexadecimal que você deseja. Para tirar a borda, apague toda essa parte do código ou coloque border: 0px.

O próximo código é para mudar a cor da letra dessa barrinha:

Procure por:

E troque o #D7575B pela cor que deseja.

No final do style temos essa parte, onde alteraremos essa barra que está destacada:

 Para mudar a cor e a grossura dessa bordinha, procure por esse código:

A grossura pode ser alterada mudando o 5px para maior ou menor. Quanto maior mais grosso. A cor é mudada, como sempre, pelas cores hexadecimais. Troque #e9e9e9 pela cor que você deseja.

Para mudar o fundo dessa parte, procure pelo código:

E troque #EFEFEF pela cor que desejar.

Para mudar as letras dessa parte:

Procure por:

E troque #666666 pela cor em hexadecimal que desejar.

Vamos mudar a cor da letra do lado direito agora. Que são essas aqui:

Procure por esse código:

E troque #D7575B pela cor hexadecimal que você deseja.

Agora vamos para a cor do fundo e da borda dessas partes:

Procure por:

No código 1 você altera a borda. Mudando o número do px você muda a grossura e no #EEE8E1 a cor da borda. Para tirar a borda é só mudar toda a parte destacada por 0px;

No código 2 você altera a cor do fundo. 

No código 3 você altera a cor da letra do box 'Interesses'.

Já viram o efeito de deixar a borda das imagens dos seus amigos redondinha? Antigamente tínhamos que encontrar o código na internet e adiciona-lo ao CSS do Spirit para dar esse efeito, mas na nova atualização eles incluíram isso na base do CSS, então só precisamos alterar para deixar arredondado ou uma bolinha completa. A base vem com a foto quadradinha, para arredondar, encontre esse código:

Mude o 0px das duas partes destacadas para arredondar as bordas. Quanto maior o número, mais arredondado vai ficar. Para deixar um círculo, eu sugiro 50px;

Agora vamos mexer nessa área:

Ache esses códigos:

No código 1 você altera a cor da letra do quote.

No código 2 você altera a cor do fundo do quote.

No código 3 você altera a grossura e a cor da borda do quote.

O próximo código vai mudar as cores de todas essas coisas:

Procure pelo código:

E troque #D7575B pela cor em hexadecimal que você deseja.

Para mudar a cor dessas barrinhas:

Encontre esse código:

E troque #FFFFFF pela cor hexadecimal desejada.

Os próximos código vão mudar essas barrinhas:

E dos fundos dessas partes:

Procure por:

Agora vamos lá: Os códigos que estão em vermelho vão mudar as 4 barrinhas destacadas de vermelho na primeira imagem e os fundos indicados com as setinhas vermelhas. Os códigos azuis vão mudar as 3 barrinhas destacadas em azul na primeira imagem.

No código 1 EM VERMELHO será alterada a cor do fundo da barrinha.

No código 2 EM VERMELHO será alterada a cor da letra onde está escrito ITEM.

No código 3 EM VERMELHO será alterada a cor da borda da barrinha.

Os códigos em azul fazem a mesma coisa que os códigos em vermelho, mas em suas respectivas barrinhas.

Os próximos códigos não existiam nas versões anteriores. Eu achei bem legal as coisas que eles colocaram, apesar de não ter explorado muito bem ainda. Vamos lá!

Essa parte está bem explicada no próprio style base, mas eu vou explicar novamente e mostrar para vocês como vai ficar. 

Estão vendo essa barra de busca? Vamos mudar ela com esses códigos:

No código 1 mudamos a cor do fundo da barra de pesquisa.

No código 2 mudamos a cor da letra de quando digitamos dentro da barra de pesquisa.

No código 3 mudamos a grossura e a cor da borda da barra de pesquisa.

No código 4 arredondamos a borda da barra.

Como podem ler no começo do código, a mudança nesses códigos não implica somente na barra de busca de amigos, mas também nos comentários e recados do livro de visitas. Ou seja, alterando essa barra você também altera as outras coisas que não podem ser visualizadas no modelo.

O próximo código muda esse botão:

Ele não pode ser visualizado no modelo de style, mas suas mudanças são simples.

Procure esse código:

Onde está #FFF é onde você mudará a cor do símbolo +.

Onde está #337ab7 é onde você mudará a cor de fundo da bolinha, ou seja, o azul.

Os últimos códigos vão mudar essas partes:

Procure pelos códigos:

O #FFF destacado em VERMELHO muda a cor normal da letra dos botões. 

O #337ab7 destacado em VERMELHO muda a cor do fundo do botão.

Se você salvar e checar se está funcionando notará que se você passar o mouse por cima do botão ele volta a ser azul com a letra branca. Isso é o efeito hover. Nos códigos destacados em azul você pode altera-lo, trocando a cor da letra e do fundo do botão quando o mouse passar por cima.

Lembrando que essas mudanças também vão alterar alguns outros botões quando vocês forem adicionar uma fanfic aos favoritos, por exemplo.

Os próximos (e últimos) códigos eu não sei exatamente tudo o que mudam, por isso eu prefiro falar para vocês não mudarem nada. Vou tentar descobrir e assim que conseguir atualizo o post ou faço um post novo para vocês, explicando somente essa parte do 'Dropdown'.

O resultado do meu style foi esse:

Se vocês quiserem usar esse style, aqui está o link → World Behind My Wall ♥

Enfim, espero que tenha ficado bem explicado. Qualquer dúvida, deixem nos comentários! 

Obrigada e até a próxima!

Tutorial por: taeminwz/plszen