Languages: English • Português do Brasil • 中文(简体) • (Add your language)
With the introduction of the new Themes in WordPress v1.5, boring and commonplace website layouts became a thing of the past. With a few clicks, you can change your layout instantly. With a few more clicks and tweaks, you can screw up your layout instantly as well. Welcome to the exciting world of web page design.
When you encounter a screw-up in your layout, many people come running to the WordPress Forums. While the willing volunteers can do what they can to help you, there are some steps you can take to get to the solution, or at least a better idea of where the problem may lie, before you get to the Forums. A solid reference is CSS Coding Standards, part of the Core Contributor Handbook set.
It is the goal of this article to help you solve your layout design problems within the CSS file, not within the HTML or PHP files. For help on modifying those, check out Using Themes for more information.
Before beginning any of these problem-solving tips and techniques, be sure and backup your data just in case. Also, backup the files you are working on as you try different things so you have some places to go back along the way.
If you have the means, it is much quicker and safer to do your CSS testing and troubleshooting "on the fly" using (e.g.) Jesse Ruderman's Edit Styles bookmarklet or the Edit CSS extension for Firefox. When you're done making changes, copy your new (edited) code into the appropriate Wordpress theme files (after you back them up).
The Web Developer extension for Firefox can help, too.
If you are new to CSS and web page design, start with a visit to WordPress' CSS Tips, Techniques and Resources to find information on the basics of CSS and possibly answer some of your questions. At the least, you will get a basic overview of what CSS is, the impact it has on the HTML or structure of your page, and learn some jargon to help you ask a more informed question on the forums.
You will also need to know some basic terminology to help you express your problem to others. This isn't a how-to-CSS guide but more of a "what is thingamahjig called" guide.
CSS (Cascading Style Sheets) are bits of code that influence the presentation or the look of your page's HTML code. In WordPress, the CSS styles are generally found in a file called style.css in the specific Theme folder you are using. The HTML code and CSS references that hold the structure of your page are generally found in the index.php file in your Theme folder.
The PHP files are found within your Theme folder and contain the code and references which generate your HTML page. It is here, in the final run, that you may make changes to the specific CSS selector tags, not your HTML page. For help on modifying those, check out Using Themes for more information.
CSS selectors (names) are generally grouped into three specific references: The ID, CLASS, and HTML tags.
The ID is a reference to a specific unique area on your web page. It is generally seen represented on your HTML web page as an enclosed DIV (division) block:
<div id="header">Title of the Page</div>
#header { position: relative; margin:0; padding:0;
height:100px; width: 100%; background: red;
color: white;}
The CLASS is a reference to any element on a page that needs to look a specific way when this reference is used. For example, if you frequently want to highlight a word or two within your text (we'll use red as a highlight color in this instance), you might have a CLASS selector in your style sheet like this:
.hilite { color: red}
...this is some text about something I want <span class="hilite">in red</span>. And some more rambling here...
If you want to "design" a specific HTML tag reference, such as a blockquote, the code within the web page may look like this:
<blockquote>This is a pithy and brilliant quote that I knew you would enjoy.</blockquote>
blockquote { position: relative; margin: 10px 50px 10px 50px;
padding:5px; font-style:italic;
border-left:solid blue 4px; }
For information on modifying ID, CLASS, and HTML, check out the resources at WordPress' CSS Tips, Techniques and Resources.
Important note! Certain themes have their CSS styles in more than once place, the Kubrick theme being one of them. If, after changing CSS attributes in a CSS file, you don't see the results you wish, it's possible your theme choice has some embedded CSS in one of the PHP files (usually a header file) and the embedded CSS styles are overriding the linked or imported CSS stylesheet.
In order to determine what is going right or wrong with your web page layout, you have to go to the source. This means looking under the hood.
Under the pretty hood of your web page, the nice layout you see on your Internet browser, is a whole bunch of code with strange and foreign sounding references. At first glance, it's like looking under the hood of a racing car. You know that all of that junk makes the car go, but what the heck is all that mess under the hood?
Viewing HTML
Viewing CSS
<link rel="stylesheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
http://www.yoursite.com/wordpress/wp-content/themes/default/style.css
In WordPress, PHP is used to actually generate the HTML page. This is often complex and confusing code. To view the HTML, view a generated page, such as a sample post. To make changes in the HTML structure and CSS references, you will need to modify the appropriate PHP file. The Codex page on using themes has more information on how to view your Theme Templates and find out which Template is associated with which section on your page.
The problem-solving techniques herein describe how to change the CSS to influence the layout of the page. To make actual changes to the Themes, check out Theme Development.
Once you have lifted the hood to see the HTML and CSS, it is time to start playing Sherlock Holmes. To start, you have to know what you are looking at and where to find the basic elements to help you find the culprit.
The HTML page features all the structural code that sets up the "grid" into which your page sits. Think of it as a map with notes written all over it. The notes are actually pointers to the directions which are found within the CSS file.
Scroll down past a lot of <link rel='archives'... information until you see <body>. Below this will be the layout "body" of your web page. From here on, every bit of information is critical to the structure and design of your page.
As you scroll through it, look for identifying ID and CLASS statements. For example, you may see the following:
<div id="page"> <div id="header"> <h1>My WordPress Site</h1> <div id="headerimg"> </div> <div class="description">by Me and Only Me</div> </div> <div id="content" class="widecolumn"> <div class="post">
This may look confusing, but it is basically setting up sections with your content in it.
It begins with the division called "page" which sets up the look of the entire page. If you look in the CSS file for #page selector, you will see the presentation styles associated with it. It is followed by the header division which includes a heading (H1) with the title of your site. This particular layout is based upon the default Theme for WordPress v1.5 called Kubrick which includes an image in the header, set by the "headerimg" division. After that comes a division with a CLASS reference called "description" which is the place you have a subtitle or description of your site. Again, look in your CSS to find .description to find out how that area is styled.
The next two tags close the header (</div>) and then begins the division ID of "content" which also features a CLASS called "widecolumn", followed by another CLASS called "post". The "content" and "widecolumn" layout the overall look of the containers holding your "post".
This is an example of the parent/child relationship. And, as you will see in the next section, this is one of the major places where CSS layout problems begin!
One of the biggest problems in designing web pages is understanding where a problem occurs and whose influence might be affecting the problem. This is called the "parent/child relationship" of CSS. As you know, while parents usually have their children's best intentions at heart, children often feel intimidated and screwed up by their parents, so understanding this relationship may help you solve your problems.
A WordPress user posted a question on the forum complaining that she wanted her page to feature her header spreading fully across the page's width with the content centered on the page with a lot of space on the left and right sides. She's been poking around with the margins in her header to no avail and turned to us for help.
<div id="page"> <div id="header">Header Title</div> <div id="content"> <div class="post">Post babble here...</div>
The CSS attributes for the margins in this example are:
#page { margin-top:5px; margin-right: 100px;
margin-bottom: 5px; margin-left:100px; }
#header { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 20px;
margin-bottom: 5px; margin-left:20px; }
.post { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }
Playing detective with her codes, we found that changing the margins on the header weren't working because they were being influenced by the page margins to begin with. This is where the parent/child relationship shows up. The parent page was telling the child header what to do and it wanted to do something else.
If we changed the right and left margins of page, it eliminated the margin problems for the header. But we've created another problem. The parent page continues its influence and now all of the content is spread across the whole page width. A change needed to also happen with the left and right margins of the content so the wide margins are back in place. To make the whole family happy, the new margins looked like this:
#page { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }
#header { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 100px;
margin-bottom: 5px; margin-left:100px; }
.post { margin-top:5px; margin-right: 5px;
margin-bottom: 5px; margin-left:5px; }
Identifying the parent/child relation influences over your web page layout helps to solve a lot of problems, but sometimes the relationships are so complex, it's hard to figure out which section is which and who has influence over which parts.
To isolate and identify your various CSS sections, divisions, and classes, here are some simple tricks. Before you begin, be sure and make a backup of all of your main files including your CSS to make sure you have something to recover from if this gets out of control.
Once you have identified the culprit and fixed it, make sure you remove these testing features so your web page will look "normal" again.
Once you have identified the various sections or divisions within your HTML page, go into your CSS file and add the following attribute to the various divisions:
border:solid 1px color
Where the word color is, put a different color name in place for each section.
For example:
#page { margin:5px; padding:0; border: solid 1px red; }
#header { margin: 10px; padding: 5px; border: solid 1px blue; }
#content { margin:5px 100px 5px100px; padding:10px;
border: solid 1px green; }
.post { margin:5px; padding:10px; border: solid 1px yellow; }
Save the CSS file and view your page (click REFRESH or F5) in the web browser. You should now see a different colored box around each of the different sections:
This is another section that has been highlighted in a red box.
This is the rest of the text back to normal.If you don't see a colored box around your content, check again that the selector you changed is actually the correct spelling and identified in the HTML.
If the problem you are having is in the blue box, then you know where to start solving your problems. Be sure and remove the test attributes when you're done.
There are browser extensions and add-ons that offer this technique, too.
Besides putting boxes around the different sections to isolate the problem CSS or HTML, you can dramatically change the colors of the content to make the problem "jump" right out at you. By changing the text color or background color of a section, you will spot it immediately when you view the screen. Note: Be sure and make note of the original colors if you change them during testing so you can go back to them. And make frequent backups!
In the CSS file, you can change a section's font color by adding color:red or any other color to the selector's attributes such as:
H1 { font-style:bold; font-size: 125%; color: red; }
The H1 heading should jump out at you in bright red and would look like this:
To change the background color of a section, you can add background:pink to make the entire background pink.
#header { margin:5px; padding: 10px; background:pink; }
The result might look like this:
This is some text with the background color changed so you can see it.
This is the rest of the text back to normal.The entire header division will now feature a pink background. When you've identified the culprit, and made the fixes, be sure and remove any testing attributes to restore the look of your web page.
Sometimes the smallest detail can send your page out of whack. A mispelled tag (rhef instead of href), a forgotten closing tag, a missing attribute, or even the wrong attribute can send your page into a design tail spin.
Free online validators which check your HTML, XML, and CSS code may help isolate the little detail you are missing. As you scan through the code, it's easy to skip over a little stumble. Most online validators let you either type in the URI (link) to your site to initate the validation process, or may even allow you to paste in code or upload a file to have it inspected. WordPress, by default, validates its default coding, but if you are making modifications, the slightest slip can screw things up.
Different validators check for different problems, so if you can't find your solution with one validator, try another. Many validators will even recommend making some changes, but find your problem before you start creating new ones.
To help you understand more about validation and to find online validators, we've provided a list of validation resources in a Codex article called Validating a Website.
Not for the timid
NOTE: There are two Slash and Burn techniques. If you are weak of heart, check out the second one.
If you can't seem to narrow down the problem, there is a technique, sometimes called "Slash and Burn", that will help you narrow down the culprit. It requires no interuptions, concentration and thorough backups to ensure you don't destroy even the screwed up remains of your web page design. We also recommend you have familiarity with HTML and CSS.
1. Make backups of all of your files.
2. Open a post in the web browser and VIEW > SOURCE.
3. Save this source file as a text document called "junk.html" to an empty test folder on your hard drive. DO NOT CLOSE THIS FILE. It will remain open during this entire process.
4. Copy your CSS file to the same test folder.
5. If you are having problems with the graphics, copy the graphics folder or the graphics to the test folder.
6. In the junk.html source file, change the style sheet reference from something like
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
to this:
<link rel="style sheet" type="text/css" href="style.css">
7. In the test folder, double click on junk.html to view the file in your browser. You should see the general layout of the page with the graphics, if appropriate. If not, double check the link reference to the style sheet.
8. In your junk.html text file, move to the point where the trouble begins. Move to the section above (a section which includes opening and closing tags such as:<p>babble...</p>
<div class="post">babble...</div>
9. Save the file.
10. REFRESH the web page in the web browser (F5 or click REFRESH - if you have problems and don't see a change, hold the SHIFT key then press F5 or (in FireFox) simultaneously hold down Cntrl+Shift+R).
11. You should see the removed section missing. Check below to see if this fixed the problem or if it went away. If yes, this section is your problem. If not, go to the next step.
12. If the problem is still there, move back to the junk.html file and put the cursor in the place where you deleted the section, if the cursor has moved. PASTE the cut section back in (Cntrl+V). Move to another section above or below this point and repeat steps 8 through 12.
At some point in this process, you will see the problem either fix itself or disappear. Begin with large sections and when you find the large section problem area, break it up into smaller pieces. Eventually, you will isolate the area that is causing you grief. Note the CSS references to identify the troublesome section and start making changes to the CSS file to fix it.
To use the gentle version of slash and burn, instead of deleting the sections as shown above, cut and paste them into Notepad or another text editor so they are protected in case you get distracted from the cut and paste process. ALWAYS back everything up as you go along, just in case (which happens a lot more than you might think!).
We all make mistakes. The word "typo" wasn't invented without reason. Here are some of the most common problems that creep up with CSS.
No matter how hard we try to make our web pages beautiful, it can take the viewing of the web page in a different browser to totally screw up our lovely design.
Different browsers view web pages differently. Older browsers won't recognize new CSS standards, while newer ones often "see" things differently from their brethren. The results are often not pretty, causing blinking, jumping, or missing design elements, shifting layouts, and distorted positions.
How do you know it's the browser and not your design causing the problem? You often don't. If you play with CSS a lot, you will learn to recognize the symptoms. In general, here are the clues:
To get help with your browser bugs, check out the recommendations and resources at CSS Fixing Browser Bugs.