BCP Arcade – Bringing the arcade experience to you

The BCP Arcade website included some design elements for the inner pages of the website including how the layout for the home and games pages should flow. The client was tremendously gracious and patient as I worked through completing the theme as the development extended into March and the expansion of our family, so a big thank you to him again for that.

BCP wanted to showcase retro games as well as a little bit of the more modern gaming, so I tried to use some classic favorites like Donkey Kong and Q*Bert as well as Mortal Kombat and implied a little Guitar Hero. Here are a couple of screenshots, including one for how the homepage originally looked;

As always, the client will then add their own content (text, photos, video, etc.) to fill out the site and fully utilize the theme.

WordPress Theme Development

I’ve developed quite a few WordPress themes and a number of them centered around video games and gaming in general. If you are interested in a custom WordPress theme for your website drop me a line. If you aren’t sure what WordPress is about but are interested to know more, get in touch with me. A little research on the internet will let you know how powerful WordPress is for syndicating content and propelling yourself to the top of a given niche. WordPress can make some parts of your online promotion easier so that you can concentrate on consistently generating new content.

If you are looking to get noticed a little bit more, and are actually looking to reduce some of the work it takes to maintain your website in the long run, shoot me a line. I might be able to help you out.

You're reading Arcade Game Inspired WordPress Theme – BCPArcade.com is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Red Sun or Joystick Ball?

I think it is ingrained in designers to naturally not like another designer’s work if they don’t know them. If I know you, hey, you design the best work in the galaxy. But you could be hired by Universal Studios and if I don’t know you then something about your work is junk

Not really. But that brings me to my example here. I was never in on the original design talks but I always felt like the original navigation elements on Tokens Only looked a little amateurish. Granted, you knew they were joysticks that flipped when you rolled over the links, but the joystick was represented by a red circle with a white glow, smack dab in the center, and the stick was just a white line. Plus, how does a white to blue gradient rounded rectangle relate back to arcades or a joystick in general?

So I update the joystick icons on the Token’s Only WordPress theme to make them look a little more realistic. Granted, the shaft is a little more chunky than a joystick might be but just like any round object, the ball now gets a more color realistic reflection from the top, and a reflection from the bottom of the material below it. Check it out;

These small details in design have always been important to me. If you are going to represent something in real life, understand how that object interacts with light and other parts of its environment. The rest of the design with the glowing oblong rectangles, the outlined text and the reflections of that text are all really design preferences, they don’t necessarily have anything to do with arcades. However, I do think that any thin lines that glow remind me of vector games a little bit.

Love those rotating arcade flyers

My favorite part of Chris’s site is the rotating cropped image from an arcade flyer of his choosing. Most of the flyer images are from games Chris had, has, or are just his favorite from Berzerk and Asteroids to Ghosts N’ Goblins and Missile Command. However, to get that rounded effect, we need to include part of the blue in the upper left corner.

So that meant some 20 odd images had to be updated. Why? Well, I also didn’t like how dark the original designer made the gradient for the blues, they were almost black so I change the fade to give the left side what I would consider a richer color.

There are a couple more things I would do to this website if it were mine completely, mostly smaller things. But we’ll just have to see how things progress. The original ideas of the design have changed significantly, as websites do, over the last 3 years. Hopefully as his site grows with some of the best content I’ve seen so far on more common classic arcades, some of those other details can flesh out as well.

You're reading Updated Website – Tokens Only is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Custom Arcade WordPress Themes

Hopefully you’ve read this far;) I know some people scan. RGVAC is not free and not for sale. This is a custom contracted WordPress theme paid for by RGVAC, or Brian’s Classic Arcade game website. Now that I’ve got that out of the way before someone asks about downloading a copy.

A little bit about the design

