Con la introducción de los nuevos Temas en WordPress v1.5, las disposiciones de sitio web aburridas y banales son parte del pasado. Con unos clics, usted puede cambiar su disposición al instante. With a few more clicks and tweaks, you can screw up your layout instantly as well. Bienvenidos al apasionante mundo del diseño de páginas web.
When you encounter a screw-up in your layout, muchas personas vienen corriendo a los Foros de WordPress. Mientras los dispuestos voluntarios hacen lo que pueden para ayudarle, hay algunos pasos que usted puede dar para conseguir a la solución, o al menos una mejor idea de donde puede estar el problema, antes de acudir a los Foros.
El objetivo de este artículo es ayudarle a solucionar sus problemas de disposición de diseño dentro del archivo CSS, no dentro de los archivos HTML o PHP. Para obtener ayuda sobre la modificación de éstos, vea Usando Temas para más información.
Antes de comenzar a resolver cualquiera de estos problemas con consejos y técnicas, asegúrese de hacer una copia de seguridad de sus datos por si acaso. Haga también una copia de seguridad de los archivos sobre los que está usted trabajando y así, si intenta diferentes cosas tiene guardados los pasos y puede volver atrás.
Si tiene posibilidad, es mucho más rápido y más seguro hacer sus pruebas de CSS y solucionar los problemas "sobre la marcha" usando (por ejemplo) el bookmarklet de los Estilos de Edición de Jesse Ruderman o la extensión Editar CSS para Firefox. Cuando esté haciendo cambios, copie su nuevo código (corregido) en los archivos de tema apropiados Wordpress (después de haber hecho una copia de seguridad).
La extensión Desarrollador Web para Firefox también puede ayudar.
Si usted es principiante en CSS y diseño de páginas web, comience con una visita a Consejos, Técnicas y Recursos CSS de WordPress para encontrar información básica sobre CSS y posiblemente encuentre respuesta a algunas de sus preguntas. Al menos, usted obtendrá una visión básica sobre qué es CSS, el impacto que tiene sobre el HTML o estructura de su página, y aprenderá la jerga que le ayudará a hacer una pregunta más informada en los foros.
También necesitará conocer alguna terminología básica que le ayude a expresar su problema a otros. This isn't a how-to-CSS guide but more of a "what is thingamahjig called" guide.
CSS (Cascading Style Sheets) son trozos de código que influyen en la presentación o apariencia del código HTML de su página. En WordPress, los estilos CSS generalmente se encuentran en un archivo llamado style.css en la carpeta específica del Tema que está usted usando. El código HTML y las referencias de CSS que sostienen la estructura de su página generalmente se encuentran en el archivo index.php en la carpeta de su Tema.
Los archivos PHP se encuentran dentro de la carpeta de su Tema y contienen el código y las referencias que generan su página HTML. 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 Usando temas for more information.
Los selectores CSS (nombres) están generalmente agrupados en tres referencias específicas: ID, CLASS, y etiquetas HTML.
El ID es una referencia a un área específica única sobre su página web. It is generally seen represented on your HTML web page as an enclosed DIV (division) block:
<div id="header">Título de la Página</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. Por ejemplo, si usted quiere destacar una palabra o dos dentro de su texto con frecuencia (usaremos rojo como toque de color en este caso), usted podría tener un selector de CLASE en su hoja de estilo como este:
.hilite { color: red}
...this is some text about something I want <span class="hilite">in red</span>. And some more rambling here...
Si usted quiere "diseñar" una etiqueta de referencia de HTML específica, como una cita (blockquote), el código dentro de la página web puede parecerse a esto:
<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; }
Para información sobre la modificación de ID, CLASS, y HTML, vea los recursos en Consejos, Técnicas y Recursos CSS de WordPress.
¡Nota importante! Ciertos temas tienen sus estilos css en más de un lugar, el tema Kubrick es uno de ellos. Si, después de cambiar atributos de css en un archivo css, no ve los resultados que usted desea, es posible que el tema que ha elegido tenga algunos css integrados en uno de los archivos php (por lo general un archivo de cabecera) y los estilos integrados css anulan el la hoja de estilos css enlazada o importada.
Para determinar que sale bien o mal en la disposición de su página web, usted debe ir a la fuente. Esto quiere decir mirar bajo el capó.
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. A primera vista, es como mirar bajo el capó de un coche de carreras. 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="style sheet" 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 this 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 want 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.
If you use Firefox as your browser there's a handy extension that does this for you, and makes troubleshooting css problems a whole lot easier. The Plugin is called Aardvark and is available for free at http://www.karmatics.com/aardvark/. A demo is available for test drives.
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.