Create WordPress Themes from scratch Part IV. CSS touch
By now I have writen some articles how to cretae wordpress themes step by step. Now the time to add CSS stuff. This is my favorite part when creating wordpress themes. Open style.css from my previous article and take a look for while.
Grab favorite colour template
It is important to make our color consistent. We do need a lot of color for now. Remember this is simple wordpress themes. To much colour sometime make our design look freaks, except you have good intuition for manage color.
So, what is your favorite colour?. I grab the colour pallete from colourlovers.
Before we give css touch, we need to modify our layout on index.php. Because I want header and footer fit to the screen wide. And keep main content 960px;. Lets modify and remove unnecessary stuff.
Remove header element and menu element from container element, placing between <div id=”main”> element.
before
<div id="main">
<div class="container">
<div id="header" class="container">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<div id="menu" class="top">
<ul>
<?php wp_list_pages('sort_column=menu_order&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;title_li='); ?>
</ul>
</div>
</div>
after
<div id="main">
<div id="header">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
</div>
<ul id="menu">
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
step 2
add <h3> element to each sidebar title.
<h3>before</h3>
<?php _e('Categories'); ?>
after
<h3><?php _e('Categories'); ?></h3>
Remove <div style=”clear:both”></div> element. We dont need this animore, we will placing all css on style.css , not inside the html.
step 3 add page title
add page title between <head> element
before
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
after
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>
Reset the CSS.
Create reset CSS bellow. Its used to remove unwanted padding, margin and border on each element. We also initialize each element.
/*reset*/
*{
margin: 0;
padding: 0;
border:0;
outline:0
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}
img{
border:none;
}
ul, ol
{
list-style: none;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/*end of reset*/
Initilaize body style
body{
background:#353634;
font: 75% "Lucida Grande", Lucida, Verdana, sans-serif;
position: relative;
color:#2b2b2b;
}
Logo
#logo{
width:250px;
height:50px;
margin-left:100px;
}
#logo h1{
font-size:200%;
}
Header
/*header*/
#header{
padding-top:20px;
position:relative;
height:70px;
border-bottom: 1px solid #121212;
background:#2B2B2B;
}
Menu
#menu{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
background:#e6324b;
line-height:30px;
margin-bottom:10px;
padding-left:160px;
border-top: 1px solid #f2e3c6;
border-bottom: 1px solid #121212;
}
#menu li a{
font-size:1.2em;
padding-top:2px;
}
#menu li a:hover{
font-size:1.2em;
padding-top:2px;
text-decoration:none;
color:#121212;
}
Sidebar
/*sidebar*/
#sidebar{
position:relative;
padding:10px;
float: right;
width: 280px;
margin-left: 5px;
background:#f2e3c6;
border: 1px solid #121212;
}
#sidebar ul{
background:#ffc6a5;
padding:2px;
}
Content
/*sidebar*/
#sidebar{
position:relative;
padding:10px;
float: right;
width: 280px;
margin-left: 5px;
background:#f2e3c6;
border: 1px solid #121212;
}
#sidebar ul{
background:#ffc6a5;
padding:2px;
}
comment template
/*comment*/
#comment{
width:400px;
}
.commentlist p{
background:#ffffff;
padding:10px;
}
#commentform input,textarea{
border:1px solid #3f3635;
}
#commentform p{
margin:5px 0 5px 0;
}
#submit{
background-color:#2b2b2b;
color:#fff;
font-weight:bold;
font-size:75%;
padding:4p
footer
*footer*/
#footer{
position:relative;
color:#fff;
min-height:125px;
clear:both;
margin-top:10px;
background:#2B2B2B;
border-top: 1px solid #121212;
}
#footer small{
color:#ccc;
}
.footer_column {
margin-top:20px;
float:left;
width:120px;
margin-right:30px;
}
#footer .long {
width:400px;
}
#footer h3 {
text-transform:uppercase;
font-size:10px;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
}
.footer_column ul li a,#footer h3 a{
color:#e6324b;
}
Final css
/*
Theme Name: simplethemes
Theme URI: http://blogfreak.com/
Description: Clean WordPress Themes
Version: 1.0
Author: Mufti Ali
Author URI: http://www.mupet.net/
*/
/*reset*/
*{
margin: 0;
padding: 0;
border:0;
outline:0
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}
img{
border:none;
}
ul, ol
{
list-style: none;
}
a
{
color:#fff;
text-decoration: none;
}
a:hover
{
color:#e6324b;
text-decoration: underline;
}
/*end of reset*/
body{
background:#353634;
font: 75% "Lucida Grande", Lucida, Verdana, sans-serif;
position: relative;
color:#2b2b2b;
}
h1{
font-size:300%;;
}
h2{
font-size:180%;
}
h3{
font-size:140%;
}
/*contaner*/
.container{
width: 960px;
margin: 0 auto;
}
#logo{
width:250px;
height:50px;
margin-left:100px;
}
#logo h1{
font-size:200%;
}
/*header*/
#header{
padding-top:20px;
position:relative;
height:70px;
border-bottom: 1px solid #121212;
background:#2B2B2B;
}
#menu{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
background:#e6324b;
line-height:30px;
margin-bottom:10px;
padding-left:160px;
border-top: 1px solid #f2e3c6;
border-bottom: 1px solid #121212;
}
#menu li a{
font-size:1.2em;
padding-top:2px;
}
#menu li a:hover{
font-size:1.2em;
padding-top:2px;
text-decoration:none;
color:#121212;
}
/*sidebar*/
#sidebar{
position:relative;
padding:10px;
float: right;
width: 280px;
margin-left: 5px;
background:#f2e3c6;
border: 1px solid #121212;
}
#sidebar ul{
background:#ffc6a5;
padding:2px;
}
/*content*/
#content{
position: relative;
float: left;
width: 600px;
padding:20px;
min-height:400px;
background:#f2e3c6;
border: 1px solid #121212;
}
/*post*/
.post{
margin-bottom:20px;
}
.post h2{
background:#2B2B2B;
padding:4px 8px;
}
.postDate{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:75%;
background:#353634;
color:#FEFEEB;
padding:5px;
margin-bottom:20px;
clear:both;
}
.entry{
background:#ffc6a5;
padding:10px;
margin-top:10px;
}
.entry P img{
clear:both;
background:#f2e3c6;
align:center;
}
/*comment*/
#comment{
width:400px;
}
.commentlist p{
background:#ffffff;
padding:10px;
}
#commentform input,textarea{
border:1px solid #3f3635;
}
#commentform p{
margin:5px 0 5px 0;
}
#submit{
background-color:#2b2b2b;
color:#fff;
font-weight:bold;
font-size:75%;
padding:4px;
}
/*footer*/
#footer{
position:relative;
color:#fff;
min-height:125px;
clear:both;
margin-top:10px;
background:#2B2B2B;
border-top: 1px solid #121212;
}
#footer small{
color:#ccc;
}
.footer_column {
margin-top:20px;
float:left;
width:120px;
margin-right:30px;
}
#footer .long {
width:400px;
}
#footer h3 {
text-transform:uppercase;
font-size:10px;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
}
.footer_column ul li a,#footer h3 a{
color:#e6324b;
}
0
464
