WordPress Theme CSS Reset

RSS

WordPress Theme CSS Reset

04 Apr

WordPress CSS Reset
Ever wondered when you set an image to align left or right the image doesn’t align? I can tell you it’s probably because a default CSS class is missing in your theme CSS.

In this article I will create a standard CSS reset for WordPress including all CSS classes that WordPress automatically generates.

WordPress, like any CMS has a default structure with it’s how template hierarchy, template tags and default CSS classes that are obligatory on every WordPress theme in order for WordPress to work correctly.

Download WordPress Theme CSS Reset

Eric Meyer’s CSS Reset

A CSS reset will set all default values of HTML elements to zero. This will improve cross-browser CSS compatibility as different browsers will set different values for HTML / XHTML elements.

Eric Meyer’s CSS reset it a wonderful CSS reset for default HTML styles but when it comes to WordPress you need to contemplate WordPress default CSS styles.

WordPress default styles

As I mentioned before WordPress, as a CMS, creates some default CSS classes that applies to HTML elements and that you must include in your Theme style.css file in order for the Visual Editor (WYSIWYG Editor) to work correctly:

.alignleft {
   float: left;
}
.alignright {
   float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Beyond these classes there are others to take in consideration. These classes are applied when showing categories, specific pages, widgets, links and so on. I’ll leave them blank so you can personalize as you wish. All the elements where the following classes applied have been reseted by Meyer’s CSS Reset.

When you put all of the CSS together you will get a complete CSS Reset for WordPress themes. Ready to go, ready to use on your own themes.
You can download the WordPress Theme CSS Reset by clicking on the link or just copy / paste the following code on to your style.css theme file:

/* WordPress WYSIWYG default syles */
.alignleft {
   float: left;
}
.alignright {
   float: right;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
.aligncenter, div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
/* WordPress template default classes */
.categories {}
.cat-item {}
.current-cat {}
.current-cat-parent {}
.children {}
.pagenav {}
.page_item {}
.current_page_item {}
.current_page_parent {}
.current_page_ancestor {}
.widget {}
.widget_text {}
.blogroll {}
.linkcat{}
/* Eric Meyer's CSS Reset v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Mário Andrade