In the first tip, I posted about aligning your images in your posts and pages by using specific CSS classes of alignleft, alignright, and aligncenter. By adding a bit of code to your WordPress theme’s stylesheet file, you can insert images into your posts and pages using the WordPress built-in image uploader and just select which alignment you want and it’s done.

Most of the time you will probably want no border around your image and if so then look for the following in your theme’s style.css:
img { border: 0; }
If you don’t find it, then add it to your stylesheet.

Now there will be times that you may want to add some kind of border around an image in one of your posts or pages. There are 2 ways to accomplish this.

1) Create a new class in your styleheet for these types of images. You may want to create 3 new classes depending on the alignment you want for these images because these classes will replace the alignright, alignleft, and aligncenter classes that I posted previously.

Here’s a sample of what you could do to create new image classes with a 1 pixel black border around your image that would have a 2 pixel space between the image and the border hence the padding attribute.

.aligncenter2 { margin-left: auto; margin-right: auto; border: 1px solid #000000; padding: 2px; }
.alignleft2 { float: left; margin: 5px 15px 10px 0; border: 1px solid #000000; padding: 2px;}
.alignright2 { float: right; margin: 5px 0 10px 15px; border: 1px solid #000000; padding: 2px; }

So a sample of alignleft2 image class would look something like this:

2) The other way do this is by adding an inline style, which is what I have done to add the flower image in this example so the code would look like this:
<img src="http://karenblundell.com/images/flower1.png" style="float: left; margin: 5px 15px 10px 0; border: 1px solid #000000; padding: 2px; text-align: center;" alt="flower" />

Of course you can change the color, thickness, and padding of the image border. By using padding: 0; you can have a border around the image that looks like a frame.

As always, just experiment with different styles until you achieve the look you want. Remember, you can always undo what you’ve done and save your experiments as drafts.

Bookmark It