I was creating a blog post so that people could download a small poster that showed the 10 Rules for Effective Blogging. The problem is that the background of the poster is white, as is the background for the blog, so by itself, it looks like this:
Kind of bleeds into the page. I want a quick border. The built-in editor for WordPress doesn’t let you add a quick border to an image, so I need to add some style attributes to the image. As stated in the book:
Border: width style color;
The largest group of properties in style have to do with borders around an object. You can do a lot with borders. They are a great way to highlight or separate different pieces of content in a post.
Fortunately, the border property covers most needs. The first argument it takes is the width of the border in pixels. You can use words like thin or thick here as well. The next is style, which can be solid, dashed, double, etc… And finally, you give a color. Color can be a #rrryygg hex color or common names like black, red, yellow, etc…
This is a great example of applying a border. So following my own advice I go into the HTML tab of my editor and find the image:
And I want to add:
style="border: black thin solid;"
Between <img and class=. Go back to to the “Visual” And look what I get:
But… looking at the screen capture I inserted of the HTML code image I have the same problem. So what I should do is set my images to always have a border. In the free cloud-based version of WordPress, you can’t change the styles settings. Free always costs.
So this simple addition takes maybe 30 seconds, will satisfy my cheap approach for now.
If your blog platform allows you to change your CSS, then set your img to include:
img {
border: black thin solid;
}
