Updates +
Devido ao hiatus, não estamos moderando nem respondendo nenhum comentário, porém o blog continua aberto para visualização. Obrigada pela visita ♡

4 de março de 2014

Como criar style para anime spirit (social spirit)



{NOVA VERSÃO DO ANTIGO TUTORIAL}

    Olá meu povo, cá estou a refazer um dos nossos antigos tutoriais: Como fazer um style para o site anime spirit (Que atualmente se chama só Spirit). Além do motivo de que o host de imagens do blogger excluiu todas as imagens do post antigo, também temos o motivo de que muitas pessoas não entenderam como era feito e eu admito que talvez eu tenha deixado muita coisa somente por cima, sem me aprofundar na questão das cores e tudo mais. Pois bem, dessa vez eu vou tentar fazer melhor então vamos lá c:

Modelo de CSS mais explicativo do que a versão do spirit disponível para download no fim do post.

Antes de tudo, esteja logado no Spirit e vá até essa página (http://socialspirit.com.br/personalizar/adicionar?termo=1) (que seria Personalizar > Adicionar um style > Aceitar os termos de uso) , na lateral direita da página você encontra uma caixa amarela, leia-a e faça o download do modelo de style. Um arquivo .zip será baixado, voocê deverá extrair seus arquivos. 


  • Eu recomendo a host de imagens imgur , para hospedar as imagens do seu style.
  • Meu 4shared com alguns backgrounds (x)
  • Download do meu modelo de css com algumas explicações adicionais no fim do post
  • Instale o ColorZilla para saber qual o código de qualquer cor no seu navegador (versão para chrome e mozilla disponíveis. O link leva ao download da versão para chrome)
  • Cores em HTML 

    Após extrair os arquivos do zip, duas pastas e alguns arquivos aparecerão aonde você extraiu eles, mas o que importa agora é a pasta img, e os arquivos cimaLogo, fundoBase, fundoDegrade e fundoSombra.
( X eu coloquei o arquivo 'modelo' dentro da pasta mas ele não vem junto dela necessariamente)

    Primeiro vamos ao mais básico: Arranjar uma imagem de fundo (background), você pode elaborar alguma imagem ou pode fazer download de alguma no meu 4shared, onde disponibilizei algumas que eu mesma fiz e outras que achei pela internet (no google)
   Agora que você já tem uma imagem de background, você precisa de uma imagem fundoBase. Essa imagem é aquela que fica no corpo do style como você pode entender melhor no link a seguir (x) (todo o espaço branco que há na imagem é o fundoBase, claro que você pode colocar outro pattern ou imagem ali)
    Agora a imagem fundoDegrade, ela é nada menos do que sua pattern (a imagem que fica no seu fundo, um exemplo? Esses guarda-chuvas azuis aqui do blog xD). A imagem fundoSombra, é aquele sombreado que aparece dos lado da fundoBase, como vocês podem observar no style que eu peguei de exemplo essa sombra não está lá, isso porque quem fez o style não utilizou a imagem também.
    cimaLogo: Começamos a complicar um pouco a partir daqui, lembrando sempre que se vocês não estão acompanhando podem me perguntar qualquer coisa nos comentários. A imagem cimaLogo é, como eu acho já ter citado em algum lugar aqui, aquele "banner" que fica no topo do style (x). Você pode edita-la da maneira que quiser, porém, ela deve obrigatoriamente conter 1000px de largura e no mínimo 350px de altura (se não houverem tido alterações nas regras, vale ressaltar é claro, é bom que vocês leiam as regras sempre antes de postar um style). Aí quem decide é você: Você pode colocar uma png como cimaLogo, como nesse style, ou pode usar uma imagem quadrada como no style de exemplo, ou ainda fazer algo parecido com esse style, há centenas de modelos incríveis que eu poderia dar de exemplo porém isso tiraria muito do nosso tempo e eu estaria preenchendo mais espaço que o necessário nessa postagem, então considerando que todos, ou pelo menos boa parte, já compreendeu essa imagem seguimos para o próximo tópico.

    Compreendidas todas as imagens que necessárias e tendo todas as edições prontas então vamos aplica-las ao nosso style.
   Abra o arquivo "modelo.css" que você extraiu do arquivo zip que fez download no início do tutorial. Um bloco de notas com o css será aberto no seu computador. Ele está dividido em parte e está bem explicado, fora que o desenvolvedor do css é o dono do site então tudo está em português, o que facilita muito a compreensão deste.

   A primeira parte do código refere-se aos estilos de todo o site, vamos dar uma olhada nela.

/* ####################################################################### */
/* Modelo de Página do Usuário AnimeSpirit                                 */
/* Através desse arquivo você pode personalizar seu perfil                 */
/* Você pode mudar as cores, fontes e imagens                              */
/* ####################################################################### */
/* Estilos de todo o Site                                                  */

body {
background: #DFDFDF url(img/fundoSombra.jpg) repeat-Y center center;
}

#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;
}

fieldset {
border: 1px solid #459055;
}

span, span a, .admin, .admin:hover, .ativo, .ativo:hover, .link {
        color:#D7575B;
}
#base {
background: url(img/fundoBase.jpg) no-repeat center top;
}

    Aos passarmos o olhos por cima disso parece um monstro, mas vejam bem, fazer um style e mexer em css e html na verdade não é um bicho de sete cabeças como aparenta. Eu vou fazer a explicação com 'parte do código' e em seguida uma breve explicação sobre o que deve ser feito, eu também acho que seria mais fácil se o modelo de css disponibilizado no próprio spirit fosse mais explicativo e incentivasse as pessoas a criarem os seus próprios styles, como recentemente (nem tanto assim) a usuária responsável por essa parte (@Momo)  fez, dando algumas aulas de style. (Você pode encontra-las no site) Então eu vou criar meu próprio modelo e disponibiliza-lo para download no fim do post.


