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!
obg obg obg obg obg, ajudou MUITO, o melhor tutorial que eu achei, vlw msm
ResponderExcluirOh, de nada! Espero que tenha ficado tudo explicadinho >3<
ExcluirNossa, me ajudou muito. Obrigada mesmo :3
ResponderExcluirDe nada fofa! Espero que tenha ficado tudo explicadinho e fácil de entender :3
Excluirainda aprece '' Verifique os seguintes campos:
ResponderExcluirArquivo CSS Inválido '' :/
Tem certeza que fez tudo certinho?
ExcluirEu sempre fiz desse jeito e sempre deu certo, veja direitinho os códigos, certo?
Qualquer coisa, me mande o seu arquivo para que eu de uma olhadinha neles e quem sabe assim acho o que deu de errado ~
Este comentário foi removido pelo autor.
ResponderExcluiroi sei que foge do assunto..mas é que ñ acho algum lugar q me explique :(
ResponderExcluircomo eu coloco aquela "Citação:" nos comentários ? clico em "citar" (mesmo ñ sabendo se é la) mas não consigo :( poderia me ajudar?
Desculpa, eu não entendi sua pergunta. Citação? Comentários? D:
ExcluirVocê diz, uma citação nos comentários no Social Spirit? -q
Oh sim! Entendi!
ExcluirEntão, quando você clicar em citar, vai aparecer no box onde você escreve para comentar a tag "quote" e logo após o comentário que você quer citar. Aí você escreve em cima da tag para citá-la ~
Espero ter ajudado ♥
Este comentário foi removido pelo autor.
Excluirfinalmente deu certo *o* muuuuito obrigada (entendi oq tava fazendo errado ^////^ )
ExcluirOi amr! Eu tenho uma duvida!
ResponderExcluirvc por acaso sabe colocar a letra com '' sombra ''?
e como botar efeitos e Gradiente
como tá no style ai :http://socialspirit.com.br/batmanandme
Excluireu fiz só que a imagem logo repetiu e eu n consigo arrumar :/
ResponderExcluirA imagem logo? Como assim? D:
ExcluirTem certeza que é a imagem logo? Colocou os códigos certinhos?
sim. Eu não sei se eu esqueci de algo ou se é o meu editor....
ResponderExcluirMas eu vou tentar de novo pra ver se acerto... :D
Certo! Qualquer coisa me mande o arquivo para que eu verifique se está tudo certinho, qualquer coisa, estou aqui para ajudar ♥~
ExcluirOMG o meu style não tá dando certo :c
ResponderExcluirQuando o style tá no meu PC as imagens aparecem direitinhas, mas quando eu mando pro meu perfil elas não aparecem.
Alguém poderia me ajudar?? Obrigada.
Olá!~
ExcluirVocê colocou a url das imagens no arquivo Modelo do style?
Talvez seja isso, qualquer coisa, me mande o seu arquivo para que eu posso dar uma olhada, quem sabe não encontro o erro? ;3
Só mandar para candylandmagicblogspot@gmail.com
e depois que a gente muda os codigos depois como a gente salva ?? tipo, como colaca no anime, eu não estou conseguindo !
ResponderExcluirAssim ó, você tem que ir lá e ir em publicar um style, aí você o usa :3
ExcluirOi, não to conseguindo salvar a pasta. Tipo, eu segui todos os passos, fiz tudo certinho, daí eu salvei, mas quando abri não mudou nada! Como faço pra isso não acontecer?
ResponderExcluirVocê está querendo dizer sobre o preview que vem no arquivo ou sobre o seu perfil no Social Spirit? D:
ExcluirOMG! Consegui, você ensinou muito bem, e a sua aula foi muito prática. Eu consegui fazer meu style certinho *u*, eu tinha visitado outros sites, mas não entendi absolutamente nada, mas sua explicação foi PERFEITA eu entendi tudinho! muito obrigado, sua explicação foi super útil.
ResponderExcluirObrigado mesmo!
Oh que bom! Fico feliz em ter ajudado :3
ExcluirAjudou bastante esse tutorial!! Mas eu também queria saber como eu faço para deixar as letras com sombra.
ResponderExcluirE onde colocar os códigos também n.n
Obrigada!! <3
Desculpe, faz um bom tempo em que não mexo nos códigos do SS, então não sei como fazer as letras sombreadas D:
ExcluirObrigada! Esse tutorial ajudou pks!!
ResponderExcluirMas eu vi em alguns Styles que tem uma maneira de deixar as letras com sombra.
Voce teria como me ajudar nisso?
Obrigada² =D
Então, faz um bom tempinho em que não mexo nos códigos do SS, desculpe, não sei mexer nas letras sombreadas D:
ExcluirBem... eu tive alguns problemas poq quando eu baixei o modelo completo, ficou faltando o arquivo do navegador
ResponderExcluiro meu saiu direitinho , menos o banner , pode me ajudar?
ResponderExcluirClaro! O que deu problema no seu banner?
ExcluirSe quiser falar comigo por e-mail para melhores explicações, pode mandar explicadinho sua dúvida para: candylandmagic.blogspot@gmail.com
ele não aparece nenhuma imagem que eu coloco , e também porque tem que hospedar em algum site? se for isso eu não fiz.
ExcluirIsso mesmo, tem que hospedar em algum site, pois o social spirit não tem acesso as imagens do seu computador! Por isso, quando você hospeda a imagem na internet, ela fica guardada num bando de dados online aberto ao social spirit (e a qualquer site tbm -q)
ExcluirTumblr serve para hospedar?
ExcluirServe sim! :3
ExcluirQue sites eu posso usar para hospedar , moça?
ExcluirOh, o tumblr mesmo, pode usar esse link: https://www.tumblr.com/themes/upload_static_file
Excluirtumblr serve?
ResponderExcluirServe amorzinho! :3
ExcluirVoce sabe como faz pra deixar essa parte branca mais escura? :c
ResponderExcluirTipo, aquela que envolve a foto e as informações, aquela área, não to conseguindo :c
Tipo eu consegui faze tudo certinho mas como é que eu faço pra colocar naquela barra de CSS que o site pede? Poxa estou a quase 3h tentando fazer e agora não consigo colocar :c
ExcluirMuito obrigada!! Ajudou muito, seu tutorial está ótimo!!
ResponderExcluirQue arquivo você usa para enviar os CSS?
ResponderExcluirQuando eu envio aparece CSS invalido
mas isso ocorre devido ao programa utilizado para o envio do CSS
não sei qual utilizar me ajuda?
Este comentário foi removido pelo autor.
ResponderExcluirEu tentei fazer, so que nao deu eu sou tao burra -_- . vou pedi ajuda pra alguem inteligente pra fazer isso pra mim ><. mais voce explicou direitinho. so que acho que nao sei fazer! Obrigada :)
ResponderExcluirOie :3 Só queria fazer uma pergunta: Para personalizar um grupo no Social Spirit, segue a mesma lógica para personalizar o perfil? Seguindo as mesmas coisas no CSS?
ResponderExcluirComo faço pra mudar os codigos?
ResponderExcluirVocê abre a pasta onde está o CSS e clica em ''Modelo.css" e pronto ^^
Excluir