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

       Parte 2 aqui  

       Olá galerinha geek! 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!

Parte 4