Tutorial CSS do Social Spirit - Atualizado ♠

Tutorial atualizado ◑ω◐

Amores!

Quanto tempo, não?

Eu vi que bastante gente tem procurado o meu tutorial e como aquele antigo estava com muita coisa que poderia confundí-los, decidi fazer um novo.

Vamos começar com uma pequena atualização no CSS do Social Spirit. Acho que muita gente já soube que ele mudou algumas regras, certo?

Então vamos começar!

Uma das primeiras coisas que você deve fazer é baixar o arquivo modelo no site.

Para quem é iniciante e ainda não sabe onde está esse arquivo, vá em personalizar:

Depois vá em enviar um style no canto superior direito do site.

Leia os Termos de Regras e aceite, para baixar o arquivo, clique no box amarelo do canto direito.

Após baixar, crie uma pasta e extraia o arquivo ali. 

Pronto!

Agora podemos começar a criar o CSS.

Abra o arquivo modelo, você verá muitos códigos, vamos começar com a imagem do logo, ou seja, essa imagem:

Crie sua imagem com a largura de 1000 pixels e a altura até 350, ficando a sua escolha a altura que deseja.

Após salvar sua imagem, coloque-a em algum site de hospedagem, como por exemplo o tumblr, eu gosto bastante desse, mas tem de ter uma conta para usá-lo.

Copie o link da imagem do seu logo e abra o arquivo modelo. Procure por img/cimalogo.png.

Onde está em parenteses, coloque a url de sua imagem e onde está escrito height: 120px, você coloca o tamanho de sua altura. No meu caso, eu usei 350, que é o máximo que o Anime Spirit aceita.

Ficará assim:

Para ver como a imagem ficará no CSS, abra o arquivo de navegador que veio junto com o arquivo que você baixou.

Agora vamos fazer o FundoBase, ou seja, o fundo que fica atrás das informações do perfil.

Esse fundo aqui:

Ele deve ter largura de 1022 pixels com a altura de 520. Faça do jeito que quiser e depois hospede em algum site.

Você irá colocar a url da imagem aqui:

Quando abrir o arquivo para ver como ficou, irá perceber que ele não acompanha toda a extensão do site, certo?

Para isso, troque o no-repeat center top para fixed.

Ficará assim:

Muito bem, agora vamos fazer o fundo de tudo!

Aquele fundo que fica atrás, como esse aqui:

Eu não sei ao certo como deixar esse fundo bonitinho, mas eu sempre uso imagens que possam ser uniformes na hora de mudar o no-repeat left top para fixed.

De qualquer forma, use uma imagem grande, digamos assim, com largura maior que 1200 e a altura maior que 370.

Após feita e hospedada, coloque a url aqui:

Bem, o fundosombra é aquele que fica atrás do fundologo. Eu nunca usei e não vejo ele fazer muita diferença, por isso não irei explicar sobre ele.

Vamos mexer nos códigos de cores agora!

Primeiro código.

Esse código mexe com a cor das letras dessa barrinha:

Próximo código:

Ele mexe com o fundo dessa parte aqui:

Bem, próximo código:

Ele mexe com o fundo dessa parte:

Próximo código:

Ele muda a cor da borda dessa barrinha:

Próximo código:

Ele muda a cor da letra dessa barrinha:

Próximo código:

Ele muda a cor da borda dessa parte:

Próximo código:

Ele muda a cor do fundo dessa parte:

Próximo código:

Esse código muda a cor da letra dessa parte:

Próximo código:

Esse código muda a cor da letra do título do box do lado direito:

Próximo código:

Ele muda a cor da borda do box do lado direito.

Próximo código:

Ele muda a cor do fundo do box do lado direito.

Próximo código:

Ele muda a cor da letra do box:

Próximo código:

Esse código muda a cor da letra dessa parte:

Próximo código:

Ele muda o fundo do quote.

Próximo código:

Ele muda a cor da borda do quote.

Próximo código:

Ele muda a cor do título:

Próximo código:

Código 1: muda a cor do fundo:

Código 2: muda a cor da letra:

Código 3: muda a cor da borda:

Próximo código:

Esses código fazem as mesmas coisas que o código de cima, só que ele muda essa parte:

Próximo código:

Código 1: muda a cor do fundo:

Código 2: muda a cor da letra:

Código 3: muda a cor da borda:

Enfim, aqui terminamos o nosso CSS!

Como exemplo, mostrarei como ficou meu CSS finalizado.

Espero que tenham entendido tudo certinho, qualquer dúvida, é só perguntar nos comentários.

Para quem quiser utilizar esse CSS em seu perfil, clique aqui.

Até uma próxima postagem!