WordPress Working with CSS
• How to change your worpress themes
using wordpress and CSS style sheets
Wordpress and CSS

Don’t Get Scared
1. Set up a test blog
2. Load a theme
3. Get Ready to be amazed

Get A Color Picker
A color picker will help you
a lot in finding just the
right color for your themes
text etc.
www.tucows.com/preview/240092

How to Find your CSS Stylesheet
1. Log into your Wordpress
2. Go to Presentation
3. Navigate to Theme Editor
4. Click on Stylesheet

What does it look Like
body {
background: #E0E0E0;
color: #000000;
font-size: 13px;
font-family: Arial, Verdana,
Sans-Serif;
margin: 0px 0px 0px 0px;
}

Change and check
• Use the color checker to find the color you
want then substitute in your css and you
have change the color.
• If you want your default text a little bigger
change the font-size: 13px to maybe 14px

Change and check
• Save and open up a new tab in your
browser and see what the changes have
done to your blog
• When you make changes just hit the
refresh in your browser to see the changes.

Header Graphic
#header {
width: 860px;
height: 190px;
background: #2397E9 url(images/header.jpg) top center no-repeat;
padding: 0px;
margin: 0px;
text-align: left;
border: 1px solid #E0E0E0;
border-bottom: none;.

Content pane can be easily changed.
#content {
Change the size of the
display: block;
content main window
background: #ffffff;
width: 540px;
but be sure to also
margin-top: 20px;
change the size of your
margin-bottom: 20px;
margin-left: 30px;
side bar width if you
margin-right: 30px;
float: left; make the main content
position:relative;
window bigger.
padding: 0px;
}

Sidebar pane can be easily changed.
#sidebar {
Change the size of the
display: block;
sidebar and you can
color: #000000;
width: 200px;
also adjust the padding,
float: right;
margins etc.
position:relative;
margin: 10px 10px 10px 0px;
padding: 10px 10px 10px
As you can see it is just
10px;
text-align: left; a bit of testing to see
border: 1px solid #cccccc;
what they all do.
}

Opps I made a BOO BOO.
Don’t get distraught
Just upload your CSS.php file from your template
files and it will all go back to the original settings.
When you happy with your changes create a new
folder and download all your theme changes for
you next install.

Play and Learn
As you get more used to changing the
different facets you will find it a lot of fun.
You can always use CTRL + F to find
anything you want.

Have Fun
Come Visit us at
www.bloggingempires.com
For more great tutorials