Tutorial Template Para WordPress (Parte III) – style.css

style.css

Nessa terceira parte do tutorial termos a nossa maquiagem do nosso template e nesse caso espero que todos tenha algum conhecimento  em CSS para melhor entendimento e no caso podem modificar a vontade os estilos aplicado no nosso arquivo style que começaremos a seguir:

Primeiro Passo:

Primeiramente abra o arquivo style.css, caso não tenha cria e dê nome de style.css, e comece com o seguinte comentário que na verdade é as informações de todo o seu tema que será exibido no dashboard do wordpress.  

[code lang=”css”]
/*
Theme Name: TemaWP // Aqui você coloca o nome que escolher para seu tema.
Theme URI: http://www.romulobrasil.com // URL do seu site, escreve URI mesmo.
Description: Um tema para WordPress // Descrição do seu site
Author: Rômulo Brasil // Seu Nome
Author URI: http://www.romulobrasil.com // URL Do site do Autor.
*/
[/code]

Agora voce terá que fazer uma imagem do tamanho 300 X 225 com o nome screenshot.png e tem que ser com a extensão .png e salve na raiz do nosso tema para ficar mais profissional nosso tema ;). No meu caso o resultado ficou assim:

Abaixo tem o código que deverá completar seu arquivo css:

[code lang=”css”]
* {
margin: 0;
padding: 0;
}
body {
background:#f4f4f4;

font-size: 13px;
color:#363636;
}

#corpo {
margin:20px auto;
width:960px;
border: 5px solid #cecece;
border-radius: 20px;
background:#fff;
}

body > section > header {
width:940px;
margin:10px;
float:left;
}

body > section > header h1 {
font-size:24px;
margin: 20px 0 10px 20px;
}

body > section > header h2 {
font-size:18px;
margin-left: 20px;
margin-bottom: 20px;
}

#menu {
width:940px;
}

#menu ul {
background: #3752ca;
width: 900px;
height: 40px;
border: 2px solid black;
border-radius: 10px;
padding-left: 20px;
margin: 0 auto;
}

#menu ul li {
display:inline;
margin-right:30px;
}

#menu ul li a {
text-decoration: none;
color: #FFF;
font-size: 15px;
text-align: center;
line-height: 40px;
}

#menu ul li a:hover {
color: #cecece;
}

#conteudo {
width:940px;
margin:20px;
float:left;
}

#artigos {
width:630px;
float:left;
}

.artigo {
width:630px;
margin-bottom:30px;
float:left;
}

.artigo h1 {
font-size:20px;
margin-bottom:10px;
}

.artigo h2 {
font-size:16px;
margin-bottom:10px;
}

.artigo p {
margin-bottom:10px;
}

#sidebar {
width:300px;
float:right;
}

.widget {
width:300px;
margin-bottom:20px;
}

.widget h3 {
font-size:14px;
margin-bottom:10px;
}

footer {
width:940px;
margin:20px;
padding-bottom: 10px;
}

footer p {
font-size:11px;
text-align:center;
}
[/code]

O resultado final fica assim:

O arquivo final podem baixar nesse link.

No próximo veremos header. Até lá.