How to Create Wordpress Themes - Lesson 11 by ciccone85


More Info
									                     WordPress Theme Tutorials
                          How to Create Wordpress Themes?

Lesson #11: Widths and Floats
This lesson will cover how to set the width for each DIV (or invisible box) and how to arrange them.
It’ll also show you some work-arounds to get your theme to display right or look the same in both
Firefox and Internet Exlporer.

Before we start, open the following items: Xampp Control, theme folder, Firefox browser, Internet
Explorer browser, index.php, and style.css.

Step 1

The first thing you want to do is decide what’s going to be the overall width of your theme. We’ll use
750px (750 pixels); each 100-pixel is one inch. Your theme depends on the view specs of the majority
of your blog’s visitors. What you want to avoid is using a 900px theme for an audience that uses
mostly 800px by 600px resolutions, which means your 900px theme would expand 100 pixels beyond
their screens. That’s a no-no.

How do you limit the overall width to 750px anyway?
You need everything to sit within a 750px box or DIV. Everything includes: header, container, sidebar,
and footer.

Add: <div id=”wrapper”> after <body>
Add: </div> before </body>

Type the following in style.css:
margin: 0 auto 0 auto;
width: 750px;
text-align: left;

In CSS, speficially in style.css, the pound sign (#) is how you address a DIV with an id. The period is
how you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”>
then use .wrapper instead of #wrapper to address the wrapper DIV.

Save both the index.php and style.css files. Refresh the Firefox and Internet Explorer browsers (press
F5) to see the change.

Further explanations
        margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0 bottom
         margin, and left auto margin. For now, just remember that setting right and left margins to
         auto is centerting.
        width: 750px; is self-explanatory.
        text-align: left; is aligning the text to the left within the wrapper DIV because you will be
         changing body{ text-align: left;} to text-align: center;

Step 2

Go ahead and change text-align: left; within body{} to text-align: center;

Why? (I’m assuming you’re using Firefox and Internet Explorer 6). Your layout might look right to
you, but not to people using earlier versions of Internet Explorer. Remember setting right and left
margins to auto is centering? Well, that doesn’t work for all Internet Explorers so body{ text-align:
center; } is a fix for older IEs to center the wrapper DIV or box.

(By the way, the text sizes in Firefox and Internet Explorer are different right now. We’ll fix that later.)

Step 3

Make the Header float left with a 750px width:

float: left;
width: 750px;

Step 4

Make the Container float left with a 500px width:

float: left;
width: 500px;

Step 5

Make the Sidebar float left with a 240px width and a gray background: (10px is missing; I know.)

float: left;
width: 240px;
background: #eeeeee;
Notice, you did not use a pound sign to address the Sidebar DIV; you used a period. Also, remember
#ffffff is white? background: #eeeeee; is very light gray. You added a background color to the
Sidebar just to see the difference when you’ll add the remaining 10 pixels later.

Step 6

Make the Footer float left and clear both with a 750px width:

clear: both;
float: left;
width: 750px;

What’s the difference between the Header and Footer stylings? The answer is the presense of clear:
both; in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the
Sidebar or Container.

Save the style.css file. Refresh the browsers.

Step 7

Add the remaining 10 pixels to the Sidebar by using a margin. Now your sidebar style codes look like

float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;

Save file and refresh the browsers to see a 10-pixel space added to the left of the Sidebar.
margin: 0 0 0 10px; specifically means 0 top, 0 right, 0 bottom, 10px left. When size is 0, the px
suffix isn’t necessary.

Step 8 (Extra step)

This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break
your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of
the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet
Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox.

To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;

That’s the end of today’s lesson. If you have any question, feel free to ask me. I’m here to help, not
just to show you the ropes.

To top