23.5.13

Tutorial: Criando um Style para seu perfil do Animespirit (Parte 3)



       Parte 2 aqui  

       Oi oi galerinha! Como estão? Prontos para a próxima parte do Tutorial? Espero que sim, por que a partir daqui será necessário muita atenção para que não saia nada errado. Vamos lá!

       Abra o arquivo modelo da pasta Meu Style. Não se assuste, esses são os famosos códigos de HTML que irão te ajudar a criar um lindo perfil. :)

       Antes de começarmos, é importante você definir que cores irá usar em seu style. Por exemplo, se você fez o cimaLogo todo em tons amarelos, é claro que você não irá colocar um magenta nos links, títulos e afins, certo? Para te auxiliar nessa tarefa, abra o seu cimaLogo em seu programa de edição e use o conta-gotas para escolher as cores que lhe agradam. Vamos precisar do código dessas cores, então abra a janela Seletor de cores (clicando duas vezes aqui para abrir a janela) e escolha de três a quatro que lhe agradem, anotando os códigos de cada uma.

       Feito? Então vamos continuar. Primeiro, explicando a primeira parte dos códigos do seu CSS.

/* ####################################################################### */
/* 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: #B0E6FF 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:#008000;
}
#base {
background: url(img/fundoBase.jpg) repeat-y center top;
}

       A primeira parte que está em negrito são apenas os créditos do site. Aqui você não deve mexer em nada.

       Estilos do Site já diz tudo: Definindo os estilos do site. Body é o corpo do site, ou seja, todo o seu perfil. Nessa parte, iremos definir apenas a cor de fundo. Lembra-se das cores que usou no fundoDegrade? Você deve definir com a segunda cor que você usou nessa etapa, a inferior (que no meu caso, é aquele azul mais clarinho). Se você não usar a mesma cor, pode acontecer isso:



       Vamos prevenir para que isso não aconteça.
body {
background: #B0E6FF url(img/fundoSombra.jpg) repeat-Y center center;
       Background é o plano de fundo. Mude a parte destacada em negrito pelo código da cor que mencionei antes. Para isso, use o mesmo processo do conta-gotas. Apague a parte destacada em vermelho. Salve apertando CTRL+S no seu teclado e visualize o resultado. Tudo certo? Vamos para a próxima parte então.

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

       Essa é a parte do fundo degradê. Nessa etapa, você terá que hospedar sua imagem em um site e substituir a parte destacada em negrito pelo link da imagem (copie o direct link). Recomendo o tinypic ou o imgur. Após substituir o link, salve suas alterações e atualize a página.

       Extra: Para manter o fundo fixo, use o código fixed entre repeat-x e left, dessa forma:
background: url(img/fundoDegrade.jpg) repeat-X fixed left top;

       Seguindo...

 fieldset {
border: 1px solid #459055;
}
span, span a, .admin, .admin:hover, .ativo, .ativo:hover, .link {
        color:#008000;

       Fieldset é essa linha (em vermelho na imagem) que contorna a caixa de texto do seu Livro de Visitas. É importante mudá-la para que não fique com aquela cor verde padrão do Animespirit. Use uma das cores que você separou mais cedo e substitua a parte destacada em negrito. Outra coisa que pode ser alterada é a espessura da linha mudando o número antes de px e o tipo da linha, alterando o solid para dotted ou dashed. 

       Span e todos os outros itens são as cores dos links. Substitua o que está destacado em vermelho pela cor que desejar. Salve suas alterações e visualize a página. Vamos para a próxima parte.

#base {
background: url(img/fundoBase.jpg) repeat-y center top;
}

       Este é o fundoBase. Lembra de você ter salvo uma cópia do fundoBase em PNG? Hospede essa imagem no site e substitua a parte em negrito pelo link da imagem (o direct link). Salve e atualize a página.

       Próxima parte...
/* ####################################################################### */
/* Estilos da parte de Cima do Site                                        */
#cima #logo {
        height: 300px;
background: url(img/cimaLogo.jpg);
}
#nav {
border-top: 3px solid #747474;
background: #272727;
font: bold 12px arial;
}
#nav a {
        color: #59C95C;
}
#nav a:hover {
        background: #59C95C;
color: #fff;
}
#subnav {
        background: #FAF7F5;
}
#secaoNav  {
background: #FAF7F5;
        border:1px solid #EEE8E1;
}
#secaoNav, #secaoNav a {
        font-size: 12px;
color: #008000;
}

       Esses códigos se referem à essa parte do perfil.  Vamos começar a alterar.

#cima #logo {
        height: 300px;
background: url(img/cimaLogo.jpg);

       A parte em negrito você já mudou na parte 2 do tutorial, então não é necessário mudar novamente. Hospede seu cimaLogo. Substitua a parte destacada em vermelho pelo link da imagem que você hospedou. Salve as alterações e visualize a página.

#nav {
border-top: 3px solid #747474;
background: #272727;
font: bold 12px arial;
}
#nav a {
        color: #59C95C;
}

       A nav corresponde à essa parte do seu perfil. O border-top é aquela borda cinza em cima do menu.  Recomendo que deixe-a com 2px de espessura e use a mesma cor que usar no background, a cor do seu menu. Em nav a você mudará a cor da letra do seu menu. As partes em negrito são as que você deve substituir pelos códigos das cores.

#nav a:hover {
        background: #59C95C;
color: #fff;
}

       Passe o mouse pelo seu menu.  Esse efeito é chamado de hover, e é isso que vamos mudar aqui. Substitua as partes em negrito pelas cores que desejar. Recomendo que sejam as mesmas cores que usou no nav, alterando dessa forma:

