Avatars are so popular and forums so prevalent that there are websites solely devoted to offering you a huge assortment of avatars. Some are free, some you pay for, some are plain and simple, some can be joined with frames and other image elements. They come in many sizes, but usually will not exceed the dimensions most common message boards allow. Here are just a few examples.

You can also make an avatar out of an image you already have, like a picture of yourself, your car or motorcycle, a pet or just about anything else. Of course, most of the images we have are way too big to use as an avatar. Yes, there is a way to resize an image and some message boards can do this automatically. Unfortunately, the average photograph does not lend itself to avatar use. Sizing the pictures we have down to avatar size will lose so much detail that the resulting image is unappealing. You should use image editing software to not only reduce the physical and file size of the image, but crop the image so that the most important aspect of the icon is left.

One question that always seems to crop up on message boards is, what is appropriate? There is certainly nothing wrong with a picture of yourself. After all, the definition of an avatar is a “virtual representation of yourself.” You might also want to represent yourself in a caricature, as I do in the avatar I have used many times – the one that leads this article off, or as a pet lover, a patriot, a computer fanatic, or any number of other ideals or fantasies. You might just want to use it as an opportunity to show off your work, your mate or your favorite technology.

The things we should consider are, ta daaa, each other. We should keep in mind that there are hundreds of people browsing the forums and message boards we frequent. There are many more people looking at and reading the boards than those who post. Some of us visit them every day, sometimes several times a day. Many of us are adults, but many have different sensibilities than you or I. There is also a huge population of child Netizens, maybe your son or daughter, that wander into these virtual rooms. There may be no hard and fast rules concerning avatars at the forums you congregate at. I would like to suggest some things you might consider before selecting your avatar.

• Crop and resize your images to no larger than 120x120px (pixels) or smaller. They can be rectangular or oval, but no larger than 120×120.
• Keep the file size no more than 15Kb. It reduces the time it takes a page to load and it is more considerate of the site owner, who pays a premium for high bandwidth usage.
• Although there are thousands available, don’t use highly animated avatars. Mild animation is okay, but some distract from the focus of the forum and can become quite irritating, especially if there are several on the same page.
• Keep them PG-13 rated or less. Try not to offend other members or visitors.

Of course, all of this depends on the community standards of the forum you are participating in. It’s nice to be able to show off our talent or taste in artwork, but when it is to the detriment of the information and communication that we all visit forums for, it – and you – loses its appeal quickly. It’s simply a matter of consideration for your fellow forumites.

My health has deteriorated, as is expected with a disease that is chronic and has no cure. But they adjust my medication levels and even changed some of the inhalers. To be able to go and do the things I like to do, I get around on a Segway and even take it into stores and restaurants when I need to. I’ll talk more about the Seg in another post, but I am mobile.

When I look at my Other Foot List, I realize much of that has changed now. Again, more about that later, in a revised list. It’s true that some things change and some stay the same. I am trying to go with the flow. I was depressed and closed myself off from the world for a very long time, except when I absolutely had to do something. But I feel like something happened a few weeks ago and now I am more excited about this life than ever before.

I’ll expound on that more, as I keep saying, later and in other posts. I wanted to get this message out to you though – I’m not dead yet. I don’t fear the inevitable as much as I did and I am willing to try to make the transition as much fun and interesting as possible. Thanks for hangin’ with me.

The method is called a “float.” You would think it might be called a wrap, but no, I didn’t get to be on the naming committee. I’ll describe the method of doing this so that anyone coding an HTML page can do the same. You can use this method in any HTML document, it doesn’t have to be WordPress. There is a shortcut to this method for those using WordPress, so keep reading, I’ll get to it soon.

Although you can use floats for text boxes and other things, I’m only going to be talking about images and graphics. You can code the image using in-line styling, or you can put the CSS in with the rest of your CSS file. The in-line code for the image might look something like this:

<img style=”float:left; margin:0 6px 2px 0; padding:4px;” src=”http://1footinthegrave.com/images/genesee010-tn.jpg” alt=”barn” />Blah, bla, blah…

The text you enter after that will now float to the right side of the image, beginning at the top and wrapping under it. The “float:left” attribute tells the image to go to the left side of its container. The “margin” code tells the browser how much space to put around the image to give it a little elbow room. In this case, it is telling it to display text zero pixels from the top (you do not need to use the designator “px” when the value is zero – zero is zero no matter if you’re talking about pixels or miles), 6 pixels from the right side, 2 pixels from the bottom and zero from the left side. Margin values are given clockwise – top, right, bottom and left. Think of margins as the space around the outside of the object. Padding is the space around the inside edges. The image above has a padding statement of 4px. In margins and padding, you can state one value that applies to all sides. You can adjust the spacing by changing the values to what suits you.

Here is another image that floats to the right of the text. The code still falls at the beginning of a new line and your text is still typed right after it (no space, just type). You can see the differences in the code by studying it below.

<img style=”float:right; margin:0 0 2px 6px; padding:4px;” src=”http://1footinthegrave.com/images/4goofballs-tn.jpg” alt=”friends” />Yadda yadda, blah…

Note that I changed the values of the margin so that the space would now be on the left side of the image instead of the right. You can use this styling for other things, as I mentioned. But it’s a lot simpler if you add the CSS to your CSS file instead of styling it in-line. Many WordPress themes already have this code in their CSS and all you have to do is set a class attribute in the image. The code I have in my style sheet is as follows:

img.alignright { padding: 4px; margin: 0 0 2px 6px; }
img.alignleft { padding: 4px; margin: 0 6px 2px 0; }
.alignright { float: right; }
.alignleft { float: left }

You should check your theme’s CSS file to see what you have that is similar. The image of me and my friends can now be coded like this:

