The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

Previous Entry Share Next Entry
[component] [paidaccount] Adding a counter
howto_user wrote in s2howto
Because the Component layout includes a Free Text component that allows the use of HTML, it is not necessary to use this tutorial to add a counter. The preferred method of adding a counter to layouts is through the Free Text option, which is explained here. This tutorial is being retained for historical and informational purposes only.

Paid Accounts Only
The following tutorial requires creating and editing a custom theme, 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.

It is possible for paid members to add additional code to their style that will allow them to display a counter on every page. This tutorial will cover how to add a counter to the sidebar of the Component style.

This tutorial requires you to turn on the "Free Text" component. You can do this by using the S2 customization interface at http://www.livejournal.com/customize/ . You will have to click 'Yes' under the "Enable Free Text" option. Note that you do not have to enter any free text to be displayed, only to turn the component on.

Next, you will need to edit your theme layer.

Once you have opened your theme layer, you will need to override the "print_free_text" function so that it prints an additional component. For information on how this works, please see this tutorial on adding components to the Component layout.

The following code will replace add a counter component below the free text component.

function print_free_text(Page p) { if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } print_comp_header("Counter");

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

print_comp_footer(); }



Note that the counter code above is example code. This code should be replaced by the code that you obtain from your counter site. For more information on what counter services work properly in LiveJournal, please see http://www.livejournal.com/users/howto/1332.html . Note that LiveJournal does not allow Javascript, and, as such, no counters which use JavaScript will work properly.

If you prefer for your free text component to be below the counter component, simply use this code instead:

function print_free_text(Page p) { print_comp_header("Counter");

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

print_comp_footer(); if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } }



Remember that in order for your counter to display, you must select your theme layer, which you can do via the S2 Customization interface.

This component will show on all views of your journal - Recent Entries, Each Entry and Reply Page, Friends page, Day View, Month view, and Calendar view. If you wish to change this, you will need to surround the section of the code above that displays the counter with a conditional statement so that this code displays only on a specific type of page. For example, if you would like your counter to only display on your recent entries page:

function print_free_text(Page p) { if ($*free_text_text and $*free_text) { print_comp_header($*free_text_text); """$*free_text"""; print_comp_footer(); } if ($p.view == "recent") { print_comp_header("Counter");

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

print_comp_footer(); } }



The types of views you can use are:
recent - Recent Entries Page
friends - Friends Page
archive - Calendar Page, which displays full year
month - Month Page, which displays a subject view of the entire month
day - Day Page, displaying entries of a single day
entry - Entry Page, displaying a single entry with comments
reply - Reply Page, displaying an entry with a reply form

Simply replace the "recent" above with one of the types above to modify where this code displays.

Thanks to xevinx for the original post on which this tutorial is based.

Comments Disabled:

Comments have been disabled for this post.

?

Log in