Adding a top logo to your UBB.threads forum

I don’t know how many times I’ve seen someone post on the UBB.central support forums, “How do I add a logo to the top of my new forum?”. It’s a simple request, really and we’ll find out that the answer is just as simple.

This article will build up to the final answer by first making a new style available, discussing some of the particulars and then culminate with adding the top logo itself. Feel free to skip to the end, if that is all the information you really need or want.

The style that you can download is a simple fixed width one, with three basic colors involved: Red, White and Blue. It became a reality, when I had a customer want “something simple” and many times, simple IS better anyway.

I won’t get into all the details of how to import a style into UBB.threads, because there is a lengthy, step by step saga that you can read about here. Feel free to read that article first, if you aren’t too familiar with the whole style importation process.

We’ll just get on with it, import the new style and use it instead of the stock UBB.threads style shown here:

That’s the standard we’re all used to by now, excluding the “wonderful” free hand logo I placed up top in the screen capture editor to stand out like a sore thumb. I’ve also added one category and one forum, just to have something to show in the screen capture. You probably have much more content on your forum, however you get the picture. ;)

Grab the style, import it, and also upload the other directories to the corresponding forum directories on your site:

[download id=”3″]

After importing the style in the Style Editor, saving it and selecting it in your preferences, you should see something that looks similar to the picture, below:

Initial look after import (Click for full size)

The first thing you will notice is that the style is setup to default to a fixed width of 1100 pixels wide and centered on the screen. You can quickly change this to allow it to be full width by removing the following from the Extra Properties section of the style:

#content {
  margin:0 auto;

Regardless of what you decide, you are probably reading onward and wondering how to get the damned logo to show up. You can see stuff in the Extra Properties section pertaining to a logo and might be wondering why it hasn’t shown up yet.

This assumes you have uploaded both the styles and images directories to your site, of course

The entire extra css is shown below, minus some of the extra stuff you can actually throw away:

#content {
  margin:0 auto;

#head {
  margin: 0px auto;
  padding: 0px;
  width: 1100px;
  height: 130px;
  background: transparent;

.top-mb {
  width: 393px;
  height: 123px;
  padding: 0px;
  background:url(../styles/rwb/images/mb-logo.png) transparent no-repeat;

.post-buttons img {

It sure looks like it should be displaying! :eek:

But there is one final thing to do and that is to go to the Display Options, General, HTML Includes tab and paste some markup for the css to act upon. My example for my local development system is shown below:

<div id="head">
  <a href="">
    <div class="top-mb"></div>

Save this out and you should see your logo on top. Well…. make that the example logo I supplied for you :hihi:

You can supply your own logo. Just make sure that the .top-mb class matches the new file name or simply upload a new file on top of the original. It is your choice.

You will also want to change the href URL to your board value, since there really isn’t an, if you get my drift. I’ll leave that little change up to you

The final result is shown below:

In all its glory (Click for full size)

I hope this helped out in some small way. What amazes me is that there is already 5 downloads and I am just now finishing off this article. Who is wearing out their F5 key and laying in wait for a new .zip to be available?

Comments are closed.