Tutorial: Criando um Style para seu perfil do Animespirit | Social Spirit (Parte 4)

       Parte 3 aqui

       Oi oi pessoinhas! Vamos dar continuidade ao tutorial de como criar um Style para o perfil do Animespirit, agora finalizando com os códigos do CSS. Preparados?

/* ####################################################################### */
/* Estilos da parte de Baixo do Site                                       */
#baixo {
border-top: 5px solid #E9E9E9;
background-color: #EFEFEF;
color: #838383;
}
#baixo a {
color: #666666;
}

       Esse é é o rodapé do site, onde ficam algumas das informações do Animespirit. Se ainda tiverem dúvidas de que parte estou falando, basta clicar aqui.

       Border-top refere-se à borda do topo do rodapé. Aqui iremos definir a espessura da borda, o tipo e a cor. Aconselho a usar 3px de espessura. Background-color é a cor de fundo do rodapé e color a cor da fonte. Fique à vontade para escolher as cores, desde que elas combinem com o restante do seu style.

/* ####################################################################### */
/* Estilos do Menu Direito do Site                                         */
.boxMenuDireito {
color:#838383;
}
.boxMenuDireito .tituloMenuDireito {
        color:#008000;
        font-size:13px;
}
.boxMenuDireito .textoMenuDireito{
        border:1px solid #EEE8E1;
        background-color:#FAF7F5;
        color:#838383;
}

       Nessa parte você irá mudar os estilos do menu direito, onde fica a lista de amigos, grupos, interesses, links e pessoas que te observam. Aqui você já sabe o que cada comando faz, você só deve mudar as cores.  Font-size refere-se ao tamanho do letra. Sugiro que não mude, mas caso queira, não deixe menor que 11px. 

/* ####################################################################### */
/* Estilos que pertencem ao Conteúdo do Site                               */
#quote {
color: #000000;
background-color: #C0C0C0;
        border:1px solid #EEE8E1;
        font-size:13px;
}
.boxConteudo .titulo, .boxConteudo h1, .boxConteudo h2, .boxConteudo h1 a, .boxConteudo h2 a {
color: #008000;
        font-size: 13px;
}
.boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {
background-color: #FAF7F5;
color: #5D5D5D;
        border:1px solid #EEE8E1;
}
.boxConteudo .textoBg2, .boxConteudo tr.textoBg2 td {
background-color: #E9E9E9;
color: #5D5D5D;
        border:1px solid #EEE8E1;
}
.boxConteudo .baixo {
background-color: #FAF7F5;
color: #000;
        border:1px solid #EEE8E1;
}
.boxConteudo .baixo a {
        font-size: 13px;
}

       O termo quote significa citação. Em fóruns, significa que você está incluindo ou foi incluída em um trecho ou conversa. Aqui no Animespirit, são partes de outras mensagens que estejam sendo respondidas. Isso mesmo, o quote represente seu Livro de Visitas!

       Edite as cores conforme já ensinei. Caso queira bordas arredondadas, adicione o código destacado abaixo:

#quote {
color: #000000;
background-color: #C0C0C0;
        border:1px solid #EEE8E1;
        font-size:13px;
       border-radius: 7px;}

       Na próxima parte do código, você vai editar a cor dos títulos das divs do lado esquerdo do site, destacado pela cor vermelho na imagem abaixo.

.boxConteudo .titulo, .boxConteudo h1, .boxConteudo h2, .boxConteudo h1 a, .boxConteudo h2 a {
color: #008000;
        font-size: 13px;

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

       Aqui nós iremos editar a cor do Plano de Fundo das divs com suas informações pessoais e mais boa parte do seu perfil em background-color (cor laranja na imagem abaixo), a cor das letras em color e o tamanho, estilo e cor das bordas.

.boxConteudo .textoBg2, .boxConteudo tr.textoBg2 td {
background-color: #ffeb45;
color: #7f7b89;
        border:1px solid #EEE8E1;
}

Agora nós iremos editar a parte representada pela cor amarelo na imagem abaixo, repetindo o mesmo processo dos códigos anteriores.

.boxConteudo .baixo {
background-color: #FAF7F5;
color: #000;
        border:1px solid #EEE8E1;
}
.boxConteudo .baixo a {
        font-size: 13px;
}

       Essa parte do código é o menu abaixo das suas informações pessoais (verde na imagem). A diferença aqui é que color não mudará a cor da fonte, mas sim das "setinhas" dos menus (rosa na imagem). Faça a mesma coisa que no código anterior.

/* ####################################################################### */
/* Elementos Condensados                                                   */
a, body {
color: #000;
}

       E essa é a última parte do código. Aqui você irá mudar a cor da letra dos menus citados anteriormente. Aconselho a usar cores pouco chamativas.

       Mas esperem! Ainda não é hora de postar seu Style. É necessário mais algumas coisas antes disso, que direi na próxima parte do Tutorial. Por favor sejam pacientes, logo trago a quinta e última parte!

       Estão entendendo tudo? Ninguém comenta, ninguém discute... Não sei se estou fazendo um bom trabalho se não me disserem. Por favor, incentivem a blogueira aqui! Estou fazendo tudo isso aqui de graça, só quero um reconhecimento.

Até mais!

Parte 5