[iGuide] Theme Design

[Liam.]

Hello everyone,

You love your site, right? Well if you do, then you obviously want it to be unique and pretty, to attract more members to it, and make them stay. Believe it or not, the first thing that members will judge your site on, is the theme design. Sure at the SMF Themes Site there are alot of good looking themes, but they're all public. If someone releases a good theme, then alot of people are going to be using it for their site. You could alternatively pay a big wad of money to Are you going to be one of those people who uses such a common theme, and make it seem like you have a common website?

Well then, this iGuide to SMF Theme Design will surely help you out! In this iGuide, you will learn about various parts of Designing Themes in SMF. From changing the logo to adding your own copyright notice. From moving the menu around to making it static. This iGuide will have what you want to know. Whether you wish to edit an existing theme to your liking, or create a totally new one from the default theme.

This iGuide has various parts to it, including how to package the mod, editing the CSS, the Template Files, images, and alot more. So to help split down each part, they are each in a separate post. There are also screenshots of the theme as we are going along with it, to help you visualize the changes that we make on your designing journey.

Using A Test Site

If you want to make themes alot, then a Test Site is the best option for you. But why have a test site? Well there are many reasons on why to. Don't mess up your main site, don't let others see the mistakes you make.

Creating A Test Site

If you want to make themes alot, then a Test Site would probably be the best option for you. But when it comes down to it, you then have two options. Using localhost, or creating a Test Site on your host. So then, here is a bit more of information on each of the options you have at this stage.

Using LocalHost

You've probably heard of localhost before. It is usually the server name on many hosts. It is also a website, in a certain way. http://localhost/ is the URL you should use to access it, but it doesn't work that easily? You would need PHP, MySQL, and other things like that installed first, before you can use localhost to its full potential. Probably the best software that installs all of this for you, would be WAMP Server. From there, you can go to this directory; "C:\wamp\www" on your computer, make a new directory, and install SMF in there, using http://localhost/$dirname. It's as simple as that.

Using An Online Test Site

You've most likely already installed SMF before, so do it again. Just in another directory, and with a different Database Name/Prefix.

Setting Up Your New Theme

So to start off on designing themes, you need to have a theme to work on. In this tutorial, we will be editing SMF's default theme, "Core". You can use the methods and tips that you learn in these iGuides, and apply them to use in existing themes to edit those to your liking, however never take out the copyright of themes that others have made - just because you know how to. If you want to remove the Theme's copyright, contact the theme owner.

Installing a copy of Core could never be simpler! Just go to your Administration Control Panel, logged in on an Administrator Account, and as you should be aware, there are five main categories, "Main", "Configuration", "Forum", "Members", and "Maintenance". There are also items under those categories. Under the category "Configuration", go to "Themes and Layout". From that page, you have three sections; "Themes and Layout Settings", "Latest and Greatest Themes", and "Install a New Theme". So we're going to want to be on the latter. Under that box, there are three options, we're not going to be installing a theme from a file, or the server, so we can forget the first two boxes, however the third is what we want. "Create a copy of Default named:". In that box, you can choose the name of the theme that you are making. By default, it is "theme1", and you can leave it as that, although remember that you can change the name of the theme whenever you want, so don't worry if you choose a name that you don't like, or won't be suitable.

Then you click "Install". A popup box will appear, asking if you're sure that you want to install a new theme. Click "OK" on that popup. You'll then have a dialog telling you that it is installed successfully, and you will have a button that says "Back". Click on that.

Now you come to a dilemma. Are you on a Test Site? If you are on a Test Site, then select the default theme to be the theme that you've just created, and reset everyone to that theme... If you're not on a Test Site, but on a live site - you have two options. Let everyone see what you're doing to this theme by resetting everyone to what you have just installed, or alternatively you could disallow others to be able to use that theme, but select it yourself personally. To make only yourself see that theme, then click on "[ Show the list of themes ]", and untick the theme that you just created. Then head over to your profile, and go to "Look and Layout". You can change your theme from the "Current Theme" section, after clicking "(change)". Then, select the theme that you just made, and press "Use Theme".

Congratulations, now you've gotten your theme ready to edit!

Remember that installing a copy of the default theme does not copy all of the files across, just the important ones. You'll learn more about the files that you need for editing certain parts of your theme later on in this tutorial. At the moment, in your $themedir you should now have these files and folders.

images   |   css   |   theme-info.xml    |     index.php    |     style.css     |     index.template.php

Packaging Your Theme

If you wish to release your theme to the public, and upload it to the SMF Theme Site, then you'll need to package it. Packaging your theme really isn't hard, and there are only a couple of things that you need to know before packaging your theme. As for the "theme-info.xml" file, there is a whole post about that below.

You can package your theme in a couple of types of files. The most common type of file to package themes in is a .ZIP file. However, the second most common is a .TAR.GZ File. .TAR.GZ is the Apple Mac's equivalent of .ZIP files. It doesn't matter what you package them up in, as SMF recognizes both file types. The most recommended to package your theme in is .ZIP files as they're easier to use. You may need a program such as WINRAR or WINZIP to open these, however Windows by default, can open them just like a normal folder.

Also, you need to know about the file name. Whatever your file name is, will be the directory that SMF extracts the Theme to. Say I call my theme file "iguides.zip". That works well doesn't it? Then you come to another dilemma, at the moment there is no way to have one file that supports both SMF 1.1.X and 2.0, wheras you can with modifications. So if you have two themes, one for 1.1.X and another for 2.0 - the best option would to name your files something like this; "iguides-1.1.x.zip" or "iguides-2.0.zip".