I knew right from the start that I wanted to use some pieces of artwork from Brian’s favorite games, which I already mentioned. Brian has been collecting for ten years plus now, and I know he is passionate about particular arcades. Most people just want the typical stuff, some Donkey Kong, some Pac-man, but what made this site so enjoyable to design is that I got to use elements from Quantum, Black Widow and even Tim Skelly’s Screw Loose, which Brian owns the only known working version of that game. (It may make my top 15 prototype arcade game list ) If you haven’t already, go ahead and bring up Brian’s arcade blog in a new tab.

Can you see the elements from each of the games I mentioned above? Black Widow is pretty easy, the red banding and spiders in the sidebar as well as the spiraling pattern in the background. But can you pick out Quantum? Probably, but if you didn’t, there is a ghosted piece of the control panel overlay in the main banner and one other element not from the control panel. Leave a comment if you can pick it out.

There are the two Screw Loose characters up by the search field / the comments indicator, and elements from the Centipede sideart with the ‘flaking’ red bar at the top drawing from the blue explosion patterns from Atari’s classic.

Top that off, I really wanted to play off the words ‘Classic’ and ‘Arcade’, so I tried to give the banner a weathered satchel brown paper type look, as if we were looking at the games in an old 50′s style movie reel. Top that off carrying over the old RGVAC logo with a little modification, and some of the 80′s style font outlining and you get a pretty sweet looking website. The real key to all of these pieces of artwork was already having them in a vector format to easily manipulate.

RGVAC is now a blog style website

If you are interested in a custom arcade game theme for your website give me a call. A little research on the internet will let you know how powerful WordPress is for syndicating content and propelling yourself to the top of a given niche. Most arcade game website could really pass for blogs, here’s a short list of arcade game blogs that already exist.

If you are looking to get noticed a little bit more, and are actually looking to reduce some of the work it takes to maintain your website in the long run, shoot me a line. I might be able to help you out.

You're reading New Arcade WordPress Theme – RGVAC is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

Let’s define ‘Blog’

What is the difference between an arcade website, and an arcade blog? Aren’t they both websites? Isn’t a blog a type of website?

If you are asking that question, you are right, a blog is a website. However, a blog is a much more powerful website than your typical / standard html pages in a directory. To understand how an arcade blog is more powerful and has more traffic potential we have to define the idea of a blog and why blogs are so powerful.

One way to think about a blog is that it is type of website that is much like a journal that shows the most recent addition on the blog homepage. Blogs are powerful for a number of reasons, and rather than try to express some of these ideas myself, I am going to quote some text from Courtney Tuttle. Courtney is a blogging and SEO genius and this information is from his great post titled Starting A Blog That Isn’t A Time Sucking Money Pit. It’s a great read, check it out if you get a chance. (Used without permission, hopefully Courtney will appreciate that I am acknowledging him as an authoritative voice on this subject)

The reasons blogs are so powerful;

• Blogs let search engines know each time new material is published. When you add something new, your blog sends a message called a ‘ping’ to blog search engines immediately. This lets the blog search engines know that your blog has new content, and gets it into Google and other engines more quickly. It also creates direct links to your blog website, which gives you a ranking benefit in Google.
• Blogs get linked to more often than traditional sites. Almost every search engine out there (including Google) uses links to determine which sites are the best. They will include sites that have the most links above sites that don’t have as many. This will give you an advantage over many of your competitors.
• People leave comments on blogs. Google and other search engines like to see constant updates from websites. Since people will be leaving comments on your blog, they will be doing a lot of the updating for you. Every time someone leaves a comment on one of your pages, Google will see that page as having been updated.
• Blogs structure content for you. One of the hardest things about creating a website from scratch is figuring out how to structure your content. Blogs do this work for you and create a search engine friendly structure.

In a nutshell, blogs are powerful because of the community interaction, organization, the fresh content, the amount of content (which Google loves and places higher values on) as well as pinging which is the behind the scenes communication in the blogosphere.

Onto the Arcade Game Blogs

These arcade game blogs possess all of the characteristics of a traditional blog, mostly because four of them run on WordPress. Here they are in no particular order;

