The common mistake 98% of people, who have the CSS upgrade, make when modifying a theme is to paste the WHOLE theme’s CSS code in the CSS Editor. DO NOT DO THAT!
If you have the CSS Upgrade, put only your additions/modifications to the theme’s CSS in the editor; code other than that is just an overkill.
A few reasons why pasting the whole code is not a good idea are:
- You’re duplicating code that has already been written for you
- Relative paths to background images will be broken giving you undesired results
- The browser will download the same code twice which is inefficient.
Why will the browser download the code twice?
Because whenever your browser requests a page, the server (in this case wp.com) will send something like this:
(default .css file)
body {background: #fff; color: #339;}
...
...
...
[more css code]
...
...
(your code in the CSS editor)
body {background: #fff; color: #339;}
...
...
...
That’s an overkill because your code will ALWAYS be appended at the end to override whatever definitions were defined in the default .css file. By copying the entire CSS in the editor, you’re telling the browser to do the same thing twice… hence, overkill.
Now, let’s say you just want to change the color of your font from dark blue (#339) to black (#000); since the default body definition looks already like this:
body {
background: #fff;
color: #339;
font: normal 1em Arial, Verdana, Sans;
}
The ONLY thing you need to write in your CSS editor is this:
body {color: #000;}
The server will send the code like this:
(default .css file)
body {
background: #fff;
color: #339;
font: normal 1em Arial, Verdana, Sans;
}
...
...
[more css code]
...
...
(your code in the CSS editor)
body {color: #000;}
...
...
The first definition (default .css file) will set the background to white, the font to Arial and the color to dark blue (#330), but when the browser gets to YOUR definition, it will say: “oh, so the text color is not dark blue anymore but black… okay!”
That’s how CSS works, the definitions that are at the “bottom” are the ones that will take priority.
If you wanted to ADD to an existing definition, say a padding of 10px to the 4 sides of the page, then you’d write it like this:
body{padding: 10px;}
Then the browser will combine the default definition with yours… it would be as though your theme had this CSS code:
body {
background: #fff;
color: #339;
font: normal 1em Arial, Verdana, Sans;
padding: 10px;
}
By not putting the entire CSS code in the CSS Editor, you’ll help yourself to keep track of your changes, and when you mess something up, it will help those who may be able to help you to fix whatever may be borked.
I hope this helps. I’ll come with more tips/recommendations soon (I hope).
Cheers!