<img class=”alignright” src=”http://1footinthegrave.com/images/4goofballs-tn.jpg” alt=”friends” />Yackity, yak, yak…

As you can see, there’s a lot less code to write.

For you WordPress users, posting images is much easier. There is a price, however, because you can’t choose to make your thumbnail images a different size whenever you want. Them that likes the simplicity of it though, can use the “upload” feature inside your editor. Browse to the image on your computer you want, give it a title, add a description if you want and click upload. You then select from several options, one being to display a thumbnail image, and tell it to add it to your editor. You will have to move the graphic or image to the location in your post that you want it – just a little cut & paste work. Finally, you add the float declaration to align the image on the left or right side. Here you see a graphic I designed as the logo for my flooring message board for professionals and do-it-yourselfers.

You may have already noticed that you can see larger versions of my images appear before your very eyes when you click them. That is a fancy plug-in I found at WordPress – just do a search for “Lightbox” there and you’ll find it. For those of you who don’t know what I’m talking about, one of the nice things about that plug-in is, if it doesn’t work for the user’s browser settings, it will just link to a larger image. You can click the back button to return to the page.

I hope this tutorial has helped a few. I tried not to be so overwhelming with the technical jargon in hopes that most can understand it better. I remember what it was like when I first started to learn this kind of stuff. If you have questions or comments, just add them below.

Jim with 1 Foot in the Grave

But that isn’t what this entry is about. I only mention my case modding because it has been the kind of thing I have enjoyed doing for many years. Oh, not just computer case modding, but modding just about everything. I used to build model cars when I was a kid – customized them and even got published in a model car mag back then. I’ve tried to modify cars, my homes, hell, I even modified the way I pack this damn oxygen tank around – but more on that later. What I am taking the long way around getting to is that I spent the biggest part of this day modifying this website. I just couldn’t leave well enough alone.

The theme I chose for this site was a simple one. Casual, like me, understated colors because I like to pepper my posts with images and graphics, but with an interesting graphic that I immediately knew I was going to be able to replace. The original design looks like this: Coffee Stained Sample Site Well, it wasn’t as quick and simple as I had first thought, but I am really happy with the results. I completely re-did the page graphics, changed the color slightly and moved the column overlays a little lower on the page. I originally search the Net for graphics that I could use with a little editing here and there. But, as usual, I wasn’t satisfied.

Photography has been a hobby of mine for a long time. I have a portfolio I show prospective models – yeah, I like taking pictures of women more than anything else – and I like to think I’ve done some interesting landscapes and abstract work. But today was about the website graphics and I am real pleased (just in case by the time you have gotten around to reading this, I have changed the website again, here is a screen shot of the style I am referring to). It took hours to get the pictures just right. I use Adobe Fireworks for most of my work, but I also use Corel Paint Shop Pro – Fireworks can’t be beat for graphics, but for photo manipulation, it’s lacking and I can’t get the hang of Adobe PhotoShop.

I shot a couple dozen pictures of the oxygen tank on a couple different backgrounds. At first, I thought the tank should have no background at all (except for the graphics of the page), so I spent an hour trying to erase it from the picture. But then I thought, the picture I liked the best was on a background that was similar to the color of the page design already, so I just used the Fireworks Fade Image command and played around with the controls until it looked the way I wanted. I had to use the eraser to soften and blend the hard edges left over. The image was too bold and colorful for a page graphic, so I tried a few different things before I finally settled on the sepia-tone look.

The small drug store I have on my bedroom dresser was a bit tougher. I shot a lot of pictures of those in many different configurations. When I looked through all my shots with my favorite image management program (Thumbs Plus), I finally decided on the very first picture I took. This picture is one I had to remove all traces of the background material I used for the setup – an old flannel sheet. It took a couple of hours, but it turned out very nice, I think. Fireworks has a couple tools for removing backgrounds and I usually like the Magic Wand tool the best, but the flannel wasn’t going to go away so easy. I ended up using the Eraser tool and manually traced around every pill bottle and inhaler. My neck was sore, my back ached, my hand cramped up a couple times, but all that pain put a really big smile on my face when I saw the results.

Okay, I’m bragging. I hope you like my efforts though.

The installation couldn’t have been much easier – it really does take less than 5 minutes. The options were impressive and simple to set up. I got a couple of plugins and installed a theme I liked and I was up and running. I especially like that it’s all valid code right outa the box. I’m anal about that. The theme I chose has a 1 pixel jog in the background that I can’t seem to fix. I made a comment to the designer on the WordPress Themes page, so I hope it gets resolved.

One thing I didn’t like about the theme I chose (Coffee Stained 1.0) was the size of the graphics. There were only 3 graphics, but the total file size was over 162 KB. That’s gotta take a while to download for the poor saps still using dialup. Even for many DSL connections, that’s a bit of a wait for the page to load. So, I converted the JPG images to PNG, loaded them into Adobe Firefox and then did some optimizing. The header was originally a little over 70 KB, but I was able to reduce it to less than 19. The footer, originally 87 KB, is now just over 17. The background was a 760x155px image with a file size of almost 5 KB. I couldn’t understand why the image would be 155px high, so I cropped it down to only 10px. Some would say 1 or 2px would do just as well. Now the file size is about half a kilobyte. I saved 126 KB.

I wish I could lose some of my fat the same way. Hell, I’d be one handsome guy… nah, it’d prob’ly take a lot more’n that.

Anyway, I enjoy messing with this kind of stuff and I’m looking forward to making this site nice. Even if it doesn’t get a lot of traffic, I’d like it to be nice for myself. And who knows, it might be busy enough to help pay for itself with the advertising. It’s just one small way I hope to get out of this damn poor house and spend my last days in something a lot more comfortable.