Noiselandarcade.net – Jamie Whitney’s arcade game blog is witty, entertaining and has some of the most informative and targeted information of any of the collecting blogs I read. Jamie has a talent for presentation, personal voice and his writing flows together smoothly from start to finish. Some days I feel like his writing appears effortless and it makes me think he never goes back and edit text – at least not to the extent that I do.

Jamie has a nice simple design, not overwhelmingly arcade, but nice subtle touches that give him a brand of his own. His site is easy to navigate with all of his project games in the right sidebar. But Noiselandarcade provides a lot of value in entertainment. I find myself laughing out loud at lunch time while I’m at work at some of the things he says, and then I sheepishly have to explain myself because we all know that an employee at a small company can’t laugh without everyone else knowing why

If you only check out one other arcade game blog, other than Rotheblog of course, check out Noiselandarcade.

Jeffsgames – Jeff Waldron may not think of himself in this sense, but he now falls into that category of ‘old-timey collectors’, and that is a good thing. Jeff experienced and has worked on a lot of different games in the ten plus he’s been collecting. Jeff’s website was hosted on another collector’s webspace until a couple of months ago when a set of circumstances led him to try out blogging as a medium to share his great arcade collection, and in just three short months his blog has made great strides visually and in terms of content. I’ve met Jeff, and he is very knowledgeable in terms of history of games, people involved in the hobby as well as technically for fixing and maintaining.

Anyone who stops by “Jeffsgames” will quickly get an idea of how much knowledge he has and if you are looking to fix a game Jeff has great repair logs for a number of popular classic arcades.

Jeffsarcade – Another Jeff? Where am I and why am I licking the walls? What’s going on? I would cautiously label Jeff Phillips as a ‘newcomer’, but not on his experience or in his approach. Jeff joined Klov in December of 2007, and started his website soon after in early 2008 running Joomla as his blog CMS of choice. Joomla really is overkill for blogging and doesn’t have nearly the same type of 3rd party user network. (The general user who designs for the beginning techie. Joomla is not quite as simple for someone starting out) Two months ago he also made the switch to WordPress and from what I can tell has really enjoyed using it for his arcade blog. He’s still settling on a theme, he may be waiting on me;)

Jeff is a man of many talents. He has graphics knowledge in Illustrator for creating artwork as well as electronics repair knowledge and he came barreling full force into the collecting hobby. For one of his games, Jeff hooked up with a joker here in Indianapolis thought eBay who is a less than honest guy. The result was that he purchased a falsely advertised Dig Dug, but as a result the collecting community got a great little repair log for patching Atari cabinets. Jeff also has a major Omega Race project that I can’t wait to read more about. Jeff went out and bought two Omega Race games and plans on making one nicely restored machine from the parts. If you aren’t familiar with Omega Race, the game board PCB’s are notorious for having acid damage and therefore many of the non-working games/cabinets command less than $100. But the artwork for Omega Race is stunning, and Jeff isn’t going to settle for second best. He has contacted Rich at This Old Game to reproduce the Omega Race sideart .

I think Jeff’s logs are getting more extensive every day and I think the information he’ll post about his Omega Race project will add great value to the community.

Retro Blast– Let me start off by saying that Retro Blast is a great brand name, thick jealously runs through my veins.

Retro Blast is a website owned by Gameroom magazine and is now run by Nick Greeley who does all posting and updates on a volunteer basis! Either he’s really nice, or really bored. It’s definitely that he has a good heart. Also, I can’t say I have ever seen such a nice design come out of a tried and true IT manager and not to mention Retro Blast is a fully customized Joomla website. For those of you who remember the old clunky design of the Retro Blast arcade game blog will really appreciate this modern look and for those of you who have worked with Joomla know, making a nice graphical site using that CMS package is a lot of work.

~Update 05.12.08 – I didn’t find out until today that Joymonkey (Paul Murphy) actually did the design for this site. We might have a contest between Nick and Paul for who is more giving. No seriously, I am sure they wouldn’t want that attention, but most people know that Paul is the guy who took the time to make awesome, accurate, quality Ms. Pac-man arcade game stencils. He couldn’t make money off those stencils and he didn’t, but just think about the countless hours he spent on those sets of stencils for collectors and how many hours it must have taken to design the look for Retro Blast and you’ll realize what an asset Paul is to the collecting community.

