Template Management
osDate v2 has made a strategic change in template management and delivery, effective from osDate_v2f beta onwards.
The master templates are placed in the directory /templates/default. /templates/default-blue is no longer treated as the master template directory. osDate first looks to see if the requested template is in /templates/skinname, and if not present, it retrieves the template from /templates/default/. This is why you can create a skin in osDate without re-writing every .tpl file.
All default images, which were previously kept in the /images directory, have now been moved to /templates/skinname/images directory. (e.g. /templates/default/images). This include male.jpg, female.jpg and couple.jpg. This enables template-based default images to be used, rather than having one default picture for all templates. For example, the default male/female/couple profile images can now be customized for each skin.
Another important change is the way HTML emails are rendered. All HTML emails use the email.css file defined for each skin. You need to modify default.css and email.css to change the colors, and look/feel of the skin.
Page header and section header have been split into two tpl files - page_hdr01.tpl and page_hdr02.tpl. page_hdr01.tpl will show headings where ever the blue_windows_3_bars.jpg is now used. page_hdr02.tpl to be used where blue_hor2.jpg is used. This was done to enable more freedom in defining the header design, so that it can better match the background look and feel. In addition to these two, there is leftcolumn_item_hdr.tpl which is used to define the heading of items in LeftColumn like Stories, Language select, Shoutbox, IM, etc. The picture names can be changed to any name you want, as long as the picture is available in the /templates/skinname/images directory.
Please see the black-grey skin and new default-blue. New default-blue doesn't have many files in it. Only the css and images are still present. Thus, all .tpl details come from /templates/default/ instead when default-blue skin is enabled.
If you want to add a new skin, please follow these steps:
1) Copy existing template directory (not default but perhaps default-blue) to new skin directory, and name the directory to the new skin name of your choice.
2) Load all images to /templates/newskin/images directory, including male.jpg, female.jpg and couple.jpg.
3) Start working with index.tpl and copy only those tpl files which you want to change from default to your new skin directory. Do NOT copy all files from default to new skin directory. You need to copy only those which are absolutely need to be changed. This permits you to take advantage of osDate template upgrades. For example, suppose a later version of osDate comes out with an upgraded shoutbox.tpl file. If your new skin does not change that file as part of its design, then your skin will also have the upgraded shoutbox.tpl file, since it will draw from /templates/default/ rather than your skin directory.
Do this process for /admin also (copy over to your new skin directory ONLY those files that you wish to change for your new skins). It's recommended that you copy a minimum number of files over (perhaps zero!), so that you can take full advantage of osDate template upgrades.
You should be ready with your new skin.
If your design is comparable with existing design, then you may end up copying about 25-30 files only, perhaps even less if your skin is very similar to the default osDate skin.
The most important template files to consider when designing your new skin are homepage.tpl, stats.tpl, hdr_login.tpl, home_featured_profiles.tpl, home_memberssincelastlogin.tpl, home_newmemberlist.tpl, lang_select.tpl, news.tpl, poll.tpl, shoutbox.tpl, im.tpl, polls.tpl, nickpage.tpl, special_offer.tpl, stories.tpl, user_home_stats.tpl and userresultviewsmall.tpl
At this point, you may be asking: In the default template, the header images are broken into pieces, and are difficult to manage. How can I do this in a much easier way?
This is a valid question, and the answer is very easy. Please evaluate following code and see how this is done in all sold templates in tufat.com (this is just an example):
{* Header picture and data acceptance *}
<td height="148" width="800" style="background-image: url({$image_dir}hdr01.jpg); background-repeat: no-repeat;" valign="top">
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr>
<td width="362" valign="top" >
<table border=0 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td width="240" style="padding-left: 12px; padding-top: 16px; " valign="top">
<a href="index.php" class="main_title">{$config.site_name|stripslashes}</a>
</td>
<td align="right" valign="top" style="padding-left: 20px; padding-top: 16px; " >
{include file="searchprofile.tpl"}
</td>
</tr>
</table>
</td>
<td width="238"> </td>
<td width="200" valign="top" style="padding-left: 1px; padding-top: 16px;">
{include file="hdr_login.tpl"}
</td>
</tr>
</table>
</td>