The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Share Next Entry
[paid accounts only][punquin] Adding a counter
howto_user wrote in s2howto
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 replace the print_sidebar(Page p) function in the Punquin Elegant style. This new code will be placed in a theme layer. If you already have one of these for your style, just go to edit it. If you wish to use a non-default theme, you should select one before following the rest of this tutorial. If not, you will need to create one by following the instructions in the Theme Layer tutorial.

You will need to copy the function print_sidebar(Page p) to your theme layer. At the Public Layers page, select Punquin. Click "Raw Source Code" when viewing a style to download the S2 source. Then locate and copy all of the print_sidebar(Page p) into the layer edit window for your theme layer. This function will be like the following code:

function print_sidebar(Page p) {
    var string title = $p->title();
    var string userpic;
    var Image up_img = $p.journal.default_pic;
    if (defined $up_img) {
        $userpic = """<p align="center"><img border="0" src="$up_img.url" height="$up_img.height" width="$up_img.width" alt="" /></p>""";
    }

    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 = """&gt; <a href="$p.journal.website_url">$website_name</a><br />""";
    }

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

    # Table Wrapper
    "<!-- Begin Main Sidebar -->\n<td valign='top' align='$*sidebar_position'>";
    "<table width='150' class='standard' cellpadding='5' cellspacing='0'>\n";
    "<tr valign='top'><td align='left'>";

    # Title
    "<div style='text-align:center'><span style='color: $*title_color'><strong>$title</strong></span></div>\n";

    # Links
    "<p>$links\n$website\n";
    $p->lay_sidebar_navigation();

    # Userpic
    "</p>"; if($userpic != "") { "<div style='text-align:center'>$userpic</div>"; }

    # Link List
    if (size $p.linklist > 0 and $*linklist_support) {
        if (not $p.linklist[0].is_heading) {
            "<b>Links</b><br />";
        }
        $p->print_linklist();
    }

    # End Table
    "</td></tr></table>\n<!-- End Main Sidebar -->";
}

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 post 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="http://smx.sitemeter.com/stats.asp?site=xxxxxx" target="_top"> <img src="http://smx.sitemeter.com/meter.asp?site=xxxxxx" alt="Site Meter" border=0></a> """;

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 bottom of the table, the bottom of the function above would read:

        }
        $p->print_linklist();
    }

""" <a href="http://smx.sitemeter.com/stats.asp?site=xxxxxx" target="_top"> <img src="http://smx.sitemeter.com/meter.asp?site=xxxxxx" alt="Site Meter" border=0></a> """;

# End Table
"</td></tr></table>\n<!-- End Main Sidebar -->"; }

Note that you should not place this code inside the Link List loop, because this loop is only executed in some cases.

You will need to apply your theme layer via the Customization interface to allow your changes to take effect.


Comments Disabled:

Comments have been disabled for this post.

?

Log in

No account? Create an account