Basic Design
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, A XML file with the name of your theme and
a folder with the same name (You can customize this in XML file.The folder
contains the CSS file with the name “theme.css” and all images you have used in
your theme. The best way to create a new theme is just to make a copy of folder "soclean"
and the file "soclean.xml" and modify them. These are for the theme "So
Fresh, So Clean" which is a standard theme for Yaf. I do the same
thing for our tutorial and I rename the folder to "MyTheme" and the xml to
"MyTheme.xml" which is going to be the name of my theme.
YetAnotherForum
|
themes
|
MyTheme
MyTheme.xml
CSS and XML files are those one we have to play with in order
to shape and customize the theme.
XML file contains information about the name of your theme
which appear in the admin control panel and the name of images (resources) you
have used. Lets take a look at "MyTheme.xml"(which was previously soclean.xml)
.You can open XML files with an editor like notepad.
<?xml version="1.0" encoding="utf-8" ?>
<Resources
theme="So Fresh, So Clean" dir="soclean">
<page name="THEME">
<Resource tag="CREDIT">SoClean Theme
By Jaben Cargman (<a href='http://www.tinygecko.com'>Tiny Gecko</a>)</Resource>
</page>
<page name="FORUM">
<Resource
tag="BANNER">~/forum_banner.jpg</Resource>
</page>
<page name="ICONS">
<Resource
tag="PM">~/icon_pm.png</Resource>
<Resource
tag="EMAIL">~/icon_email.png</Resource>
<Resource
tag="HOME">~/icon_home.png</Resource>
<Resource
tag="BLOG">~/icon_blog.png</Resource>
<Resource
tag="MSN">~/icon_msn.png</Resource>
<Resource
tag="AIM">~/icon_aim.png</Resource>
<Resource
tag="YIM">~/icon_yahoo.png</Resource>
<Resource
tag="ICQ">~/icon_icq.png</Resource>
<Resource
tag="SKYPE">~/icon_skype.png</Resource>
<Resource
tag="SEARCH">~/icon_search.png</Resource>
<Resource
tag="TOPIC_NEW">~/topic_new.png</Resource>
<Resource
tag="TOPIC">~/topic.png</Resource>
<Resource
tag="TOPIC_ANNOUNCEMENT">~/topic_announce.png</Resource>
<Resource
tag="TOPIC_ANNOUNCEMENT_NEW">~/topic_announce_new.png</Resource>
<Resource
tag="TOPIC_NEW_LOCKED">~/topic_lock_new.png</Resource>
<Resource
tag="TOPIC_LOCKED">~/topic_lock.png</Resource>
<Resource
tag="TOPIC_STICKY">~/topic_sticky.png</Resource>
<Resource
tag="TOPIC_MOVED">~/topic_moved.png</Resource>
<Resource
tag="TOPIC_POLL">~/topic_poll.png</Resource>
<Resource
tag="TOPIC_POLL_NEW">~/topic_poll_new.png</Resource>
<Resource
tag="SUBFORUM">~/icon_subforum.gif</Resource>
<Resource
tag="SUBFORUM_NEW">~/icon_subforum_new.gif</Resource>
<Resource
tag="FORUM">~/topic.png</Resource>
<Resource
tag="FORUM_NEW">~/topic_new.png</Resource>
<Resource
tag="FORUM_LOCKED">~/topic_lock.png</Resource>
<Resource
tag="FORUM_STATS">~/folder_stats.png</Resource>
<Resource
tag="FORUM_USERS">~/folder_who.png</Resource>
<Resource
tag="ICON_NEWEST">~/icon_newest_reply.gif</Resource>
<Resource
tag="ICON_LATEST">~/icon_latest_reply.gif</Resource>
<Resource
tag="ATTACHED_FILE">~/icon_file.gif</Resource>
<Resource
tag="PANEL_EXPAND">~/expand.gif</Resource>
<Resource
tag="PANEL_COLLAPSE">~/collapse.gif</Resource>
</page>
<page name="SORT">
<Resource
tag="ASCENDING">~/sort_up.gif</Resource>
<Resource
tag="DESCENDING">~/sort_down.gif</Resource>
</page>
<page name="VOTE">
<Resource
tag="LCAP">~/vote_lcap.gif</Resource>
<Resource
tag="RCAP">~/vote_rcap.gif</Resource>
<Resource
tag="BAR">~/voting_bar.gif</Resource>
</page>
</Resources>
As you can see it contains different tags and names. The
second line which reads:
<Resources theme="So Fresh, So Clean" dir="soclean">
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 "theme" folder that you have put all your images in. In
my case the line above will be:
<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 you forum. It reads:
<Resource tag="CREDIT">SoClean Theme By Jaben Cargman (<a
href='http://www.tinygecko.com'>Tiny Gecko</a>)</Resource>
You can change the copyright text of your theme, add link
and... by changing the words enclosed between ><.In my example the line will
read:
<Resource tag="CREDIT">Theme created by me at 2008</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 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 each 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 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. And if you
select it the forum will look like this:
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.
And if you have created one, it is good idea to share it with
the rest of community.
Happy theme creation
Touradg (forum name herman_herman)
Attachments:
MyThemeMyTheme.zip
Article in PDFArticle in PDF