How to Frame Images in WordPress Posts with CSS
Framing
If you would like to frame the images in your blog posts like the one to the right, all you need to do is add a couple of lines to your CSS file and add the class attribute to your image tags. Don’t worry, don’t worry! I plan to provide step by step instructions.
Once this is set up, all of your images will be framed and padded in the same way, which really helps in making a blog look more professional.
OK – here we go!
**Note – I am using the most current version of WordPress. If you are using 2.3 or lower, some of the settings in the Admin area may be in different locations. Also, please upgrade!! If you need assistance with that, send me an email or a direct message on Twitter and we can discuss. My contact information is in the sidebar to the right.
- Go to Design > Theme Editor > styles.css
- Copy all of the text in this file and paste it into Word or your preferred text editor. I always back up the original in case I make a mistake or don’t like the changes. The backup allows me to quickly paste the original text back into the file.
- Add the following code to your style sheet and save
- If you are unable to save and get the message in the screenshot below, you have a permissions issue with your theme files. I am not discussing permissions in this article but feel free to leave a comment or send me an email and I’ll let you know how to fix this.
- Now you want to write a new post. Add an image. If you use the visual text editor, switch to the HTML one for the next part.
- The following is an example of html code for your image.
- In order to use the css code we added to your style sheet, add the following to the image code.
- If you want the image placed on the right rather than the left, than simply change the word left in the code to right.
- The image code will now look like:
- All of your images will have the same frame, if you add this class attribute to the image tag.
- You can change the way the frame looks by editing the code that we added to the css file. For example:
.left { float:left; }
.right { float:right; }
.frame { border: 2px solid #aaa; padding: 10px; }
img.left { margin: 0 10px 10px 0; }
img.right { margin: 0 0 10x 10px; }
<img src="http://www.kimwoodbridge.com/wp-content/uploads/2008/09/ writable.jpg" alt="Writable" title="writable" width="500" height="31" />
class=”left frame”
<img src="http://www.kimwoodbridge.com/wp-content/uploads/2008/09/ writable.jpg" alt="Writable" title="writable" width="500" height="31" class="left frame" />
.frame { border: 2px solid #aaa; padding: 10px; }
You can make the frame border bigger or smaller by changing the 2px to a different number. Or you can change the color of the frame be editing the #aaa hex code.
That’s all there is to it. Just add a couple of lines to your style sheet and the class attribute to your image code and you will have professional framed images throughout your site.
photo credit: sveinhal
Related Posts:
September 8, 2008 at 2:16 pm
You are SO TECHIE.
I really admire that.
Vered – MomGrind’s last blog post – You Read Women’s Magazines? I’ll Give You Ten Reasons To Stop
September 8, 2008 at 2:19 pm
Vered – Thanks! We all have different strengths. I enjoy trying new things out on the blog way more than writing about how I did them :-)
February 12, 2009 at 5:50 am
Is it possible to make this a standard in all posted pictures?
Joel Lundgren (swe)´s last blog post – Facebook + Wordpress = sant
February 12, 2009 at 7:54 am
Hi Joel – Yes, you can modify the code so all pictures are aligned
and framed. When you add a picture to a post via WordPress and
select the alignment a class of aligncenter, alignleft or alignright is added to the code.
So, you could add something like this to your stylesheet file.
.alignleft { padding: 3px; margin: 0.5em 15px 0.5em 0; border: 3px double #bbb; float: left; clear: left; }
.alignright { padding: 3px; margin: 0.5em 0 0.5em 15px; border: 3px double #bbb; float: right; clear: right; }
.aligncenter { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb;
float: none; clear: both; }
Keep in mind that if you have images in your sidebar it will align and frame them too and
sometimes that ends up looking odd.
February 13, 2009 at 2:13 am
Spank you very much!
Joel Lundgren (swe)´s last blog post – Att bryta gamla mönster
March 25, 2009 at 9:55 am
Kim, I have a permissions issue with my theme files, and am unable to save changes. How do I fix this please? Thanks for this helpful post on posting flickr images to wordpress blog. Amanda
Amanda Seyderhelm´s last blog post – How Do We Develop Our Intuition?
March 25, 2009 at 10:21 am
Hi Amanda – You need to change the file permissions on your theme files. How do you access them? Via ftp, cpanel’s file manager or another way? Here is some information about changing file permissions
http://codex.wordpress.org/Changing_File_Permissions
If I know how you access your files I can also provide better information.
July 15, 2009 at 10:57 am
Hello
Thanks for sharing tips like this one, it really comes handy when working in WP.
Now i have a question: Can we do the same thing but instead of frame pictures i want to frame some areas o text in a WP post ?
Is this possible ?
Will be very glad if anyone can help me with this !
Thanks,
Edgar.
Edgar´s last blog ..Season 8 Episode 3 – Toxic
July 15, 2009 at 11:28 am
Hi Edgar,
Do you use the visual or html editor? You can create a CSS class that puts borders around text or another object and then call that class for the item that you want to frame.
For example,
.customframe {border: 1px solid #000;}
Then around the text you could do
<div class=”customframe”>
text here
</div>
July 15, 2009 at 2:46 pm
Hello Kim Thanks for your reply !
The truth is that i’m a bit newbie on this ….
I’m working in a wordpress blog…
Where do i have to put the code you have mentioned in the CSS or in the html part of the post ?
Tahnks in advance !
Edgar.
Edgar´s last blog ..Season 8 Episode 3 – Toxic
July 15, 2009 at 3:11 pm
Edgar – The first part goes in the style.css file
.customframe {border: 1px solid #000;}
The second part goes in the html around the text that you want to frame.
Keep in mind the css is just an example – it will make a thin black border around the text block.
July 15, 2009 at 3:28 pm
Hello Kim
I did it already but it doesn’t work …
maybe i’m puting the code .customframe {border: 1px solid #000;} in the wrong place in the style.css file ?
Edgar´s last blog ..Season 8 Episode 3 – Toxic
July 16, 2009 at 9:22 am
Hi – It shouldn’t matter where in the CSS file the code is placed as
long as it is formatted correctly. I’m not sure why it’s not working though.
July 16, 2009 at 11:49 am
Hello Kim … Thanks again for your help !
Please check the post in question where i want to frame diferent areas inside the post:
http://smallville-episodes.com/season-8/smallville-season-8/
If you check the link will take you to the post….
I want to frame every episode ( Text with the pic of the tv )
Maybe it’s not possible ?
Thanks for your help !
Edgar.
Edgar´s last blog ..Season 8 Episode 22 – Doomsday
July 16, 2009 at 12:30 pm
In the code for Smallville Season 8 you have the following
You have two sets of doublequotes around the name of the class. Remove those and retype them. Hopefully that will work.
July 16, 2009 at 3:22 pm
Kim Thank you so much !
You’re a star !!!
At the end it has worked !! Just what i was looking for….
Thank you !
Edgar´s last blog ..Season 8 Episode 22 – Doomsday
July 16, 2009 at 3:36 pm
Edgar – Yay! It looks great.