Beginner’s Guide to Skinning Aardvark Topsites CMS

Not many developers have heard about the open source Aardvark Topsites script for PHP. It is a small user-submitted content engine for ranking websites based on pageviews, or clicks in/out of the site. It is a very simple installation process and easier to manage than you might assume. And while I can see that not everybody would have a need for building topsites, it is an extremely beneficial webapp for users.

In this article I want to introduce some basic concepts around building skins for Aardvark. The whole CMS is open source and free to edit to your own choosing. There are 2 default skins which are quite basic presented as a default choice. But using some typical HTML and CSS styles you can quickly turn any basic template into a full Topsites skin.

Getting Started

You will want to download a copy of the Aardvark Topsites script from their website. Here is the downloads page and you will want to select the most recent version(as of this writing 5.2.1). Unzip the contents and inside you’ll find a folder named skins. The two defaults are “fusion” and “classic”.

Inside each folder you will find a unique set of files. They both contain many similar files and this includes various images as well. Such as the up/down ranking, review icons, and header banners. These do not need to be included with your theme but it is a common trend in various Aardvark websites. But the first thing we should focus on is the file info.php. This is sort of like a meta description for the skin, to explain the name and the author. Here is an example of the template structure:

<?php
// You must give a name for your skin.  The other fields are optional.
$name = 'Fusion';
$author = 'Omar Hachem and Matt Wells';
$email = '';
$url = 'http://www.healingwind.net/';
?>

As stated in the PHP comment, you only need to fill out a name for your skin. Everything else is optional. But it looks nice within the administration panel and it gives you some credit for building the layout.

Common Template Files

I think the most important file to start with is wrapper.html. This will contain the entire page structure, both header and footer codes, all within a single file. Now both the Fusion and Classic skins are built using tables and XHTML doctypes. I would obviously advise starting from an HTML5 doctype and using divs + CSS for positioning.

<table align="center" cellspacing="0" cellpadding="0" width="100%" style="clear: both;"><tr><td>{$content}</td></tr></table>

<div class="bottom">
{$lng->main_executiontime}: {$execution_time} | {$lng->main_queries}: {$num_queries} | {$lng->main_members}: {$num_members}<br />
{$list_name} - {$powered_by}
</div>

This smaller bit of code can be found just before the closing body tag. Notice how almost all of the page content is loaded through a single tag {content}. This will be very crucial to your wrapper. But you will also notice a litany of additional tags to be found in the small footer area. These meta stats definitely stand out but there is one in particular you may have noticed.

Tags which look like {$lng->whatever} are related to inner language files. From the root directory open the folder /languages/ and you will find all of the available options. You can even setup your own custom language variables to be stored in this syntax:

$LNG['g_pv'] = "Pageviews";

Although this isn’t entirely recommended unless you really need the global variable. Keep an open mind about the language vocabulary and use them sparingly, as needed. There are lots of other basic template files to check out as well.

Copying from Skin Sources

If you are planning to build an entire Aardvark skin then it is worth coding a basic HTML5/CSS3 template beforehand. Afterwards you should go back and edit the original template files under a new skin directory, such as /skins/myskin/.

Among the 55+ template files you will see they are all labeled as .html files. Each template file does not represent a whole page, but the presentation of the content on that page. So admin.html will define the content for the admin menu pages. And this will be similar to user_cp.html and table_wrapper.html, the latter of which it actually does make sense to use a table for containing data.

<table class="darkbg" cellspacing="1" cellpadding="1" style="text-align: center;">
  <tr class="mediumbg">
    <th colspan="3">{$lng->stats_overall}</th>
  </tr>
  <tr class="lightbgalt">
    <td colspan="3">{$stats_overall_average}</td>
  </tr>
  <tr class="lightbg">
    <td width="33%">{$lng->g_in}</td>
    <td width="33%">{$lng->g_out}</td>
    <td width="33%">{$lng->g_pv}</td>
  </tr>
  <tr class="lightbg">
    <td>{$in_avg}</td>
    <td>{$out_avg}</td>
    <td>{$pv_avg}</td>
  </tr>
  <tr class="lightbgalt">
    <td colspan="3">{$lng->stats_overall_total}</td>
  </tr>
  <tr class="lightbg">
    <td width="33%">{$lng->g_in}</td>
    <td width="33%">{$lng->g_out}</td>
    <td width="33%">{$lng->g_pv}</td>
  </tr>
  <tr class="lightbg">
    <td>{$in_overall}</td>
    <td>{$out_overall}</td>
    <td>{$pv_overall}</td>
  </tr>
</table>

The above code sample is taken from the table wrapper template file of the Classic skin. You can see how a lot of this code just requires copying/pasting different template tags. There is a list of tags on the Aardvark topsites skin manual page which is basically an exhaustive list. It does provide the most important pieces for building any working topsites skin.

All compatible Aardvark 5.2.x skins should be using a total of 48 different template files, including the info.php and stylesheet document. This is not including all of the extra images and rating icons – which are important – but should be organized into a better folder structure. Ideally you should spend time crafting a basic HTML5 webpage first and then attempt squeezing this layout into an Aardvark skin. The two basic skins are fantastic starting points, and the online documentation is also a resource for new developers.

Free Skin Resources

If you are looking for other resources to download Aardvark skins then check out the links below. This list includes a series of various websites you may utilize to study the basic skin details. Most of the skin tags will appear confusing at first, but over time it becomes a lot easier to start with your own HTML/CSS codes and build from scratch.

• OSEmpire – Skins and Mods for Aardvark 5.2.x
• Gamexe Free Aardvark Topsites Skins
• Forgotten Memories Topsites Skins
• Free Templates – Aardvark Topsites Skins

Final Thoughts

I hope this guide may prove useful to a few interested developers out there. Aardvark Topsites PHP is a really interesting CMS worth studying. It has a lot of basic features, yet it certainly doesn’t have the poise of WordPress’ admin panel. However the skinning engine is very simple once you have studied the global tags and various HTML templates.

If you have other questions I would recommend the Aardvark Topsites forums. You can find a lot of very skilled and knowledgeable developers who have been working with Aardvark a long time. Plus there are a whole bunch of free mods and skins you can check out for a basic starter template. It is an exciting system and definitely worth a deeper look if you have the patience.