When you package your theme in a .ZIP file, you need to just grab all of the files in that themes directory, and put them all into the .ZIP file. As simple as that.

Now that you can package your theme, you can release it on the SMF Themes Site, give it to friends that use SMF, and have fun seeing how others use the theme!

theme-info.xml

When you make a theme, you can decide to upload it to the SMF Theme Site, allowing it to be installed in other forums if they upload the package. If you want people to be able to install your themes, then you should look at the file "theme-info.xml". It has the details needed for when you upload a theme, such as the theme name, creator, etcetera. Here is the example file from our "iGuides Theme".

Code (iGuides Theme) Select Expand


<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>smf:iguides_theme</id>
<version>2.0 RC1.2</version>
<!-- Theme name, used purely for aesthetics. -->
<name>iGuides Theme</name>
<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="Simple Machines">[email protected]</author>
<!-- Website... where to get updates and more information. -->
<website>http://www.simplemachines.org/</website>
<!-- Template layers to use, defaults to "main". -->
<layers>html,body</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>
</theme-info>


Looks a bit hard at first sight, but it's so simple when you get used to it! To start off, all of the text inbetween the "<!--" and "-->" tags are comments. That means that they bare no actual help in the file, they don't do anything. But first off, they're good for you. Each of the comments in this file help you to learn a little bit more about the information below it. Lets take a look at each of the lines, so we can produce our own file. First of all, start off by opening your "theme-info.xml" file in a text editor. DreamWeaver, NotePad, WordPad, or anything like that will do. The file is in the $themedir - which is the root directory of your theme.

Code (1,2) Select Expand

<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">

The first two lines here show that the XML Version of the file is 1.0, and that it is a theme-info file - which allows SMF to read it. Don't edit this, you don't need to, and chances are that it will break the file.

Code (3,4) Select Expand

<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>smf:iguides_theme</id>

These two lines tell you who made the theme, and what the theme is called. This is mainly used when uploading your theme to the SMF Theme Site, but it's recommended that you fill it in anyway. As it says, your name, a colon, then the theme name. We can change the information in the ID tags to this: <id>iKorp:iGuidesTheme</id>

Code (5) Select Expand

<version>2.0 RC1.2</version>

This line tells you what version of SMF this theme is made for. By default, it is the version of SMF that you installed the theme from, in this case, SMF 2.0 RC1.2. Obviously, if you make the theme for SMF 1.1.X, it won't work on SMF 2.0, unless it's image changes and you don't include the "index.template.php" file. You cannot just change this piece of code and expect the theme to work for another version of SMF.

Code (6,7) Select Expand

<!-- Theme name, used purely for aesthetics. -->
<name>iGuides Theme</name>

As you could guess from this, this is the theme name. This appears where the user decides to change their theme, and in the Admin Panel where you can set the default theme, and reset the themes... This can use spaces, so doesn't have to have underscores or have it as one long word. When you copied the default theme, you chose the name of the theme then. However if you want to change it again, this is the place.

Code (8,9) Select Expand

<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="Simple Machines">[email protected]</author>

This decides who the author is. It includes your EMail Address, so people can contact you, aswell as your name. In the "Latest and Greatest Themes" in your Admin Panel, it has the theme name, followed by the author name. The author name there has a "mailto" link to the EMail Address that you put in here. That means that if someone likes your theme or wants to contact you about something, they can by using that Address.

Code (10,11) Select Expand

<!-- Website... where to get updates and more information. -->
<website>http://www.simplemachines.org/</website>

This is your website URL. If a user wants to get updates for your theme, or maybe small theme hacks for it,

Code (12,13) Select Expand

<!-- Template layers to use, defaults to "main". -->
<layers>html,body</layers>

Within the themes template files, you have layers. The layers are like <html>, <body> tags, etcetera. As by default, the html and body layers are the two that only really needed to be used, but as you get better with theming, you will learn about the other layers that you can put in there.

Code (14,15) Select Expand

<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>

You don't really need to change this. You know you have "something.template.php" files in your theme directory? This bit of code tells it to load any specific templates, on startup. What is already in there, "index" is perfect for it, because that then calls all other templates when they're needed.

Code (16,17) Select Expand

<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>

If you've based your theme off of something, or another theme, then this is the place to put it. If you just thought it up out of your head, then you can leave this blank.

Code (18) Select Expand

</theme-info>

This signifies the end of the "theme-info" file, so that SMF will stop reading the file from there on.






So now that you know about the functions that "theme-info.xml" uses and has, so try creating your own by editing the current one you have. You don't have to do this, but alot of people do, and it makes it seem clearer. Remove the "<!--" and "-->" tags and the content of them. That frees up seven lines and make it alot easier to see and read. Then edit the rest so it suits your theme. This is what the iGuides Theme ends up as.

Code Select Expand

<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<id>iKorp:iGuidesTheme</id>
<version>2.0 RC1.2</version>
<name>iGuides Theme</name>
<author name="iKorp">[email protected]</author>
<website>http://www.ikorp.net/</website>
<layers>html,body</layers>
<templates>index</templates>
<based-on></based-on>
</theme-info>

[H]

Topic compacted into just one post and moved to the Graphics board . Building Your Community and other Forum Advice is more intended for forum policy and moderation strategy

[Liam.]

Okay, I just thought that having it all in one post would be a bit too much, because of the amount of things that are in it ^_^ And thanks for moving it, I couldn't decide on which board to put it in...