body {
background: #DFDFDF url(img/fundoSombra.jpg) repeat-Y center center; 
} Certamente que a URL da imagem de fundoSombra, (onde está em itálico) caso você não queira usa-lá deixe do modo que está. A cor cinza (#DFDFDF) será coberta pelo pattern (imagem de fundo) mais tarde. Eu recomendo deixar do jeito que está caso você queira o efeito de png no cimaLogo ou a junção do cimaLogo com o pattern. (x) Como esse exemplo, nesse style a imagem de cimaLogo e uma png
#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;
} A URL da sua imagem de fundo onde está em itálico (a cor #DFDFDF será coberta por essa imagem) Se seu background deve se repetir para ficar certo então remova o -X.

fieldset {
border: 1px solid #459055;
Essa é a cor que aparece nas páginas ocultas de um perfil, como por exemplo observar um usuário (x)
span, span a, .admin, .admin:hover, .ativo, .ativo:hover, .link {
        color:#D7575B;
}  Cores  de alguns links, como você pode observar na imagem (os links que essa cor muda são os em vermelho XXX muda os links selecionados, os ícones de exclusão, o link do livro de visitas e os demais da imagem)
#base {
background: url(img/fundoBase.jpg) no-repeat center top;
}   Essa imagem vocês fazem usando como modelo a fundoBase da pastas de modelos do css (a pasta img) Podem colocar uma cor diferente (a maioria usa cores claras e pastéis, já que cores fortes . Lembrem-se de deixa-la com o exato mesmo tamanho da imagem de modelo, caso contrário o style ficaria estranho)
A segunda parte do css, os estilos da parte de cima do site: navbar (caixinha onde aparece spirit > membros > o seu perfil)

/* ####################################################################### */
/* Estilos da parte de Cima do Site                                        */

#cima #logo {
        height: 120px; 
background: url(img/cimaLogo.jpg); 
URL da sua imagem de cimaLogo no espaço em itálico. Em "heigh: 120px" Você muda o 120 pelo número da altura da sua imagem cimaLogo.

#nav {
        background: #FAF7F5; Muda a cor da barra onde fica 'animes cartoons filmes etc...' (x) A parte em azul na imagem
}

#secaoNav  {
background: #FAF7F5;
        border:1px solid #EEE8E1;
} Primeira cor (#FAF7F5) Muda a cor da barra onde está escrito Spirit > Membros > Seu perfil. (Barra verde na imagem) Segunda cor (#EEE8E1) Muda a cor da borda dessa barra (Linha vermelha na imagem) 1px: É o tamanho dessa borda, os styles quase sempre tem essa borda em 1px mas na imagem eu mudei para 3px para que ficasse mais visível, aí depende do estilo que você quer que seu style tenha. (x)

#secaoNav, #secaoNav a {
        font-size: 12px; Tamanho da fonte de Spirit > Membros > Seu perfil
color: #D7575B; Cor de Spirit > Membros > Seu perfil
}

    Estão acompanhando? Eu espero que sim, se vocês tiverem qualquer duvida, por favor deixem um comentário. Certo, agora tudo basicamente é a escola de cores portanto provavelmente não surgirão mais explicações tão grandinhas quanto as anteriores ^^

Essa explicação é sobre aquela caixa que fica abaixo de todos os styles, você pode visitar seu perfil para verificar, role a página totalmente para baixo e encontrará essa caixinha.

   
/* Estilos da parte de Baixo do Site                                       */

#baixo {
border-top: 5px solid #E9E9E9; 5px: altura da borda que há naquela caixa.
background-color: #EFEFEF; Cor do fundo da caixa
color: #838383; Cor da letra não em negrito (dentro da caixa preta no print)
}

#baixo a {
color: #666666; Cor da letra em negrito (dentro da caixa vermelha no print)
}

*Solid: Se a borda é pontilhada ou não. Caso queira a borda pontilhada altere solid para dotted. Conteúdos do menu direito do site (As caixas em que ficam seus amigos, grupos, etc...)


/* Estilos do Menu Direito do Site */

.boxMenuDireito {
color:#D7575B; (x)

}

.boxMenuDireito .tituloMenuDireito {
color:#D7575B; Cor do título das caixas
font-size:13px; Tamanho da fonte das caixas
}

.boxMenuDireito .textoMenuDireito{
border:1px solid #EEE8E1; Cor da borda1px: Tamanho da borda das caixas.
background-color:#FAF7F5; Cor do fundo das caixas
color:#838383; Cor da fonte do que estiver escrito nas caixas
}

    Prestem atenção dobrada agora sim? Essa é a parte em que ficam as caixas onde aparece tudo no seu style (X) A partir de agora eu já não mais vou explicar o básico, aquilo que venho repetindo desde o início, coisas como border:1px solid #COR ou ainda fonte-size: 13px. Por favor compreendam que somente ocuparia espaço, já que essa parte é relativamente grande e é chato pra mim e pra quem já entendeu ficar repetindo isso, fica maçante, mais do que já está sendo afinal tutoriais enormes são maçantes. Se você ainda não entendeu muito bem essas partes retorne nas explicações anteriores e leia novamente, e caso eu não tenha deixado claro o suficiênte o que essas coisas significam por favor deixe um comentário.

/* Estilos que pertencem ao Conteúdo do Site                               */

#quote {
color: #000000;  Not sure mas acho que é a cor da letra ou do título
background-color: #C0C0C0; Cor do fundo
        border:1px solid #EEE8E1;
        font-size:13px;
}

.boxConteudo .titulo, .boxConteudo h1, .boxConteudo h2, .boxConteudo h1 a, .boxConteudo h2 a {
color: #D7575B; Cor dos títulos de tudo (nome do seu usuário, cor de 'atualizações' etc)
        font-size: 13px;
}

.boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {
background-color: #FAF7F5; Cor do fundo da caixa onde aparecem suas atualizações
color: #5D5D5D; Cor da fonte (Inclui todos os ícones e símbolos dentro do texto)
        border:1px solid #EEE8E1;
}