Retro Blast is an arcade blog that covers a blanket of different topics concerning the arcade hobby. In the past Retro Blast used to do product reviews but now spotlights newly released arcade merchandise. Typically Retro Blast will write about the more whimsical and light hearted arcade game stories, like Pac-man pillows, NES collections selling for outrageous money on eBay, and YouTube videos starring some of our favorite classic game characters.

Nick is not only altruistic and helpful, but his small snippets that introduce the articles can be funny and a touch sarcastic – which is right up my alley. Support Nick and Retro Blast and the work he is doing, I know not many people would churn out great posts like this without getting paid. True passion, how many people can say that about anything in their life beyond the given clichés?

Arcade Heroes – Regularly updated and effectively articulated, Arcade Heroes is one arcade game blog that gets a ton of traffic. Just do a Google search, and you’ll probably come across an arcade story written by Matt (Twisted Supreme) or Adam (Shaggy) for their Arcade Heroes website.

Matt and Adam go to great lengths and costs to publish the arcade information on his blog. They have traveled to a number of arcade shows such as the one in Rochester and even to Vegas for the Amusement Showcase International and has published some great reviews about the vendors and the overall atmosphere. Creative and a great researcher, Arcade Heroes has probably the most unique stories of any of the blogs I have listed here as well as the widest array of subject matter. Not all of the arcade game posts on his blog are about ‘classic’ games by ‘sliding’ definition, but they tends to write 80-90% of the time about our old favorite games.

At the very least, visit the Arcade Heroes arcade game blog to give these guys your support and leave a comment or two of encouragement. Arcade Heroes already gets a ton of comments on their posts, so you won’t be the only one.

Also, as of this writing in 2008 Adam has undertaken a lifelong dream to open a local arcade. I have got to give him props for a potentially less than smooth journey. But he has outlined some of the planning on his website and it seems like he has thought things through. But it doesn’t matter, for Adam a retro arcade is a lifelong dream, and no business data can replace that enthusiasm and drive.

Other Arcade Game Blogs

There are a few more classic arcade game blogs out there that I didn’t talk about in this article, and maybe even a few I don’t know about (Doubtful ). In the last two years the WordPress feature set has really exploded and I think that some collectors are just starting to see the potential for using this blogging package for their collecting website.

I would conservatively estimate that with regular content postings (3-7 times a week) and a little bit of reciprocal linking and promotion, a WordPress arcade game blog could see at least 4-6x more traffic than the visitors to a static collecting website. People crave new niche content, that is why we have all these social networks. Someday I dream of a whole social network of users who contribute arcade game content, and I think building these arcade blogs that are RSS friendly is a start. Plus, I know of a couple more collecting blogs that I hope will launch in the coming months….

Why not think about converting your arcade website over to a blog?

If you haven’t checked out an arcade game blog, today may be the time. Hosting options can be free, (WordPress.com) and the learning curve is short. Not to mention, Rotheblog hopes to develop a whole line of arcade blog themes in the coming weeks, with a potential launch of the first free functioning arcade game theme the third week of May 2008. If you have an opinion on which arcade game theme you would like to see, make sure to check out the arcade wordpress theme poll.

Plus, because blogging websites tend to pull in a wider audience, we can bring new collectors to the hobby and in turn add new information to what is available online. I am here to help any collectors in any capacity I can in making the conversion, Jeff Waldron can tell give you a testimonial if you’re interested in trying WordPress.

You're reading Reviewing classic arcade game blogs is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.

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.

You're reading Wrap text around your arcade images is a post from: Jeff Rothe, originally posted on Rotheblog - An Arcade Game Blog. If you've enjoyed this post, be sure to follow Jeff on Twitter, Facebook, and Google +.