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á.