Clean CSS for Images in Wordpress Posts
Posted by: admin in CMS, Web Design, Web Development Tags=In the past, I have had many Wordpress users complain to me about how there images are displaying within their blog posts. What has typically happened is that the user has downloaded some free or sometimes premium theme, and even though they use the Image Wizard in their admin interface correctly to align images or give padding to images, the images still don’t seem to dispaly how they ask them to from the backend. This is typically a problem with your main CSS file for your theme. There is some basic CSS that your images need to have in your style.css file so that you can control the rest of the display from the backend.
First Things First!
From your WordPress Theme folder, open the style.css file in a text-editor. Important! Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier.
Borders
You’ll need to decide if you want a border around your images and, if you do, what size, color, and type it should be. For no border, you would use the following:
img {border:0}
Padding and Image Width
Let’s clean up one more thing to make the image in your content work better with the rest of the styles we will use. We want to clear all the padding around the images within your content and make sure that the whole width of the image shows up rather than just a part of it. If it isn’t in your style sheet, add the following:
p img { padding: 0; max-width: 100%; }
Image Left, Right, and Center
When an image sits on the sides of your text, it helps to have space between the text and the image so the words aren’t right up against the edge. As some browsers treat the margins and padding differently, the following styles will accommodate most browser’s “space requirements” so the image doesn’t overlap the text or any lists that appear inline with the image.
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
The declaration of display:inline keeps the image inline with the text that you placed it with.
Now, it is time to add the float declaration to the images. BUT WAIT. Why should we waste our left and right floats on just images? Why not use them on anything that we want to sit on the right or left of the page and have the text float around it? You can do that, you know. But that’s for another tutorial. We’re not going to waste this, so if it isn’t there in your style sheet already, add the following:
.right { float: right; }
.left { float: left; }
Note: The Default/Kubrick Theme uses this technique but names the classes alignleft and alignright. Using left and right seems easier to remember and use, but either name sets may be used to make this work.
If you follow these instructions your Wordpress Theme will will function correctly when it comes to inputing images inside your blog posts and pages. If your images are not behaving correctly, chances are there are some flaws in your style.css file and these instructions will fix your problems.
Entries (RSS)