Newbie’s Guide to SMF Theme Design

Before you can design a theme for SMF/Tiny Portal you will need several things, I recommend the following; 

PHP Editor

Graphics program

FTP Program

Hex Color Chart

Test Site 

I recommend a test site for design because it makes me nervous to work on a live site. 

Creating a new theme. 

To be able to create a theme, you first need administration privileges on the forum that you are using.  

Go to the admin area of the forum, under Configurations click on  -> Theme and Layout -> then look toward the bottom and click on Install a New Theme.

The Install a New Theme dialog contains 3 fields we have to look at. We can install a new theme from a file, from a directory on the server, or create a copy of the default theme. Since we're creating a new theme, we can ignore installing a theme from a file, or from a directory on the server.

We need the "Create a copy of Default named" field. Here, you can change the name to whatever you want, or you can leave it as it is. Click "Install!" and hit "OK" for any dialog boxes that may appear - your new theme should be up and running.

A copy of a default theme will not copy the whole theme - instead it just copies the basic files needed for a theme, any template that is not copied is called upon if needed from the default theme. The new theme will have the following files:

• index.php
• index.template.php
• style.css
• images folder

Editing Your New Theme

The new theme's name should now appear in the "Theme Settings" box, in the "Theme and Layout Settings" section of the admin panel.  

To change the look of your images in your new theme, you will need to download the files from your site to edit them. 

We are doing to start off very basic and just change colors on a few areas in this tutorial. 

Assuming that you are on your test site and you have your new theme selected at the default theme for you test forum, let’s get ready to start changing things go to your admin area and click on "Theme and Layout Settings" then click on "Theme Settings", you will see

First let’s start by opening the style.css and we are going to change the background color.

Click on modify the style sheet  and look for the area that says:

Now look at the hex color chart and find the color you want to change the background to lets go with a dark blue for this one and change the background-color number to the one you want to use, so instead of having:

background-color: #E5E5E8; 

We will have:

background-color: #416498;

Now click save and then refresh your browser to see the color change. Congratulations, you just did your first modification to a theme. Remember you can change this to whatever color you choose at any time.

These are the images you will be using to change the colors on your new theme. Now download your new theme to your desktop  and then open this images folder and open your images with your graphic program and lets change the the color.

Now let’s start by making a modifications to images, the images that we are going to modify are the following: 

These three images are displayed in your forum on top of the boards, blocks and header area of your forum.

Open these images in your graphic's program, I use Fireworks 8. Once opened select the image and then adjust the Hue/Saturation a box opens and I click colorize and then slide the adjustment level to get the desired color. I repeat this for all the images until every image in the theme is the color I want it to be.

Once you change them you can use your ftp program to upload them to your test site into your new theme folder/images. Once that is done look at your new images on the theme.

You will need to modify the style sheet to make the colors match your new images. The background of the post and TP Blocks, and you can also change the entire color of the body of the forum.

Once your new images are upload open your style.css in your admin panel:

Click on current theme and look for this:

Then Click on modify the style.css file and it will open to look like this.

Note that you will see a mini picture of your forum on top of the style.css settings. This gives you a preview of things you are changing.

Go through your style.css and make changes to the areas that effect the theme that you want changed, and don't worry about messing anything up, you can always upload a new style.css and start over. This is the biggest reason we do not modify a live site.

Once you make the changes you want click on save and then refresh your browser to see your new design.

This is a very basic tutorial, there are many areas that are not covered here. However this will get the new designer on the road to designs.

By RebelRose

Still have questions on Theme design ask on the forum. This is just the first of many tutorials that will be added to the site. More tutorials with more indebt information will be added at a later time. I hope you enjoyed this tutorial and that you have learned at least the beginning steps to take in Theme Design.