CSS Styling for Default WordPress Buttons

This is a bit of CSS I’ve put together and use over and over on my sites. It reflects some general HTML that WordPress creates (such as the alignment buttons in the editor, native galleries, blockquotes, images with captions, etc.) as well as a few other classes that I use regularly (which I’ll include below as well). It’s been somewhat minified, but I’ve left spaces between items that are related for easier reading. Here’s the entire block, followed by some explanations below.


img.aligncenter, div.aligncenter, div.wp-caption img, .commentlist cite, .createcomments label {display:block;}
img.alignright, div.alignright, .commentmetadata {float:right;}
img.alignleft, div.alignleft, .page_nav, .page_nav p, .avatar, .createcomments label, .gallery, .gallery-item {float:left;}
.alignright, .commentlist cite, .createcomments label {text-align:right;}
.alignleft {text-align:left;}
.aligncenter, #copy p.wp-caption-text {text-align:center;}
img.aligncenter, div.aligncenter {margin:15px auto;}
img.alignright, div.alignright {margin:0 0 15px 15px;}
img.alignleft, div.alignleft {margin:0 15px 15px 0;}
#copy p.wp-caption-text {text-align:center !important; font-style:italic; margin:5px 0 !important;}
div.wp-caption img {margin:0 auto !important; float:none;}
.page_nav {height:15px; padding:10px;}
.page_nav p {width:48%;}
#content ul, #content ol {margin:15px 0 15px 35px;}
blockquote, blockquote p {background:url(img/bq_open.png) no-repeat; margin:15px 0; padding:0 0 0 55px; min-height:50px;}
blockquote p {background:url(img/bq_close.png) no-repeat bottom right; margin:0 !important; padding:0 55px 0 0 !important; font-size:135%; line-height:150%;}
#comments, .commentlist li, .gallery {clear:both;}
#comments ol.commentlist {list-style:none; margin-left:0 !important;}
#comments blockquote {margin:0 0 15px 75px;}
.avatar {margin:5px 10px 10px 0; padding:5px;}
.commentmetadata {margin-top:-22px;}
.commentlist li {margin-bottom:25px; padding:10px;}
.createcomments textarea {width:300px; margin-left:160px;}
.createcomments input {padding:5px; width:300px;}
.createcomments label {width:150px; padding:5px;}
.createcomments button {margin-left:370px;}
.gallery {margin:15px auto;}
.gallery-item {margin:5px;}
.gallery div {display:none;}

Now let’s examine what we’ve got here:


img.aligncenter, div.aligncenter, div.wp-caption img, .commentlist cite, .createcomments label {display:block;}
img.alignright, div.alignright, .commentmetadata {float:right;}
img.alignleft, div.alignleft, .page_nav, .page_nav p, .avatar, .createcomments label, .gallery, .gallery-item {float:left;}

This is just some minifying. Everything that’s here is somewhere else in the CSS, too, but Google tells me it’s better to do it this way, and as much as I sometimes want to disagree with that, I’ve grown used to grouping like this. Here we handle image alignment, and image with captions alignment (the div.alignleft, div.alignright, etc.)

.alignright, .commentlist cite, .createcomments label {text-align:right;}
.alignleft {text-align:left;}
.aligncenter, #copy p.wp-caption-text {text-align:center;}
img.aligncenter, div.aligncenter {margin:15px auto;}
img.alignright, div.alignright {margin:0 0 15px 15px;}
img.alignleft, div.alignleft {margin:0 15px 15px 0;}

The first three lines largely handle text alignment. The second three set margins for image and images with captions alignment.

#copy p.wp-caption-text {text-align:center !important; font-style:italic; margin:5px 0 !important;}
div.wp-caption img {margin:0 auto !important; float:none;}

More styling for native WordPress captions.

.page_nav {height:15px; padding:10px;}
.page_nav p {width:48%;}
#content ul, #content ol {margin:15px 0 15px 35px;}

I use .page_nav on all of my pagination containing tags. The HTML / PHP looks like this in my theme:

<nav>
<p><?php next_posts_link('« Older Entries') ?></p>
<p><?php previous_posts_link('Newer Entries »') ?></p>
</nav>
blockquote, blockquote p {background:url(img/bq_open.png) no-repeat; margin:15px 0; padding:0 0 0 55px; min-height:50px;}
blockquote p {background:url(img/bq_close.png) no-repeat bottom right; margin:0 !important; padding:0 55px 0 0 !important; font-size:135%; line-height:150%;}

This works for 90% of my situations requiring blockquotes, and certainly works for WordPress’ default code exported when you make something a blockquote (ie, a paragraph tag inside the blockquote tag). Don’t forget to replace the background image being called in both cases with whatever and wherever your image is. I typically use images of opening and closing parenthesis.

#comments, .commentlist li, .gallery {clear:both;}
#comments ol.commentlist {list-style:none; margin-left:0 !important;}
#comments blockquote {margin:0 0 15px 75px;}
.avatar {margin:5px 10px 10px 0; padding:5px;}
.commentmetadata {margin-top:-22px;}
.commentlist li {margin-bottom:25px; padding:10px;}
.createcomments textarea {width:300px; margin-left:160px;}
.createcomments input {padding:5px; width:300px;}
.createcomments label {width:150px; padding:5px;}
.createcomments button {margin-left:370px;}

This is all stuff that I create via my functions.php file for my comment threads, so this will be useless to you unless you’d like to adopt my comment list functionality / display. You can do so by adding this to your functions.php file:

<?php function click_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar($comment, 100); ?>
<blockquote>
<?php if ($comment->comment_approved == '0') : ?><strong>Your comment is awaiting moderation.</strong><?php endif; ?>
<?php comment_text() ?>
</blockquote>
<cite>- <?php comment_author_link() ?> | <small><?php comment_time('h:ia') ?> <?php comment_date('j M y') ?><?php edit_comment_link('Edit',' ',''); ?></small></cite>
<?php } >

Next we’ll cover fixing how WordPress’ default galleries work. The biggest issue is that they add inline styling right in the body of your site, which is a big no-no for anyone who likes to get all snobby about how to code. I kind of do, so I do the following.

.gallery {margin:15px auto;}
.gallery-item {margin:5px;}
.gallery div {display:none;}

Add the above to your stylesheet.

add_filter('gallery_style',
create_function(
'$css',
'return preg_replace("#<style type=\'text/css\'>(.*?)</style>#s", "", $css);'
)
);

And add that bit of PHP to your functions.php file (which will strip out the inline styling WordPress exports).

You’ll likely want to tweak this all to your liking, but it’s a good start for taking a lot of redundant work out of developing WordPress themes.

Up Next: How to Put Your WP E-commerce Site into Sandbox Mode with PayPal Payments Standard