How to Design a Forum Skin

This article originally posted at JuggoPop’s V7N Blog, which no longer exists.

How to skin a forum – the juggopop way 🙂

Here is what I want to cover:

  • Basic forum software
  • How to start
  • CSS editing
  • Header design
  • Button design
  • Extra graphics
  • Overall finishing touches

Basic Forum Software

I would like to take a second to explain what community software I have used in the past and how this will relate to other software you may be using while following this guide.

I have successfully skinned phpBB and vBulletin communities. Neither of them was more difficult nor more easy then the other to complete. I have never worked on any other forum software, but I can imagine that they all have some basic things in common.

  1. They will use graphics.
  2. They will use CSS.

I recommend phpBB forums for a small to medium community where price is a factor (it’s free). I would recommend vBulletin to anyone that wants a full scale small to large forum and can afford the price.

How To Start

How does one start this process the correct way? I don’t know how most people do it, but I have a process that gets me started every time with ease.

First is the community attached to a site? Or is the community a stand alone “site” in itself? Either way the process starts with a screenshot. If it’s a stand alone forum then you will need to take a screenshot of the stock theme you will be working from. If you have a site attached it would help to have a screenshot of that as well.

This is the brainstorm time of the skin. You need to decide how you want it to look in the end… this will be a draft to work from while you develop the site live on the internet… and the end result will look close to this, but may have to have some small changes along the way.

To brainstorm, I take those screenshots into Adobe Photoshop and adjust the colors (image > adjustments > hue/saturation… ctrl+u). As you do this you may want to repeat the screenshot on a few layers to allow you to adjust one part of the look and not another. Just delete the areas from one layer that you don’t want changed in color while letting the other areas show through. Once the screenshot matches in color to your main site (if you have one) or just looks like the colors you want for the end results, then save this draft and flatten the layers.

Now add new layers to the image and start changing the look of the main buttons and edit the menu and header. (This is not the final images, this is still a draft)

Take your time, and work it up like you are making a draft for a client. Maybe even show this to some friends to see what they think before moving on. Once you move on from here you will actually be editing the site and working on it live.

CSS Editing

At this point you have an image of where you want to go. If you use Photoshop to select the colors in your draft, you can get the hex values to pass along into your CSS file.

Right now you just want to get all the basic items “colored” right, all non-graphic items. Don’t worry about cellpic images or buttons or even menu placement at this time.

If you are using phpBB you will find that the style sheet is either attached in the index or on a file of it’s own… either way, to edit it live, just save the file and replace it on the server. You will have to do this a few times as you edit the community. Back and forth, until your happy with the look. A few items may be in the admin panel, but not all.

If you are using vBulletin you can do all this from the admin panel. Everything is there. It’s not as much uploading as with phpBB but it’s the same process, back and forth until you are happy.

If you are using any other forum software, all I can recommend is to find the CSS and tweak it as needed. I’m quite sure the process will be the same; the only difference might be where to find it.

Header Design

Now that the colors are right, it’s time to decide if you are going to do major editing to the logo area (or header area). If you just want to edit the existing logo and leave the menu where it is, then skip this part and treat the logo like any other button or image.

However, if you want to really make it look more customized, you will want to take an extra step and do some image design and html coding…

Most forums are displayed full width of your monitor screen. To accommodate this you will need to have an area of the header that will expand.

You can either have an image that will look fully designed up until the right hand edge and the will look like a stretch blur on the right… extending the rest of the width. See example A below.

Or you can have an image that has an area in it that will look ok when expanded, with an image on the left and an image on the right. The expanding area would be in the middle. See example B below.

Note that it will be up to you to use your html skills to do this type of expanding header design. I’m just giving you examples of “where you can expand the header at” so that you have a better grasp before trying to design this in Photoshop. You will need to give yourself a place to use as the expand point.

This is also where you need to cod in your text based menu. You can see in the above examples I just placed it in is text on top of the background that made the nice beveled bar. You can use images, but I wouldn’t. If you want to change something later or want the search engines to see it better… you may have problems doing images or image map versions of your menu.

Once you have that designed and coded into html you will need to put it in place on your forums. In phpBB you will need to edit your overall_header.tpl file. In vBulletin it’s in the admin panel, you will just assign the images correctly, upload them, and then paste in your code. Nice and simple…

Button Design

The buttons of your site need to match the site. So many people get to this point and quick going… thinking they are done. I once designed a forum that got awards not for being over the top… but because I went the extra mile with these next few steps. (That forum just happened to be V7N’s forums)

I’m going to cover this and the “Extra Graphics” together here.

Open Photoshop.
Go to File > Open
Find your saved forum software on your hard drive.
(If you are doing this for someone else that already uploaded everything from their computer, you will need to go on the server and download all of this back to your computer.)
Find the template you are working on.
Open every image that comes with the forum.

Let me repeat… OPEN EVERY IMAGE.

Yes there are a lot. Last time I counted I think there are upwards of a hundred or more (more in VB then in phpBB).

Now take each image one by one and redesign it, recolor it, change it to suit you. As you change them save them to a new folder on your computer. You can then upload them as you go to make sure they look nice.

Overall Finishing Touches

Watch a few of the images however. Some images are used in more then one place. For example the key at the bottom hold folder icons. But so does the forum itself. The background colors in those two places may not match… so you will have to get creative. Either, edit the code on you forums to pull a different version of the same image or use some type of transparent gif and hope the “blend” looks ok on both backgrounds. Another type of image you need to watch out for are the “Hot” images. These are usually animated. And you will need to go into Image Ready and redesign them to match your other folder icons.

I suggest you edit every image. When you edit every image, even down to the smiles, you forum will be just that… yours. You will get compliments from those who have done thins before. It’s quite a process… and this is just skinning an existing template.

You can even take it a step further and start editing code. Move the login area around (from top to bottom)… take out dividers between cells, move latest post to a different area. All these little adjustments can make your forum become something different then everyone else’s.

After you do all of this, go post a thread with a poll, a quote, and use the code tag… did you remember to format those? Are you going to share this theme? If so, did you edit the admin area to match? It does matter.

If you are going to undertake something like this, plan on doing it 100% or don’t bother. If your not going to take it to the full level of a complete skin, just change the logo and get to posting. Let someone else do it another time.

Leave a Reply