Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the acf domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/u810915952/domains/romulobrasil.com/public_html/wp-includes/functions.php on line 6121
Tutorial Template Para WordPress (Parte III) – style.css - Rômulo Brasil

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

• Publicado em: junho 15, 2013

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:

 

img1

 

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:

 

img2

O arquivo final podem baixar nesse link.

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