Wrap text around your arcade images

Wrapping text around the images in your arcade blog posts is really easy. Simple and to the point, here are some simple formatting tips for your arcade blog website that can help your images better support your copy visually without being a distraction.

On the right is the banner for the Facebook arcade collecting group. The image is square in nature, but this text wrapping technique works for any image, even those that are cutout and just the shape of the arcade cabinet.

Diving into your WordPress theme

That is where your stylesheet file, or a file that typically is called ‘style.css’ is located. More specifically, you’ll want to look in this directory path;

Look for a file called styles.css (or any type of file with the .css extension). Go to the very bottom of the file and add the following code. Then I’ll do a simple break down of how it works.

/* Custom Styles – Non Theme – Portable Classes */

.floatRtBor{
float:right;
margin:0 0 12px 20px;
}

.clear{
clear:both;
}

The text inside of the /* */ is a css comment. You should be using these a lot to label the sections in your stylesheet for class management and better organization. Trust me, like being ‘just friends’ with a lot of girls, it pays off later. Plus, if you ever change WordPress themes but have used custom classes in your design, you will need to port these classes over to the new WordPress Theme and this is an easy way to designate which ones without doing a ton of mind numbing sorting.

Ok, breaking down this css

• .floatRtBor – The name of your class
• float:right – You are telling your image to float to the right side and let all of your text or layout elements wrap on the left. You can also tell it to ‘float:left‘, just make sure to adjust the margin accordingly.
• margin:0 0 12px 20px – The margin property adds space around your image. The values listed are shorthand, 0px for the top, 0px for the right, 12px on the bottom and 20px on the left. When listing ‘0’ you don’t need to specify a measurement.

Make that arcade game image wrap

Log into the admin of WordPress, select ‘Write > Post’, and then insert your image from your library with the WordPress GUI or type out the directory path manually of where you ftp’d the graphic.

Your image tag will look something like this;

<img src=”/images/imagename.jpg” alt=”Major Havoc Arcade Game Photo” />

Just make sure to add ‘class’ as a property and use the name you setup for your float class;

<img src=”/images/imagename.jpg” alt=”Major Havoc Arcade Game Photo” class=”floatRtBor” />

Note: I see this newbie mistake a lot. They try to write;

<img src=”/images/imagename.jpg” alt=”Major Havoc Arcade Game Photo” class=”.floatRtBor” />

Notice the mistake here with inclusion of the ‘dot’. The period before the name of the class in the stylesheet identifies it as a ‘class’. You can also identify your class as a modifier for the selector like ‘html,body,p,div’ etc. or you could identify it as an id with a # sign. Explaining the differences and proper uses of selectors, classes and id’s is out of the scope of this article so when you expand on the information here make sure you know the answer.

Final touches

What is that class called ‘clear’? That class is there to help in the text / image formatting when you float an image. Do a ‘find’ in your stylesheet in a local editor (Dreamweaver, Notepad, PSPad) on your computer and see if any other classes or id’s are already setup to ‘clear:both’. If you have a class already you won’t need to add this one to your stylesheet.

The idea with a ‘clear:both’ is to tell the browser ‘Ok, the floating ends here”. Again, I won’t get into a long discussion about floating images or layout elements in html, but if you do a search on ‘floating’ in Google, you will find plenty of information. Basically, if you add in this ‘float’ class and the presentation of your text and images gets wonky, make sure you ‘clear’ it out.

Other classes for presenting arcade images

.borderCenter{
text-align:center;
}

.borderCenter img{
border:1px solid #aeaeae;
padding:3px;
}

These are some nice classes for centering and adding a border to images of your arcade games. I won’t get into what each of the property – value pairs are. Just know basically that this will center your image, add a thin grey border, and add some padding around the image so the border isn’t touching the edges.

Questions?

Want to see any other CSS tips and tricks demonstrated for your arcade blog website? Is there anything here I need to explain more? Let me know.

Here are some similar arcade posts

• Edit your WordPress theme – Headers
• Custom Super Bug WordPress Theme
• Donkey Kong WordPress Theme – Ver. 1
• Photoshop tutorial for punching text ‘effect’ out of an image
• New WordPress install? First thing to do, setup permalinking!

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.