Loading...
 

Members Forum

Basic Theme Design


Creating a theme for YetAnotherForum is a very simple process in comparison with other discussion boards. All themes are located in “themes” folder and have a standard structure, An XML file with the name of your theme and a folder with the same name (You can customize this in the XML file.The folder contains the CSS file with the name “theme.css” and all images you have used in your theme.

YetAnotherForum >> themes

CSS and XML files are those ones we have to play with in order to shape and customize the theme.

XML file contains information about the name of your theme which appears in the admin control panel and the name of images (resources) you have used. You can open XML files with an editor like notepad.

When you open your XML file, you can see that it contains different tags and names. The second line as an example could read:

<Resources theme="Natural Spring Water, All Natural" dir="allnatural">

is the most important line. Here you set the name of your theme which independently can be anything and the value "dir" which is the name of the directory under the "theme" folder that you have put all your images in. For example, you can change it to:

<Resources theme="My Beautiful Theme" dir="MyTheme">

The fourth line is just an addition which can be there for more information and is shown at the bottom of your forum. An example of this could be:

<Resource tag="CREDIT"> All Natural Theme By John Smith (&lt;a href='http://www.webaddress.com'&gt;WebAddress&lt;/a&gt;)</Resource>


You can change the copyright text of your theme, add links and... by changing the words enclosed between ><.In my example the line will read:


<Resource tag="CREDIT">Theme created by me</Resource>

The rest of the lines in XML are just decelerations of the name of images you have used. For simplicity of our creation, leave them untouched. But you can customize the name of the images you have used anyway.

So far we have just setup our basic theme, its name and copyright note. Now we want to modify the colors, fonts, images, buttons and....All of these things are done through the CSS file which is called "theme.css". To edit this, you have to have some knowledge about CSS and its structure. I am not going to teach you how to create a CSS file, but they have a simple structure. A CSS file is divided into different sections called class, which defines the look of a certain section of the forum, for example, the menu. You can edit a CSS file with just a simple editor like notepad. But it is better to use a more complete editor, lets say, Visual Studio or Microsoft Expression Web. Each class has a name related to the section they are controlling, for example, class ".yafnet .header1" controls the header section of the forums and it reads:

.yafnet .header1 {
background: url('bg_header1.png');
background-color: #353535;
color: #FFFFFF;
font-weight: bold;
line-height: 26px;
font-size:12px;
}


I want to have a red header with no background texture, with an italic font with the size of 14 .Therefore the above class will become:

.yafnet .header1 {
background-color: #FF0000;
color: #FFFFFF;
font-weight: bold;
font-style: italic;
line-height: 26px;
font-size: 14px;
}


It is that easy to edit and modify the look of a theme, and even to create yours from scratch. Now if you run the forum and go to the admin section, your theme will appear in the drop down menu as mine.

Moreover, you can change or create different images for your theme and replace the original ones located in your theme directory, in this case MyTheme, and don't forget that they have to have the same name and type as the original, unless you change this in the XML file.

Using the Forums


Login as Admin.

Click on Admin in the top task bar.

Click on Forums on the left hand menu.

From here, you can create Categories and add forums to each category. If you want to create a Forum, you click on the Category that you would like the Forum created in and click New Forum.

Choose which category the forum should go under, and Name the forum to anything you like with a small description of the forum. Leave Remote URL blank and choose a sort order.

Hit Save.

This will create the new forum and will now be viewable, and where new posts can be added.


Back to Tutorials