meinterest

oday I will talk about how to style your theme. As I said before CSS is very important to style your wordpress theme. So start by open xampp control, your theme folder and firefox. I always prefer testing my work on firefox, it is the best for web developers.

 

Here we go…

 

Step *1: open style.css file, add this code and save.

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:no-close-quote;

content:no-open-quote;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

}

Now, what is this?

 

This is called a master stylesheet, it used to reset the default browsers styling to make your website more compatible with many browsers. It is so useful to reduce bugs in your website and make it looks fine.

 

Step *2: now you should decide what your website’s width should be. your theme width is important because it will determine how your website will look like in many resolutions, the older concept is 600 px*800 px is the default resolution. But nowadays I think 1024 px* 768 px is the default since so many users using this resolution and higher. So, I usually use a width between 700 px-900 px depending on my theme. I will choose 750 px, this time.

 

Type the following code in style.css file and save.

#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

This CSS code means the following:

 

#wrapper I make an ID DIV (therefore I used #) named it wrapper and I will put everything of my site in it header, posts, footer, sidebar.

 

{….} is only to begin and end  the CSS properties

 

margin: 0 auto 0 auto; means 0 top margin, auto right margin, 0 bottom margin, and left auto margin.

 

width: 750px; here I set the width property to 750 px.

 

text-align: left; here I set the text-align to left.

 

Step *3: add this code to body {..}and save.

body{
text-align: center;
 }

I add this to body tag to fix the text alignment for older internet explorer to center the wrapper DIV.

 

Step *4: type this code in style.css file and save.

#header{
float: left;
width: 750px;
}

This code creates an ID DIV for header, and make it floats left with a 750px width.

 

Step *5: type this code in style.css file and save.

#container{
float: left;
width: 500px;
}

This code creates an ID DIV for container, and make it floats left with a 500px width.

 

Step *6: type this code in style.css file and save.

.sidebar{
float: left;
width: 240px;
background: #ffffff;
margin: 0 0 0 10px;
display: inline;
}

This code create an CLASS DIV for sidebar, and make it floats left with a 240px width and a white background. the margin property, add 10 px to the left of sidebar and  means 0 top, 0 right, 0 bottom, 10px left. The display inline property used to fix the double margin bug in internet explorer.

 

Step *7: type this code in style.css file and save.

#footer{
clear: both;
float: left;
width: 750px;
}

This code create an ID DIV for footer, and make it floats left and clear both with a 750px width. The clear property is used to make sure that the footer doesn’t attach itself to anything in your website, like the Sidebar or Container.

 
That’s all for today…seeya next week…

 

Filed under: coding, design