howto_user (howto_user) wrote in s2howto,

[paidaccount][tabular indent] Adding a counter

Paid Accounts Only
The following tutorial requires creating and editing a custom style, which in turn requires a paid, permanent, or early adopter account. Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

This tutorial will cover how to add a counter in the Tabular Indent layout. It will override the function captionbar(Page p). This requires the creation of a theme layer. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.

You will need to copy the following code into your theme layer, making sure to include everything:

function captionbar (Page p) {
    var string title = $p->title();

    var string userpic;
    var Image up_img = $p.journal.default_pic;
    if (defined $up_img) {
        $userpic = """<img src="$up_img.url" height="$up_img.height" width="$up_img.width" alt="[icon]" />""";

    var string website_name = $p.journal.website_name ? $p.journal.website_name : $*text_website_default_name;
    var string website;
    if ($p.journal.website_url != "") {
        $website = """<tr><td>View:</td><td><a href="$p.journal.website_url">Website ($website_name)</a>.</td></tr>""";

    var string links;
    foreach var string v ($p.views_order) {
        $links = "$links<tr><td>View:</td><td>" + ($p.view == $v ?
                           lang_viewname($v) :
                           "<a href='$p.view_url{$v}'>"+lang_viewname($v)+"</a>") + ".</td></tr>\n";

    var string captionbar_userpicbox_style = "background-color: $*captionbar_userpicbox_color";
<table height='100' class='captionbar' cellpadding='5' cellspacing='1'><tr>
  <td class="captionbar-userpicbox" align='center' valign='center' width='100' style='$captionbar_userpicbox_style'>$userpic</td>
  <td><b>$title</b><br />
    <table border='0'>
        <td colspan='2'>""";


Inside this code, you are going to insert the HTML for a counter. You can use any counter that does not use JavaScript or server-side-scripting to do its tracking. This HowTo entry has information on counters in general. Specifically, the bottom of the post has information on where to find counters on the internet.

Once you have found a counter you can use, you need to escape the code before adding it to your custom layer. To do this, surround your counter code with a "triple string literal", or three quotation marks in a row. The following is an example of sample Sitemeter code escaped using triple string literals:

<a href="" target="_top">
<img src="" alt="Site Meter" border=0></a>

You may also need to add a <br> tag before or after the counter code, so that it appears on a separate line.

Now that you have this code, you can insert it anywhere you want in the above function. Simply copy and paste the counter code (including the quotes) into some part of the above function. For example, to put this code directly above the navigation, the bottom of the function above would read:

        <td colspan='2'>""";
""" <a href="" target="_top"> <img src="" alt="Site Meter" border=0></a> <br> """;
$p->lay_captionbar_navigation(); " </td> </tr> </table> </td> </tr></table>"; }

Compile your layer, and it's ready to use. You will need to apply your theme layer via the Customize interface in order for your changes to take effect.

Contributed by </a></b></a>camomiletea.

Tags: - tabular indent, counter, paid accounts only

Comments for this post were disabled by the author