#nav {
border-top: 3px solid #COR1;
background: #COR1;
font: bold 12px arial;
}
#nav a {
        color: #COR2;
}
#nav a:hover {
        background: #COR2;
color: #COR1;
}

       Continuando...

#subnav {
        background: #FAF7F5;

       Olha aqui a subnav. Aqui você só terá que mudar o background dela. Simples, né?

#secaoNav  {
background: #FAF7F5;
        border:1px solid #EEE8E1;
}
#secaoNav, #secaoNav a {
        font-size: 12px;
color: #008000;
}

       Esta é a secaoNav. Aqui você precisa substituir o que está em negrito pelo código das cores que deseja. Background  é o Plano de fundo (azul na imagem), border é a borda (vermelho na imagem) e color é a cor da letra (amarelo na imagem). Veja a diferença clicando aqui.

       Muito bem, para não ficar muito extenso e cansativo, vou encerrar essa parte do tutorial aqui. Espero que estejam gostando e entendendo. Dúvidas é só comentar aqui ou me contatar por e-mail.

Até mais!

19 comentários:

  1. Muitoooooo Obrigada salvo minha vida hahah ><

    ResponderExcluir
    Respostas
    1. De nada, querida. Fico feliz que tenha ajudado :D

      Excluir
  2. Como deixa a parte "AnimeSpirit > Comunidade > ..." de uma mesma cor?

    ResponderExcluir
    Respostas
    1. Procure por "#secaoNav, #secaoNav a {" no seu arquivo CSS. Substitua o código de "color" pelo código da cor que você deseja. Salve e confira se deu certo.

      Obrigada pela visita. :)

      Excluir
  3. Olá,
    estou montando meu style, porém, quando altero meu fundoBase, continua com aquelas barrinhas brancas... vc saberia me dizer o que está acontecendo?
    Obrigada por tudo, abraços!

    ResponderExcluir
    Respostas
    1. Olá Natália!
      Estou na dúvida do que pode ser. Pode me mandar um print do seu preview por e-mail? halemandatto@ymail.com

      bjo :*

      Excluir
    2. Enviei, obrigada msm!
      Beijos.

      Excluir
    3. no meu tbm está assim, eu preciso mt da ajuda, pq o meu style é preto e vermelho, e onde era para estar preto nas laterais continua o branco comum do modelo

      Excluir
    4. Olá, Erick! Em que formato você salvou a imagem do seu fundoBase? Se salvou em JPEG, é normal que fiquei com as bordas brancas, afinal o formato da imagem não permite transparência. Se você a salvou em PNG e já substituiu o link como eu expliquei nessa parte do tutorial e mesmo assim não funcionou, você pode ter apagado alguma parte do código sem ter percebido. Eu posso dar uma olhada para você, se quiser. :) Mande o arquivo do Style para meu e-mail (halemandatto@ymail.com) e eu confiro para você. :D

      bjo.

      Excluir
    5. é só pôr repet-y center top; no fundoBase, beijos

      Excluir
  4. Olá, eu tenho um problema, quando eu vou ver no modelo, está tudo certo, funcionando, mas quando eu coloco no site nada aparece, o que eu fiz de errado?

    ResponderExcluir
    Respostas
    1. Olá, senhor anônimo! :)

      Confira se você substituiu os backgrounds pelos links como eu disse nessa parte do tutorial (quando eu falo sobre o #fundo). Se ainda não funcionar, verifique se você não apagou algum código do CSS por engano. A falta de um ponto e vírgula faz muita muita diferença quando o assunto é CSS. Caso ainda não funcione, entre em contato comigo por e-mail e me mande seu CSS anexado para que eu possa ver onde está o erro.

      Espero ter ajudado :) Até mais!

      Excluir
  5. Não consigo acessar as outras partes de como fazer o Style....fala q só pode ver quem foi convidado <\3

    ResponderExcluir
    Respostas
    1. Poxa, sério? Eu deixei o blog como público, isso é bem estranho :( Talvez seja por eu ter mudado a url do blog. Tente acessá-los por este link: http://migre.me/j4qcA

      Espero ter ajudado. Até mais!

      Excluir
  6. Hey, eu fiz tudo direitinho(acho) o style saiu bom, legal, adorey!
    Mas tanto no perfil(para visualizar como estava ficando) e no meu perfil original estava sem cimaLogo!O que eu faço? Apaguei do site na hora, mas deixei tudo salvo no meu pc, me ajude

    ResponderExcluir
    Respostas
    1. Você provavelmente apagou alguma parte de seus códigos sem querer. Se faltar qualquer coisa, até mesmo as aspas (nesse caso, principalmente elas) o seu css não funciona. Dê uma revisada na parte do #cima #logo.

      Boa sorte!

      Excluir
  7. Eu realmente não entendi direito a parte da base. Quando eu coloco o nome da imagem, não aparece a sombra e quando eu deixo o fundobase fica com aquele negocio horrível das bordas. E também não entendi como é para colocor o fundoBasePNG e nem o direct link(também não sei o que é) , por favor me ajude.

    ResponderExcluir
    Respostas
    1. Veja se com essa postagem você consegue entender melhor: http://migre.me/s4lQC

      Acredito que nela está mais fácil de entender como fazer a parte do fundoBase. Se ainda tiver dúvidas, pode perguntar.

      Até mais!

      Excluir
  8. Obrigado mona, você está me ajudando muito. Tenho uma duvida: como faço para deixar a parte |Spirit > Membros > ~modelo| no cento?

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...