Tema Para WordPress Parte 5: Final

Nosso tema está quase pronto. Hoje vamos adicionar um estilo básico, para que você possa modificar facilmente tudo o que quiser.

Abra seu arquivo style.css no editor de textos e adicione o código abaixo no final dele:

#blogname {font-family:Georgia,Times,serif;font-size:3em;text-transform:uppercase;line-height:1;margin-bottom:0.5em;margin-top:0.5em;}
#blogname a {color:#448;text-decoration:none;}
#blogname a:hover {color:#448;text-decoration:none;}
#description {font-size:1.5em;text-transform:uppercase;text-align:left;color:#442C20;margin-right:10px;margin-bottom:0.5em;}

Essé é o código responsável pelo estilo do nome do seu blog. Para alterar o tamanho da letra, vá testando valores no lugar do código em vermelho. A cor é determinada pelo código em azul. O tamanho da letra e cor da descrição são determinados pelos códigos em verde.

Para escolher cores, há bons sites que fazem isso de forma automática:

Color Schemer Online

Color Picker

Você também pode utilizar o Kuler, da Adobe. É necessário fazer um rápido registro, mas vale a pena. O site disponibiliza esquemas prontos de cores, em uma infinidade de estilos. É praticamente impossível não achar algo legal por lá. Você também pode baixar o programa e utilizá-lo offline. (Dica da Jess, em off).

Vamos agora estilizar a aparência dos links. Todo e qualquer link que não tiver uma classe ou id específica vai utilizar esse estilo:

a {color:#448;text-decoration:underline;}
a:hover {color:#448;text-decoration:none;}

Títulos sublinhados não têm uma aparência muito boa, então vamos nos livrar disso nas tags h2:

h2 a {color:#448;text-decoration:none;}
h2 a:hover {color:#448;text-decoration:none;}

Crie algumas categorias para seus posts de teste, se ainda não o fez, e adicione widgets às barras laterais para exibir as mesmas. Adicione também uma widget de postagens recentes (ou recent posts). Clique em update e visualize seu blog.

Todos os links, com exceção do nome do seu blog, devem aparecer sublinhados.

Precisamos de uma fonte maior para os títulos, então vamos adicionar o código abaixo:

h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#448;}
h1 {font-size:2em;margin-bottom:0.75em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h2.sidebar {font-size:1em !important;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

Nossos posts precisam de estilo também:

.post{margin:0 0 10px;text-align:left;}
.posttitle {color:#448;font-family:helvetica,arial,sans-serif;line-height:1.0;margin-top:10px;}
.posttitle a {color:#442C20;text-decoration:none;}
.posttitle a:hover {color:#448;text-decoration:none;}
.entry p {font-size:1.05em;line-height:1.4em;}
.entry a {color:#448;text-decoration:underline;}
.entry a:hover {color:#448;text-decoration:none;}
.entry li ul,.entry li ol {margin:0 1.5em;}
.entry ul,.entry ol {margin:0 1.5em 1.5em 4em;}
.entry ul {list-style-type:disc;}
.entry ol {list-style-type:decimal;}
p {margin:0 0 1.5em;}
pre {font-family: Consolas, Monaco, "Courier New", Courier, monospace;width:451px;height:auto;   background: #f5f5f5;border: 1px solid #dadada;padding: 11px;font-size: 11px;line-height: 1.3em;overflow: auto;}
code {font-family: Consolas, Monaco, "Courier New", Courier, monospace;height:auto;font-size:1.0em;
color: #008099;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#fbfbfb;padding-top:4px;margin-bottom:15px;}
.wp-caption img{margin:0;padding:0;border:0 none;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;}

O rodapé dos posts:

.postmetadata {color:#999;}
.postmetadata a {color:#448;text-decoration:none;}
.postmetadata a:hover {color:#999;text-decoration:none;}

A navegação:

.navigation{display:block;text-align:center;margin-top:10px;margin-bottom:60px;}
.alignright{float:right;}
.alignleft{float:left;}

Os comentários:

.commentlist li,#commentform input,#commentform textarea{font:0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.commentlist li{font-weight:bold;margin:15px 0 3px 3em;padding:5px 10px 3px;}
.commentlist li .avatar{float:right;border:1px solid #eee;padding:2px;background:#fff;}
.commentlist cite,.commentlist cite a{font-weight:bold;font-style:normal;font-size:1.1em;}
.commentlist p{font-weight:normal;line-height:1.5em;text-transform:none;margin:10px 5px 10px 0;}
#commentform p{font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;margin:5px 0;}
.commentmetadata{font-weight:normal;margin:0;display:block;}
h3.comments{padding:0;margin:40px auto 20px !important;}
h2.comments{padding:0;margin:40px auto 20px;}
#commentform input{width:170px;padding:2px;margin:5px 5px 1px 0;}
#commentform textarea{width:90%;padding:2px;}
#commentform #submit{margin:0;float:left;}
.commentlist{padding:0;text-align:left;}
.commentlist li a{color:#448;text-decoration:none;font-weight:bold;}
.commentlist li a:hover {color:#999;text-decoration:none;font-weight:bold;}
.nocomments{text-align:center;margin:0;padding:0;}
.alt {background:#fbfbfb;border:1px solid #fcfcfc;}

As barras laterais:

.rsidebar h2,.lsidebar h2 {text-align:left;font-family:helvetica, arial,sans-serif;font-size:14px!important;font-weight:bold;text-transform:none;color:#442C20;}
.lsidebar ul,.rsidebar ul {margin: 0;padding: 5px 0 15px 0;color: #666;}
.lsidebar li,.rsidebar li {padding: 5px 0px;font-size: 11px;text-transform: uppercase;color: #999;font-family: helvetica,arial,sans-serif;line-height: 1.8;border-bottom: 1px solid #eee;list-style-type:none;}
.lsidebar li a,.rsidebar li a {color: #448;text-decoration: none;font-weight: bold;}
.lsidebar li a:hover,.rsidebar li a:hover {color: #999;}

Imagens:

img {border:none;}
img.alignleft, div.alignleft {float:left;margin:0 0.5em 0.5em 0;}
img.alignright, div.alignright {float:right;margin:0 0 0.5em 0.5em;}
img.aligncentered, div.aligncentered {text-align:center;margin:0 auto;}
img.wp-smiley{float:none !important;margin:0 !important;padding:0 !important;border:none !important;}

Blockquote:

blockquote {margin: 15px 30px 0 10px;padding-left: 20px;padding-right: 20px;color:#666; }

Rodapé:

.footer {color:#999;background:#fff;text-align:center;font-size:11px;}
.footer a {color:#999;text-decoration:none;}
.footer a:hover {color:#442c20;text-decoration:none;}

Vamos adicionar uma cor de fundo diferente:

Abra o arquivo reset-fonts-grids.css e localize o código abaixo, logo no início:

html {color:#000;background:#FFFFFF;}

Altere a cor em background para uma cor escura, #333 ou #000.

Adicione o código abaixo ao seu arquivo style.css:

.wrapper {background:#fff;margin:10px auto; padding:10px;width:974px;}

No seu arquivo header.php, localize a tag <body> e troque por <body class="wrapper"> .

Valide seu código e corrija os possíveis erros, como já vimos antes. À princípio não há nenhum, mas sempre é bom conferir. Visualize seu blog de testes no Internet Explorer 6 e no 7, para garantir que não há diferenças ou erros na visualização.

Se você não sabe como ter as duas versões do IE no mesmo computador, leia esse artigo.