Tutorial CSS do Anime Spirit.

Um tutorial de CSS ⊙ω⊙

\!/ATENÇÃO\!/

Existe um tutorial atualizado de acordo com as novas regras do SocialSpirit, para encontrá-lo, apenas clique aqui. Muito obrigada pela atenção!

Olá leitoras Nyan!

Hoje eu estou trazendo um tutorial de como criar um CSS no Anime Spirit.

Aí você me pergunta, o que é Anime Spirit? É simplesmente uma rede social aonde fãns de animes e otakus criam e publicam fanfics, fanarts, entre muitas outras coisas.

Eu decidi fazer esse tutorial porque quando eu fui fazer o meu primeiro eu me 'bati' um monte para acertar o fundo, as cores, etc.

Espero que esse tutorial ajude ^^

Ah, mas para quem quer conhecer o Anime Spirit é só clicar aqui.

A primeira coisa que se deve fazer é baixar o modelo de CSS que o próprio Anime Spirit disponibiliza. Pode baixar aqui.(É só clicar no link que está no boxe amarelo no canto direito da página!)

Depois de baixar, crie uma pasta nova em documentos.

Coloque o arquivo rar. na pasta e extrai ali.

Vai conter esse conteúdo.

Primeiro vamos fazer a imagem que fica em cima do perfil.

Abra a pasta img. Lá você verá 4 documentos, abra o que diz cimaLogo.jpeg

Eu irei usar o Photoshop para editar a imagem, mas você pode usar que programa quiser. (No meu caso) Abra o Photoshop e crie uma nova imagem. Ela deverá ter 1000 de largura, você pode colocar quantos de altura quiser, eu vou colocar 400.

Feito isso, crie a sua capa.

Depois de cria-lá, salve na pasta img com o nome cimaLogo e substitua a antiga imagem.

Para ver como fica no perfil, vá na pasta aonde você extraiu o arquivo rar. e abra este arquivo.

Quando abrir, você vai perceber que está faltando um pedaço da imagem, certo?

Exemplo:

Para mudar o tamanho do cimaLogo, abra o arquivo modelo.txt 

Aperte Ctrl+F e procure, cimaLogo.

Após feito isso, veja que em baixo há vários números.

Mude esse número, pelo número da altura da sua imagem, que no meu caso é 400.

Salve e atualize a página do CSS que está aberta em seu navegador, veja com a imagem ficou com o tamanho certinho!

Pronto! Agora vamos fazer o fundo que fica na parte de trás do perfil.

Abra o Photoshop e crie um arquivo de 2000x2000 (Isso é só um exemplo, você pode criar  o arquivo com o tamanho que preferir) com o nome de fundoDegrade.

Depois de feito e substituído na pasta, veja como ficou no perfil que está aberto em seu navegador.

Dependendo do tamanho que você fez a imagem, talvez ele fique um pouco cortado, mas para arrumar isso, vá no arquivo modelo.txt e mude o repeat-X left top.

No lugar do repeat-X left top, coloque a palavra fixed.

Feito isso, atualize o perfil aberto em seu navegador e veja se o fundo está nos 'conformes'.

Para tirar essa tirinha cinza que fica perto do cimaLogo.

Vá na pasta img, e abra o arquivo fundoBase.jpeg com o Photoshop, personalize do jeito que quer, mas sugiro que coloque apenas uma cor básica.

Depois de salvar, atualize a página e veja como ficou.

Viram a diferença?

Certo, não iremos mexer no fundoSombra, porque na minha opinião deixa o CSS feio, mas se quiserem, podem mexer sim, afinal o CSS é de vocês.

Agora iremos hospedar as imagens do perfil, porque só ter no computador não da certo.

Escolham um site de hospedagem, mas pra quem não sabe qual usar, use este aqui.

Primeiro hospede a imagem cimaLogo.

Peguem essa URL.

Depois, abra o arquivo modelo.txt e procure por cimaLogo novamente.

Ali aonde está escrito (img/cimaLogo.jpg) substitua pela URL da imagem que você hospedou.

Salve. Agora hospede a imagem do fundoDegrade. Faça a mesma coisa que você fez com o cimaLogo no arquivo modelo.txt

Salve. E novamente hospede a imagem fundoBase.

Feito isso, faça a mesma coisa que fez com o fundoDegrade no arquivo modelo.txt

Pronto, salve mais uma vez.

Agora vem a parte mais complicada (na minha opinião -q) 

Temos de mexer nos números do modelo.txt

É bem complicado, mas eu tentarei ajudar o máximo que eu puder.

Primeiramente você precisará de uma paleta de cores com os números, pode se encontrar aqui.

Primeiro número que iremos editar é esse.

Ele muda essa barrinha cinza que fica em baixo da imagem do perfil.

Próximo código é esse.

Ele muda essa barra aqui, aonde fica o menu do site.

Aqui muda o tamanho da letra e a fonte.

Próximo código é esse.

Ele muda a cor da letra da barra do menu do site.

O próximo código é esse.

Ele muda a cor do fundo dessa barrinha.

O próximo código é esse.

Esse código muda a cor do fundo dessa barrinha.

Próximo código é esse.

Ele muda a cor dessa barrinha fininha.

Próximo código é esse.

Ele muda a cor do link dessa barrinha.

Próximo código é esse.

Ele muda a cor dessa barrinha da parte de baixo.

Próximo código é esse.

Ele muda a cor do fundo dessa barrinha da parte de baixo.

Próximo código é esse.

Ele muda a cor da letra da barrinha da parte de baixo.

Próximo código é esse.

Ele muda o título do menu direito do box.

Próximo código é esse.

Ele muda a cor da linha fininha do box.

Próximo código é esse.

Esse código muda a cor do fundo do box.

Próximo código é esse.

Esse código muda a cor da letra do box.

Próximo código é esse.

Esse código muda a cor do fundo do quote.

Próximo código é esse.

Esse código muda a cor da borda do quote.

Próximo código é esse.

Ele muda a cor do título do Box de conteúdo.

Próximo código é esse.

Ele muda a cor do fundo do Box de conteúdo.

Próximo código é esse.

Esse código muda a cor da letra do Box de conteúdo.

Próximo código é esse.

Esse código muda a cor da borda do Box de conteúdo.

Próximo código é esse.

Esse código muda a cor do fundo dos boxes de baixo.

Próximo código é esse.

Esse código muda a cor da letra do box de baixo.

Próximo código é esse.

Esse código muda a cor da borda do box de baixo.

Próximo código é esse.

Esse código muda o fundo do box de baixo.

Próximo código é esse.

Esse código muda a cor da borda do box de baixo.

Prontinho! Terminamos de configurar os códigos, agora uma novidade (que não é tão novidade assim -qqq), vou ensinar como por a seta do mouse personalizada no seu perfil!

Primeiro copie esses dois códigos:

body {

        cursor: url("PONHA O URL AQUI") !important;

}

body {

        cursor: url("PONHA O URL AQUI"),auto;

O primeiro código você deve colocar antes de todos os códigos.

E o segundo código deve ser colocado aqui.

Agora vamos procurar uma seta personalizada para colocar no perfil.

Eu recomendo este site.

Depois de pegar a URL da sua seta, coloque-a aonde diz "ponha o URL aqui".

Feito isso, salve e veja no perfil aberto no navegador se a seta está aparecendo.

Agora é só desfrutar do seu novo perfil no Anime Spirit!

Bom é só isso, caso tenha alguma dúvida, pergunte nos comentários.