.boxConteudo .textoBg2, .boxConteudo tr.textoBg2 td {
background-color: #E9E9E9; Cor do fundo
color: #5D5D5D; Cor da fonte (Inclui todos os ícones e símbolos dentro do texto)
        border:1px solid #EEE8E1;
} Caso queira as cores de fundo das caixas (x) alternadas, não coloque a mesma cor que a primeira (a explicação anterior sobre .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {)

.boxConteudo .baixo {
background-color: #FAF7F5; Cor do fundo
color: #000; ??? De novo lol
        border:1px solid #EEE8E1;
}

.boxConteudo .baixo a {
        font-size: 13px;
}

    Terminamos *é pra glorificar de pé irmãos e irmãs e -nnnn* A última explicação é sobre os elementos condensados, são somente os links, quando você cita alguém (@Fulano) Aparece em uma cor diferente certo? Bem...
/* Elementos Condensados                                                   */

a, body {
color: #F8C704; Essa é a cor em que o fulaninho e todos os links vão aparecer c:
}
*Revisão básica: Solid: Se a borda é pontilhada ou não. Para mudar para pontilhada: Troque solid por dotted.
*Font-size: 13px: Tamanho da fonte.
*Cores todas em HTML

ADICIONAIS: 


  • Para centralizar o texto e/ou deixa-lo em letras garrafais (maiúsculas) cole o seguinte código:
        text-transform:uppercase; (deixa em letras garrafais)
        text-align:center; (alinha o texto)
  Abaixo de:

.boxConteudo .titulo, .boxConteudo h1, .boxConteudo h2, .boxConteudo h1 a, .boxConteudo h2 a {


  •  Subir o navbar do style. (a caixa de animes, cartoon, filmes, etc,...) Cole em qualquer parte do style que refira-se ao navbar:
#subnav {
        top:-5px;

  • Arredondar as bordas do style. Cole abaixo de todas as bordas que deseja arredondar (os .boxMenutal' ou .boxConteudo lol)

        border:none !important;
        border-radius: 0px; 

  • Colocar o navbar (barra de animes, cartoon, etc...) Na parte de cima do style (x) Cole abaixo dos códigos já existentes em #nav {
        top: 40px!important;
        position:absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
  Isso é só o básico, que praticamente todo mundo que faz style, mas levando em conta que é um tutorial pra alguém que busca aprender e que não sabe de absolutamente nada, creio que tenha ajudado pelo menos alguém, não? ;u; Bem, de qualquer forma, existe um usuário no spirit  que faz tutoriais em tópicos, ela também posta jornais, eles são sempre de extrema utilidade e se vocês quiserem alguma coisa mais ampla e aprofundada podem visitar o perfil dela (http://socialspirit.com.br/sakurasharigan)

    Mas então, ainda te restaram dúvidas? Comente e quem sabe eu possa ajudar. E finalmente o meu arquivo do modelo pra download. (X)


ATT [03/10/14] O tópico de styles que eu recomendei foi fechado. Foi criado um grupo chamado styles.

ATT [10/12/12] Sobre o problema que todos andam tendo com o menu abaixo da caixa em que as informações do usuário aparecem:

Utilizem o código abaixo para fazerem as alterações no menu:

#boxUsuario .baixo ul li a {

ATT [23/01/15] Perguntas mais frequentes em relação a códigos

ATT [2016] Devido ao fechamento do blog, não estamos mais tirando dúvidas nem ajudando com códigos. Sei que o tutorial apresenta o antigo modelo e que talvez alguns dos códigos estejam obsoletos, me perdoem :c

86 comentários:

  1. Amei o tuto *u* Eu estava mesmo precisando dele <3

    -Paris | nyanmidnight.blogspot.com

    ResponderExcluir
  2. Que bom, fico feliz em ajudar :3

    ResponderExcluir
  3. Anônimo4/10/2014

    Hey linda tenho uma dúvida, você sabe como muda a caixa "adicionar como amigo" ? Obrigada desde já

    ResponderExcluir
    Respostas
    1. abaixo de #nav a:hover. você cola o seguinte código:

      #subnav .btn {
      color: #ZZZ!important;
      background-color:#XXX!important;
      background-image:-webkit-linear-gradient(top,#YYY,#XXX)!important;
      background-image: -moz-linear-gradient(top, #YYY, #XXX)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)!important;
      text-shadow: none!important;
      border-radius: 2px !important;
      }

      #meio .btn {
      color: #ZZZ!important;
      background-color:#XXX!important;
      background-image:-webkit-linear-gradient(top,#YYY,#XXX)!important;
      background-image: -moz-linear-gradient(top, #YYY, #XXX)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)!important;
      border-radius: 2px !important;
      text-shadow: none!important;
      }

      #subnav .btn, #meio .btn { color: #ZZZ!important; }

      XXX muda a cor da parte de baixo do degradê, YYY muda a cor da parte de cima do degradê e ZZZ muda a cor da fonte.

      background-color:#XXX!important;

      Esse código muda o hover do botão (cor do fundo quando passa o mouse) use a mesma cor que colocar em XXX pra que fique certo ^^ Se der errado pode deixar mais um comentário me avisando.

      Excluir
  4. Anônimo4/11/2014

    obrigada, mas eu não achei esse #nav a:hover. Temos quer cria-lo?

    ResponderExcluir
    Respostas
    1. oh, me desculpe -qq #nav a:hover { é um código que colocamos abaixo de #nav a { para que a barra onde está escrito animes, cartoons e etc,... fique diferente quando passa o mouse, caso você tenha esse código no seu style (que não é o seu caso) você cola o código do botão de 'adicionar como amigo' abaixo dele, caso não tenha você cola abaixo de #nav a { ^^

      Excluir
  5. o meu n deu certo para mudar a cor daquela barra "Adicionar amigo" :/

    ResponderExcluir
    Respostas
    1. talvez eu tenha passado um código para outro botão (o botão 'adicionar' que se localiza no navbar) tenta colar esse código abaixo de #nav

      nav .btn {
      color: #AFAF9B!important;
      background-color:#D7EAE3!important;
      background-image:-webkit-linear-gradient(top,#DADFEB,#D7EAE3)!important;
      background-image: -moz-linear-gradient(top, #DADFEB, #D7EAE3)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#DADFEB, endColorstr=#D7EAE3)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DADFEB, endColorstr=#D7EAE3)!important;
      text-shadow: none!important;
      border-radius: 0px !important;
      border: 0px solid #C4B7C6;
      }

      #meio .btn {
      color: #AFAF9B!important;
      background-color:#e9e9e9!important;
      background-image:-webkit-linear-gradient(top,#e9e9e9,#e9e9e9)!important;
      background-image: -moz-linear-gradient(top, #e9e9e9, #e9e9e9)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#e9e9e9)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#e9e9e9)!important;
      border-radius: 0px !important;
      text-shadow: none!important;
      }

      #nav .btn, #meio .btn { color: #AFAF9B!important; }

      Eu copiei o código de um dos meus styles, portanto não lembro muito bem da ordem das coisas, mas altere sempre todos os #AFAF9B por uma mesma cor (se você quiser ter certeza absoluta de no que está mexendo, altera essa cor pra #FF0000, salve o modelo e visualize, aí o que aparecer em vermelho no botão corresponde aos #AFAF9B do código, como você alterou então corresponde a todos os #FF0000 do código ^^)

      Excluir
  6. Ótimo tutorial, me ajudou >bastante<!
    Ah, é possível mudar a fonte?

    ResponderExcluir
    Respostas
    1. Quem bom que ajudou c: Ah, é possível sim, por exemplo em estilos do menu direito do site:

      .boxMenuDireito .tituloMenuDireito {
      color:#D7575B; Cor do título das caixas
      font-size:13px; Tamanho da fonte das caixas
      font-family: arial;
      }

      O elemento em itálico, font-family, é referente a fonte de .boxMenuDireito (as caixas que existem à direita do style). Você pode usar apenas fontes convencionais (arial, new times roman, etc...), ou seja, padrões do navegador. Claro que você também pode instalar alguma fonte da web no style, mas faz já algum tempo que eu não faço isso e eu simplesmente esqueci :< Mas os fórums do spirit mesmo (em especial aqueles que a Thayeon e a LadySharingan participam) podem te ajudar, basta perguntar lá como usar uma fonte da web no seu style. Embora as fontes padrões não sejam as mais bonitas eu gosto muito de usar a cambria em um tamanho pequeno e uppercase : >

      Excluir
  7. Bah, eu esqueci de perguntar uma coisa... Como muda o hover (acho que é assim que se chama -q) daqueles links "Perfil Amigos Atualizações..."?

    ResponderExcluir
    Respostas
    1. A parte no style que se refere a essa caixa é

      .boxConteudo .baixo {

      Logo após temos:

      .boxConteudo .baixo a {

      Que se refere ao tipo, decoração e transformação da letra dessa "caixa". Eu creio que você queira mudar o hover da letra, portanto abaixo de .boxConteudo .baixo a {, insira:

      .boxConteudo .baixo a:hover {
      color: #COR /* altera a cor hover */

      Eu recomendo mudar somente a cor dessa parte em hover e investir mais no primeiro menu (#nav), caso contrário o style fica muito carregado de efeitos e eu sigo fielmente a lógica de que menos é sempre mais (o u o )/ Maaas se você acha que não tem nada a ver com nada o que eu disse, você pode adicionar várias coisas nesse hover como font-style e deixar as letras em negrito (que aliás nem deixa tão carregado), pode adicionar um text-transform, etc...

      Excluir
  8. Me ajudou muito , consegui fazer mas não esta mostrando a parte de cima...o que eu fiz de errado?

    ResponderExcluir
    Respostas
    1. A parte de cima da qual você fala é o banner (cima logo)? Ele aparece cortado, é isso? Bem, se for faça o seguinte: dê o comando ctrl + f e procure por #cima #logo
      Você encontrará esse código:

      #cima #logo {
      height: 120px; /* altere para o 120 para a altura do seu cimaLogo */
      background: url(URL_DO_BANNER);
      }

      Preste atenção no que diz entre as barras, muitas pessoas costumam esquecer desse detalhe: Mudar o 120 para o número da altura do seu cima loggo (em pixeis [px])

      ex: Meu cima logo tem 250 px de altura, meu código deve ficar assim:

      #cima #logo {
      height: 250px; /* altere para o 120 para a altura do seu cimaLogo */
      background: url(URL_DO_BANNER);
      }

      Entendeu? ;) Agora, caso não seja o banner que aparece cortado e sim algum elemento (menu, caixas do perfil, menu direito, etc...) Então eu sugiro que você refaça todo o style com calma. Eu sei que parece super chato mas veja bem: Um única vírgula que seja altera TODO o style, é a regra básica do css. Você pode ter esquecido um dos ponto e vírgula no final de algum dos elementos (p ex: height: 250px;) Isso também prejudica muito a estrutura.

      Excluir
  9. Você sabe como deixar o avatar circula?

    ResponderExcluir
    Respostas
    1. Os avatares das caixas a direita? Se forem esses você usa esse código:

      .boxMenuDireito img {
      border-radius:100px;
      }

      Excluir
  10. Olá, ajudou muito, mas eu queria saber como faz para mudar a cor daquela parte onde fica o nome, status, etc. E onde fica as atualizações do usuário

    ResponderExcluir
  11. Nessa parte:

    .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {
    background-color: #FAF7F5;
    color: #5D5D5D;
    border:1px solid #EEE8E1;
    }

    Nos estilos que pertencem ao conteúdo (meio) do site, a cor dessa caixa vai ser a mesma que a cor da caixa que você quer (e da outra caixa grande onde aparece sua descrição c:)

    ResponderExcluir
  12. Só complementando o comentário acima ^^ A parte que muda a cor de fundo da caixa que você citou é a de background-color.

    ResponderExcluir
  13. Consegui agora :) Obrigada pelo tutorial me ajudou muito.
    Mas agora, sabe como faz aquelas caixinhas onde ficam as fotos dos amigos, grupos rodarem?

    ResponderExcluir
  14. Sei sim moça c: cole abaixo de boxMenuDireito {

    .boxMenuDireito img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    }

    ResponderExcluir
  15. Olá eu amei o tuto meu styles ficou incrível serio eu amei ele <3 muito obrigada e se quiser visitar o perfil para ver como o styles ficou http://socialspirit.com.br/swag19styles <3
    Obrigada!

    ResponderExcluir
    Respostas
    1. Moçoila olha, tá muito bom pra um primeiro style viu c: Adorei o cima logo, he (eu não sou directioner mas acho os integrantes umas fofurinhas ♥)

      Excluir
  16. Oi,você sabe me dizer como eu faço para deixar as fotos das lista de amigos,grupos,usuários que observam circulares ? ótimas dicas.beijos.

    ResponderExcluir
  17. Abaixo de .boxMenuDireito {
    conteúdo }

    Cole

    .boxMenuDireito img {
    border-radius:100px;
    }

    Se você quer algum efeito por exemplo o rotate, peço que leia os comentários acima c:

    ResponderExcluir
  18. Que arquivo zip que você esta falando? Eu não achei ;-; só achei a opção do download do arquivo .css

    ResponderExcluir
    Respostas
    1. Hmm, vai nessa url aqui http://static.socialspirit.com.br/css/usuarios/modelo.v2.3.zip

      Excluir
  19. Oi amor, amei o tutorial, e aprendi o que precisava.
    Li os comentários anteriores e percebi que muitos tinham a mesma dúvida que eu.
    Desculpe, mas eu realmente não entendi como deixar as imagens circulares e mudar a fonte.
    Pode me ajudar?

    ResponderExcluir
  20. Okay, no prob, vamos lá (* / o u o)/ Bem, eu não entendi qual fonte você quer mudar, já que existem muitas fontes no css do spirit (a dos títulos, do corpo, das caixas da direita, do navbar, etc...), você pode me dizer qual dessas fontes é? Então eu vou poder ajudar ^^ Quanto as imagens circulares, vejamos hm.
    No seu código você encontra essa parte

    .boxMenuDireito {
    color:#D7575B;

    }

    Embaixo disso, você cola

    .boxMenuDireito img {
    border-radius:100px;
    }

    A parte que muda as imagens é border-radius, o número 100 é o tanto que sua borda vai ser arredondada, quando maior o número mais redondo e tendo colocando o valor de 100 pixeis sua imagem é totalmente circular c:

    ResponderExcluir
    Respostas
    1. Okay, eu fiz como você disse, mas esse código deixa o icon do perfil redondo também?
      Ou ele deixa e eu to colando errado?
      Eu tirei print pra você ver:
      http://3.bp.blogspot.com/-Ly7S6b7zWc8/U_Yv6ZCQ_BI/AAAAAAAAB5g/k3BWK6EY9oo/s1600/capture-20140821-143953.png
      Tá certo? Porque se tiver, não esta ficando redondo :/

      Excluir
    2. Você fez certo sim, esse código só muda os ícones das caixas à direita. Para mudar o ícone do perfil você procura por

      .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {

      depois de todo o código desse elemento (até você fecha-lo com a chave }), cole

      .boxConteudo img {
      border-radius:100px;
      }

      Sempre que você quiser fazer com que a imagem de um elemento fique circular é só pegar o nome do elemento e por img junto, em seguida o border-radius e pronto c:

      Excluir
  21. Olá, olá, tenho outra duvida, é que na visualização está tudo certinho mas quando passo pro social as letras do "perfil, amigos, atualizações...", do nome em cima da descrição, fica grande de volta e fica feio sei lá, não importa o tamanho que coloque nem se coloco "!important;" em seguida, não adianta. Helpem eu aqui!!!!
    Olhem como fica

    ResponderExcluir
  22. Você tentou perguntar o porquê disso nos fóruns? Porque me desculpe mas eu não sei :c Isso acontece muito comigo, chega a ser ridículo, eu já até desisti de fazer alguns styles por causa disso. Se você descobrir a causa/solução desse problema pode vir aqui comentar tanto pra mim quanto pra galera daqui :/ Eu acho que é um problema no site em si, a culpa desse bug não é nossa não, o jeito é recomeçar tudo do zero o que é um saaaaco, mas é a única maneira que eu encontrei de driblar isso. Eu vou perguntar nos fóruns de novo (eu já tinha perguntado uma vez), e se alguém me apresentar alguma solução prometo que comento aqui, ok?

    ResponderExcluir
  23. Olá, eu tenho uma dúvida. Não consegui colocar o nav com letras maiúsculas. Tem que colocar o hover? Qual é o código certo de vejo colocar? E aonde devo colocar?

    ResponderExcluir
    Respostas
    1. Dentro do código do elemento do navbar (nav {), você coloca:

      text-transform:uppercase;

      (antes do fechamento da chave '}')

      Se não funcionou coloca !important depois de uppercase e se ainda não funcionar eu realmente não sei o que é :/// o spirit é muito bugado, cheio de lag, as vezes as coisas travam (principalmente o nav e os .boxConteudo)

      Excluir
    2. Consegui anjo, está certinho, muito obrigada! :)

      Excluir
    3. Desculpa perturbar de novo, mas eu gostaria de saber se você sabe qual o código que faz isso (http://s4.postimg.org/h75cwqdxp/Sem_T_tulo_3.png). Queria saber como deixar a primeira palavra com a fonte maior do que o resto da frase. E, se você souber o código, gostaria de saber também onde devo colocar esse código. Obrigada!

      Excluir
    4. Mas o modelo de css já é assim originalmente (o - o '')

      Excluir
    5. É, depois que eu vi, desculpa kkkkkkk

      Excluir
    6. xD não tem problema, qualquer coisa pode vir perguntar

      Excluir
  24. como eu faço pra fazer rodar a imagen do perfil, ja está redondo, mas não consegui por pra mover

    ResponderExcluir
    Respostas
    1. Abaixo do elemento .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td você cola

      .boxConteudo img {
      border-radius:100px;
      }

      .boxConteudo img:hover {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-transition: transform 1s;
      -moz-transition: transform 1s;
      -o-transition: transform 1s;
      transition: transform 1s;
      }

      Excluir
  25. Anônimo9/05/2014

    Perfect amei <3
    Mais moça eu realmente não consigo fazer os amigos grupos e etc CIRCULAR(ficam apenas redondo) consigo fazer só o nick me ajuda por favor?:3

    ResponderExcluir
  26. Abaixo de .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td { até fechar essa chave com "}", você cola

    .boxConteudo img {
    border-radius:100px;
    }

    ResponderExcluir
  27. Então amor, eu perguntei algumas coisas e você me ajudou com extrema paciência.
    Mas agora eu gostaria de saber, como eu faço para deixar os icons dos amigos meio que, opaco. E quando passa o mouse, ela fica na cor normal.
    Eu também queria saber como eu faço para mudar onde se adiciona os amigos, e como eu faço para que a parte direita do site fique parecia com a desse Style:
    http://3.bp.blogspot.com/-yS9P1fnS_s0/VC1XJ97jrlI/AAAAAAAACPM/sf8Y2ArhJgk/s1600/capture-20141002-104353.png
    Espero que você possa me ajudar <333

    ResponderExcluir
    Respostas
    1. (Devido às regras do blogger sobre os comentários, tive de separar sua resposta em partes ^^ Essa é a parte 1)

      Então, vamos por partes. Sobre o efeito que você quer: O efeito de opacidade, para que os icones das caixas à direita fiquem dessa maneira, basta colar abaixo do elemento .boxMenuDireito o seguinte código c:

      .boxMenuDireito img {
      opacity:0.75;
      -moz-opacity: 0.75;
      filter: alpha(opacity=75);
      -webkit-filter: opacity(0.75);
      }

      .boxMenuDireito img:hover {
      opacity:1;
      -moz-opacity: 1;
      filter: alpha(opacity=100);
      -webkit-filter: opacity(1);
      -webkit-transition: filter 0.6s;
      -moz-transition: filter 0.6s;
      }

      Sobre os botões: Abaixo do elemento #nav (ou qualquer derivado dele que você obtenha no seu style, como #nav a, #nav:hover e afins) você cola o seguinte código:

      #subnav .btn {
      color: #ZZZ!important;
      background-color:#XXX!important;
      background-image:-webkit-linear-gradient(top,#YYY,#XXX)!important;
      background-image: -moz-linear-gradient(top, #YYY, #XXX)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)!important;
      text-shadow: none!important;
      border-radius: 2px !important;
      }

      #meio .btn {
      color: #ZZZ!important;
      background-color:#XXX!important;
      background-image:-webkit-linear-gradient(top,#YYY,#XXX)!important;
      background-image: -moz-linear-gradient(top, #YYY, #XXX)!important;
      background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)"!important;
      background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYY, endColorstr=#XXX)!important;
      border-radius: 2px !important;
      text-shadow: none!important;
      }

      #subnav .btn, #meio .btn { color: #ZZZ!important; }

      Explicando um pouco o código:

      XXX muda a cor da parte de baixo do degradê, YYY muda a cor da parte de cima do degradê e ZZZ muda a cor da fonte.

      A parte:

      background-color:#XXX!important;

      Muda o hover do botão (cor do fundo quando passa o mouse) use a mesma cor que colocar em XXX pra que fique certo.

      Excluir
    2. (parte 2/2)

      Sobre o estilo das caixas que você enviou no print: Existe mais de uma maneira para deixar o título do menu direito assim, mas pelo que vejo na textura do background da fonte, acredito que a stylemaker tenha usado uma imagem. Como pode-se perceber esse é um style de fundoBase preto, certo? Se o que eu estou pensando for o correto, então você vai fazer o seguinte:

      Primeiro, escolha a cor das suas caixas do menu direito, feito isso, você vai criar a sua imagem (ou textura para o fundo), eu já criei uma imagem (como a do seu print, xadrez em tons de rosa) caso você queira eu vou deixa-lo aqui (http://i60.tinypic.com/2hr378j.png) (Para mudar a cor basta abrir a imagem em qualquer editor [photofiltre, photoshop, photoscape,...] e mexer na saturação/hue). Com a sua imagem pronta, você vai até o código do seu style e procura por ".boxMenuDireito .titulo", você vai encontrar o código abaixo (estou usando como referência o modelo original sem nenhuma edição versão v3):

      .boxMenuDireito .tituloMenuDireito {
      color:#D7575B;
      font-size:13px;
      }

      Para que o fundo fique como no print, adicione abaixo de "font-size:13px;" o seguinte código:

      background: url(http://i57.tinypic.com/o8fp13.png);

      (substitua a url dentro dos parenteses caso tenha mudado a cor ou algo assim na minha imagem)

      Para que a imagem se ajuste direitinho, vá até o elemento .boxMenuDireito .textoMenuDireito (logo abaixo .boxMenuDireito .tituloMenuDireito) e adicione antes do fechamento da chave ( } ) o código:

      border-radius:0px;

      Quanto a fonte, acredito que seja Times New Roman, tamanho 10, com na cor branca com sombra preta, em uppercase e letter-spacing de um pixel.

      Para deixar sua fonte assim procure novamente por .boxMenuDireito .tituloMenuDireito e no lugar de:

      color: #D7575B;
      fonte-size:13px;

      Cole:

      color: #fff;
      font-size: 8px;
      font-family: times new roman;
      text-transform: uppercase;
      text-shadow: 1px 1px 0px #000;
      letter-spacing:1px!important;
      margin-right:70px;

      (ajuste o número 70 até que o texto do título fique na posição desejada)

      Pronto! Você já tem o fundo e a fonte que você queria ^^. Caso você for editar a imagem lembre-se de deixar a parte sem a cor que você deseja transparente. Caso você não possua um editor que tenha o recurso de transparência, basta colorir aquela parte da imagem com a cor do fundo das suas caixas c: Se você precisar de qualquer outra coisa pode perguntar, meu anjo, eu sempre vou reponder sem problemas ok? (o v o *)

      Excluir
    3. Oh as imagens opacas e o Box Menu direito também ficou do modo como eu queria, com tudo, eu não consegui mudar em nada o botão onde se adiciona os amigos.
      Tirei print para você possa ver:
      http://1.bp.blogspot.com/-bTJBfRgyLMc/VC7F5hccebI/AAAAAAAACS4/RAXbhY9rGmI/s1600/capture-20141003-124928.png
      Mesmo assim, obrigada pela ajuda amor <333

      Excluir
  28. Anônimo10/02/2014

    OMG CONSEGUI FAZER MUITA COISA! OBRIGADA! <3 ♥
    Mas o que eu queria saber, é: Tem outro efeito para a "box menu direito" e eu queria saber qual é. :T
    Um que deixa a imagem mais "escura" e quando tu passa o mouse ela clareia. #morrecomessaminhaexplicação. _(._.')_
    Já rodei todos os blogs que eu achei explicando sobre css/styles tanto para o social quanto para outros sites e não achei isso... :T

    ResponderExcluir
    Respostas
    1. Mais escuras no sentido de cores mais fortes? Ou no sentido de saturação maior? Ai -q Se for no sentido de cores em tons mais fortes, eu sei de um código que talvez seja o que você procura. Abaixo do elemento .boxMenuDireto cole:

      .boxMenuDireito img {
      opacity: 1.75;
      -moz-opacity: 1.75;
      filter: alpha(opacity=1.75);
      -webkit-filter: opacity(1.75);
      }

      .boxMenuDireito img:hover {
      opacity: 0.75;
      -moz-opacity: 0.75;
      filter: alpha(opacity=75);
      -webkit-filter: opacity(0.75);
      -webkit-transition: filter 1s;
      -moz-transition: filter 1s;
      }

      (caso queira mudar o tempo de transição das cores mude os "1s" para o tempo desejado. Eu sugiro 0.6s c:)

      Excluir
    2. SEM OR, é esse mesmo! (~*-*)~ Depois de "tanto tempo" achei alguém que sabe! #felicidade.
      Obrigada mesmo, frô! *-*

      Excluir
  29. Moça Bad Angel, no lugar do código que te passei tenta esse aqui (no mesmo lugar)

    nav .btn {
    color: #AFAF9B!important;
    background-color:#D7EAE3!important;
    background-image:-webkit-linear-gradient(top,#DADFEB,#D7EAE3)!important;
    background-image: -moz-linear-gradient(top, #DADFEB, #D7EAE3)!important;
    background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#DADFEB, endColorstr=#D7EAE3)"!important;
    background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DADFEB, endColorstr=#D7EAE3)!important;
    text-shadow: none!important;
    border-radius: 0px !important;
    border: 1px solid #C4B7C6;
    }

    #meio .btn {
    color: #AFAF9B!important;
    background-color:#e9e9e9!important;
    background-image:-webkit-linear-gradient(top,#e9e9e9,#e9e9e9)!important;
    background-image: -moz-linear-gradient(top, #e9e9e9, #e9e9e9)!important;
    background-image:-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#e9e9e9)"!important;
    background-image:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#e9e9e9)!important;
    border-radius: 0px !important;
    text-shadow: none!important;
    }

    #nav .btn, #meio .btn { color: #AFAF9B!important; }

    Peguei ele pronto de um dos meus styles, aí as cores você vai mudadando, ou se quiser eu faço um modelinho simples pra você, só pedir ^^

    ResponderExcluir
  30. Anônimo10/13/2014

    Como eu mudo a cor das caixas? Tipo a de interesses, a do perfil...

    ResponderExcluir
    Respostas
    1. No código .boxMenuDireito, em background-color:, lembrando que a cor deve ser em código hexadecimal ou escrita em inglês c:

      Excluir
  31. Olá amor, aqui é a min novamente, então eu queria muito um código pra deixa todas as letras pequenas, eu já tentei de tudo e não consigo :(

    ResponderExcluir
    Respostas
    1. Hmmmm, tenta colocar dentro de "body {"

      text-transform: lowercase;

      Já tentou isso? Caso sim, já tentou colocar !important no final? (text-decoration: lowercase!important;).
      Pode colocar esse text-decoration em todos os elementos (todos os navs, boxes, enfim, tudo que você quiser que a letra fique pequena).
      Eu só conheço esses códigos para o texto ficar todo minúsculo. Você usa o google chrome? Porque dependendo do navegador existem muitos códigos que não funcionam (no IE por exemplo, a maioria dos códigos de css não funcionam, até mesmo no IE9).

      Excluir
    2. Olá desculpe a demora para responder sim eu uso o Chrome, teria algum problema? E irei tentar esses códigos, obrigada!

      Excluir
  32. Anônimo11/07/2014

    tenho uma duvida , eu fiz tudo certo e ate o momento to adorando o resultado do meu style , mas o problema é que a parte de Perfil/Amigos/Atualizações , não consigo modificar ela do jeito que eu quero , eu quero que ela fique igual a minha parte de animes e mangas/bandas e musicos , enfim não sei se você entendeu direto , por isso tirei print para ficar melhor , a parte da nav quando passo o mouse fica de outra cor , mudei font , tamanho tudo , enfim ficou assim static.tumblr.com/fgws1ak/mJqneox1d/1.png , só que eu nao estou conseguindo fazer nada na parte de amigos/atualizaçoes , nem mudar tamanho da fonte http://static.tumblr.com/fgws1ak/FWtneox05/sem_t__tulo-1.png tem como me ajudar ? não sei se você entendeu , espero que sim e que consiga me ajudar .

    ResponderExcluir
    Respostas
    1. Primeiramente: mil perdões pela demora DDD: Eu tinha feito uma comentário tofo bonitinho te explicando o que fazer tim tim por tim tim e quando publiquei a internet falhou (mais um lembrete de sempre dar ctrl + c nos comentários né ;u;). Enfim, você está alterando a parte "boxCouteudo .baixo a {" é essa parte que altera o elemento que você citou (aquele menuzinho de perfil, amigos, etc...). Sobre o tamanho da fonte, eu estou exatamente com o mesmo problema, acredita nesse inferno? Pois é, eu sim, mas uma ótima opção pra resolver essas coisas é ir tirar as suas dúvidas num grupo chamado styles, da Thayeon, ela é uma queridinha e vai te ensinar tudo bem direitinho (em outras palavras: eu não sei não lol desculpa)

      Excluir
  33. Kimmi preciso de sua ajuda, você tem conta no social, com certeza, tem como me adicionar? Preciso falar com você!
    Sou a @swag19styles

    ResponderExcluir
    Respostas
    1. Eu vou te adicionar sim, pode me mandar uma mensagem no livro de visitas ou inbox

      Excluir
  34. Ehhh eu aqui de novo to querendo desistir já :(
    Não esta do jeito que eu quero, simplesmente nn consigo deixar ele do jeito que quero não fica :(

    ResponderExcluir
    Respostas
    1. Moça eu .realmente. não sei o que pode ser isso, o spirit é meio bugadinho mesmo :c

      Excluir
  35. Amei o tutorial, consegui fazer vários styles com esse post, mas tipo, eu não consigo mudar a font da barra de Animes & Mangás || Bandas & Músicos e tals, e eu tentei usar o #nav a {, mas mesmo assim a fonte não muda, pode me ajudar?

    ~Castor || http://a-castor.blogspot.com.br/ || http://html-places.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Parece que todos andam tendo o mesmo problema, eu também não consegui arrumar isso. Vou fazer alguns modelos e ver se os códigos funcionam, mas não sei não hein .u.

      Excluir
  36. Oi, oi. Eu gostaria de saber como centralizar o boxconteudo. baixo. Como neste style: http://socialspirit.com.br/personalizar/style/barbara-palvin-barbara-palvin-2750096

    Por favor. Obrigada.

    ResponderExcluir
    Respostas
    1. Abaixo de .boxConteudo .baixo você adiciona #boxUsuario .baixo ul li a { text-align: center!important} c:

      Excluir
  37. Anônimo12/21/2014

    Oi, como faço pra cor da #base começar depois da barrinha onde fica "anime, bandas, cartoons..."? tipo a desse style aqui http://socialspirit.com.br/personalizar/style/meninas-super-poderosas-florzinha--meninas-super-poderosas-2752254

    ResponderExcluir
    Respostas
    1. O fundo do cimalogo você coloca da mesma cor que o fundo do style todo em si, aí a base você faz de 1000px de largura (e, caso já não esteja dessa forma, logo após a (url) da imagem, você coloca "repeat center top").
      Caso não funcione, crie um arquivo e 1000px de largura e 4000px de altura e coloque no lugar da base, alterando o "repeat center top" pra "no-repeat"

      Excluir
  38. Oi babe, há algum tempo atrás você me ajudou com várias coisas em referencia a Styles. Mas algumas coisas ainda me deixam confusa.
    Eu gostaria de saber, como eu faço pra deixar o Style todo quadradinho, sem nenhuma borda arredondada, como nesse Style ( http://socialspirit.com.br/personalizar/style/justin-bieber-tulipa-negra-2674261 )
    Na parte dos amigos, você pode perceber que há uma barra diferente e ela de move ao passar a seta.
    E como eu faço para deixar essa parte ( http://1.bp.blogspot.com/-2xXG4_uKalg/VKawowpUYwI/AAAAAAAADDQ/I9XrXQIMzDc/s1600/capture-20150102-124830.png ) assim: ( http://1.bp.blogspot.com/-_UWpo3JdYbE/VKawpDUt0QI/AAAAAAAADDU/TU3y-nLj1k8/s1600/capture-20150102-124940.png )
    Com todas as letras do mesmo jeito.
    Obrigada pela atenção desde já <333

    ResponderExcluir
  39. ~ Vindo incomodar de novo ~

    Então, eu perguntei da última vez como editar os links da #nav e eu finalmente consegui uhuu obg pela ajuda, mas tipo, agora eu quera saber como editar o menu do perfil, fanfics, styles e etc, que fica abaixo do quadro de informações do usuário, pode ajudar? Toda vez que eu vou postar o style, os links ficam grandes e isso estraga o style :/ já tentei colocar o !important; na frente dos códigos, mas não adianta :/

    @Castor

    ResponderExcluir
    Respostas
    1. O código correspondente desse menu no modelo do spirit é .boxConteudo .baixo {, mas como Deus sabe, por algum motivo do além, nem sempre funciona. Caso aconteça com você de suas configurações não funcionarem (geralmente o que dá problema é o tamanho da fonte), abaixo do código .boxConteudo .baixo { você cola #boxUsuario .baixo ul li a {, e dentro desse aí, é que você muda seu menu ♥ Não sei se ficou muito confuso, é que sou bem horrível pra explicar coisas

      Excluir
  40. Oi babe, há algum tempo atrás você me ajudou com várias coisas em referencia a Styles. Mas algumas coisas ainda me deixam confusa.
    Eu gostaria de saber, como eu faço pra deixar o Style todo quadradinho, sem nenhuma borda arredondada, como nesse Style ( http://socialspirit.com.br/personalizar/style/justin-bieber-tulipa-negra-2674261 )
    Na parte dos amigos, você pode perceber que há uma barra diferente e ela de move ao passar a seta.
    E como eu faço para deixar essa parte ( http://1.bp.blogspot.com/-2xXG4_uKalg/VKawowpUYwI/AAAAAAAADDQ/I9XrXQIMzDc/s1600/capture-20150102-124830.png ) assim: ( http://1.bp.blogspot.com/-_UWpo3JdYbE/VKawpDUt0QI/AAAAAAAADDU/TU3y-nLj1k8/s1600/capture-20150102-124940.png )
    Com todas as letras do mesmo jeito.
    Obrigada pela atenção desde já <333

    ResponderExcluir
    Respostas
    1. Em relação às bordas: Você só precisa adicionar border-radius: 0px; em todos os lugares que deseja que fiquem com pontas quadradas.
      Sobre o menu, esse é o código que o deixa exatamente como você pediu:

      .boxConteudo .baixo {
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 2px!important;
      font-family: arial;
      color: #fff!important;
      background-color: #111111;
      font-weight: bold;
      border-radius: 0px;
      }

      (eu não tenho muita certeza quanto ao font-weight, mas, caso a fonte fique com uma aparência em negrito, apenas apague a linha font-weight: bold; )

      Para deixar a fonte naquele tamanho é necessário, abaixo deste código acima, adicionar este aqui;

      #boxUsuario .baixo ul li a {
      font-size: 8px!important;
      }

      É isso aí, eu vi que você já tinha comentado, mas provavelmente alguma das moderadoras do site se enganou e postou um comentário de uma postagem minha (no caso o seu né eheh), por isso acabei não vendo, peço desculpas pelo descuido ♥

      Excluir
    2. Anônimo7/20/2015

      Nossa me ajudou e muito.
      Eu queria saber como colocar a barra principal igual.
      sorry não quero me intrometer.

      Excluir
  41. Olá! Eu adorei muito teu blog e também estou muito agradecida por postarem esse super tutorial. Eu sei que é bem difícil mas eu fico eternamente grata, assim que eu comecei a fazer meu primeiro style foi a partir deste tutorial.

    com certeza recomendaria esse blog para todas as minhas amigas da comunidade.

    <3

    ResponderExcluir
    Respostas
    1. Que amor ;u; eu tava um pouco desanimada com o blog, não sabendo o que postar, um comentário desses sempre anima, sério, muito muito obrigada ♥

      Excluir
  42. Olá, muito bom o tutorial, bem esclarecedor, mas tem uma coisa que eu não consigo de jeito nenhum: deixar a nav quadrada! As bordas ficam sempre arredondadas, você tem como me ajudar? Obrigada.<3

    ResponderExcluir
    Respostas
    1. Como assim? :cc Tenta colocar !important após o border-radius: 0 (border-radius:0px!important;) Faz muito tempo que não faço styles e pelo que eu soube o modelo mudou, eu realmente não sei ;;

      Excluir
  43. Hey, eu simplesmente amei essa explicação, consegui entender tudo perfeitamente e fazer Styles realmente não é um bicho de sete cabeças. Mas eu tenho uma pequena dúvida e, se não for incomodo, gostaria da sua ajuda com isso, porque faz muito tempo que estou tentando "concertar" porém nunca consigo!
    É o seguinte: Tem o fundoBase, certo? Já vi muitos e muitos styles lindíssimos onde esse fundoBase meio que "completa" o logo e fica certo no tamanho e sem qualquer repetições, como esse que estou usando por exemplo: http://socialspirit.com.br/prisonerannyp Eu queria muito conseguir fazer isso, mas sempre que coloco o fundoBase (o fiz baseado no tamanho do qual esta na pasta 'img" como disse) ele fica errado, repete e dá para ver as "linhas" entre eles, assim oh: http://i.imgur.com/67flDaO.png Sabe como arrumar isso? Preciso muito mesmo!
    Obrigada desde já, parabéns pelo blog e desculpa qualquer coisa ^^

    Bye, Swankisses <3

    ResponderExcluir
    Respostas
    1. Oláarr, então, primeiramente eu devia me desculpar pela super demora em te responder, não sei se você chegou a ir na página inicial do blog mas eu não posto há muito tempo (o blog fechou). Enfim, eu sabia fazer isso, mas pelo que eu soube os códigos mudaram com a atualização do site e eu não uso mais a versão do desktop (eu só entro no spirit pelo celular) então não sabia disso. Além do mais eu parei de fazer styles e mexer com html faz algum tempo, porque tive de me empenhar mais nos estudos e no trabalho. Mil desculpas mesmo :c mas se você quiser procurar alguém que possa te ajudar, eu recomendo que procure pela ladysharingan e seu grupo de styles.

      Excluir
  44. vc poderia fazer um tutorial com o novo css do animespirit?
    obrigada

    ResponderExcluir
  45. Adorei sua explicação, foi incrivel. Você me ajudou muito! *u*

    ResponderExcluir