How to import a new style into UBB.threads

This is usually quite a simple process, if the style has no images involved in the CSS, however there are more and more styles popping up that rely on nicely shaded images to give that extra touch.

In that event, it is important to do another couple steps to make a nice smooth import and more importantly to understand what’s ‘under the hood’ for new UBB.threads admins.

This article is intended to show what to look for on the import as well as to point out some particulars with regard to the imported style. It will additionally give some suggested guidelines that you might want to follow in the future.

It is by no means a ‘you must do this’ kind of step-by-step, but more an informational article that you can take for what it’s worth.

This will also end up being the new theme that the forums will be using (temporarily), while we move toward the final goal of having the forum very closely match the look and feel of this portal.

Of course, this article wouldn’t be complete without the ‘before’ picture shown here:

Where we left off after [ this article ]

So this is the last we’ll see of this theme. It’s been a fun ride, but it’s time to move on! Nothing against it either, but our aim will be to have only one theme that will be used on this site for day to day operations.

As a matter of fact, the other dark theme on UBB.threads is one of my favorites. [ Preview – Black and Gold! ]

The main reason I prefer the interim theme to be a light blue theme (based upon the original frosted one, that you can find over at UBB.central) is to make the screen shots leading up the the metamorphosis not stand out so much and get closer to looking more and more like the WordPress portal here.

Although I have a link to the download file at the bottom of the article, I will also duplicate it here, since this is where you will want to grab the zip file, copy to your hard drive and save to a local directory. For purposes of this tutorial, I’ve chosen the ‘E:\temp’ directory. Feel free to do whatever suits you.

If you open up the file, you will see the following contents:

One file ‘sd.light-blue_with_wrapper.txt’ and two directories; ‘images’ and ‘styles’. You will only upload the images and styles directories to your site, since the .txt file will be uploaded via the browser when we get to the actual Import phase.

Upload the images and styles directories to their exact counterpart on your website, which would translate to the ‘forum/images’ and ‘forum/styles’ directories on your website. Of course, if your UBB.threads installation is in a different directory (ubbthreads, forums, members etc), just do the replacement for this tutorial. A typical FTP session is shown below to illustrate:

It’s a one to one upload from the left side directories (local Hard drive) to the right side directories (web site). Let it rip! :coffee:

Ok, on to the business at hand. Assuming you are logged in and are an admin, you’ll click on the ‘Control Panel’ link and be taken to the Administration of UBB.threads, then click on ‘Styles’ and you are into a new world that might look daunting, but really it ain’t all that bad!

The key things to note here are that you have the currently installed styles on your site. They can either be Active or not and only one style gets to be the Default one. The default style is the one that UBB.threads assigns to any user who hasn’t gone into their preferences and selected one. This also assumes that there will be more than one to choose from!

In our case, we’ll eventually deactivate all but one style; namely, the one we are importing now. Ok, now you get the idea so…

First click on the ‘Import Style’ button and browse to the style import file ‘sd.light-blue_with_wrapper.txt’ and select it.

Then click ‘Continue’ and the file will be uploaded to your server, a delay of a couple seconds will signal final success by showing you a preview of what you just imported!

Now you might think that you’re done here, but not really. We want to do a few things to tidy this puppy up before we go online with it. I’ll list them out as bullets for not only your benefit, but mine as well. I might miss something! :hihi:

• Update and save the style first!
• Change the style name.
• Change the ‘General Images’ folder to light-blue.
• Hey, every site needs a favicon!
• Test drive it as admin.
• Disable other styles and set this to default.

I’m going to assume you did the first item on the list by clicking on the ‘Update or Add Style’ button. So now let’s look at the remaining items:

Change the style name

As much as I like sd.light-blue for the style name, you don’t have to like it!

So just change it to whatever you want it to be and that is how it will be identified on your forum from here on out.

After typing in the new ‘Style Name’ click ‘Update or Add Style’ button and you are good to go.

Now, while you are there you should… read on…

Change the ‘General Images’ folder to light-blue

Next up is to replace the general images to ones that are freely available on the net. So instead of this icon for a forum with new posts in it: we’ll use: instead. I found this image and more by just browsing phpBB3 free template sites and looking for some nice icons from free styles. It’s really easy to do! ;)

Now go to your Control Panel and toggle open the ‘Name, Images & Wrapper’ section. General Images will have a pull-down and you can select the newly uploaded directory from there.

Once selected, you can verify it is all good, by then toggling open the ‘Forum Summary Properties’ section and you will see the new images you just uploaded.

Save your work! It’s a habit of mine and not always necessary, but it doesn’t hurt either ;)

Ok, we’re getting closer to going live with this puppy and it hasn’t been too bad so far!

It is also worth noting that the other directory you uploaded contained style specific images to be used as gradient backgrounds for various pieces of the light blue style. If you toggle open the ‘General CSS Properties” section and then toggle the ‘.navigation’ section, you will see CSS code in there that references a specific directory for background images. The css code is shown below:

color: #000000;
background:url(../styles/images/light-blue/navbar-BG.png) repeat-x;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff #ffffff #b5c6d6 #b5c6d6;
padding: 4px 2px;
text-align: center;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;

Line 2 references the background image to use for the navigation bar at the top of the forum. Note that is a relative URL, which is really nice because it doesn’t matter if you’ve installed your forum in a directory named ‘gizmachi’ or whatever. the ‘../styles/images/light-blue/…’ takes care of that for you.

Hey, every site needs a favicon!

UBB.threads grabs the file ‘favicon.ico’ from the designated ‘General Images’ directory, so just upload one that you prefer on top of the one I supplied in the .zip file. Otherwise you will be seeing on your site! :hihi:

Favicon generators are all over the place, but I will give you one link that I’ve used in the past. [ Here ] There are literally hundreds of sites and utility programs that let you generate one. Just let Google be your friend.

Test drive it

Just give it a whirl. There isn’t really much more to say

Activate it and make it the default

Now you can go back to the Style editor and Enable the style and set it as default. Keep in mind that this is what I’m doing for this site, but you don’t have to do that. You can simply have added it to your stable of themes or whatever.

You are the boss in that regard and here are the files too. ;)