s2howto

If you have your journal style customized, to display Your Journal - Your Money ads on your journal pages, you need to call the print_ad_box("type") method of the Page class in the code of your layout layer. Where 'type' is defining ad format as follows:

s2.top	728x90 Top
s2.vertical	160x600
s2.box.top	300x250
s2.bottom	728x90 Bottom

To add html code around the ad block, viewer_sees_ad_box("type") clause could be used. Where 'type' is an appropriate banner value.

Example

The following code could be used to display the 728x90 Bottom banner:

var Page p = get_page();
if (viewer_sees_ad_box("s2.bottom")) {
   "<div class=\"ad\">";
   $p->print_ad_box("s2.bottom");
   "</div>";
}

Contributed by arteman.

[ Go Back | List of Layouts | List of Features | s2minimalism ]

Sample images:
   

Configurable Options:

Other Features:

Changing Comment Link Text Changing Navigation Text * Custom CSS Disable Friends Userpics Free Text/Extra Sidebar Content Heading Text for Page Summary * Navigation Strip Colors * Number of Journal Entries on Page Order of Entries on Day View Order of Months on Year View Renaming Currents * Replacement Stylesheet URL * Shared Journal User Pictures Sidebar Contents Sidebar Position * Site Scheme Comment Pages Text to Replace Subject Line When Empty

Icon Toolbar on Entry View Page * Link List Mini-Calendar Page Summaries Tag List in Sidebar * Timezone Support User Pictures on Recent Entries

* Features denoted with an asterisk are common to all layouts.

[ Go Back | List of Layouts | List of Features ]

The layouts listed below provide an option on the Customize Journal Style page to reverse the order of entries displayed on your Recent page (http://exampleusername.livejournal.com/). It is not possible to completely reverse the order of all entries in your journal; if your Recent page is displaying the 20 most recent entries, this option will only display the 20 entries on each page in chronological order (i.e. least recent first).

• Disjointed
• Refried Paper

This function will change the display of your comment count from numerals to number (e.g. "12 comments" becomes "Twelve comments"). This will work up to a comment count of 99, after which the count will be displayed in numerals. However, this function will not work for layouts that do not call the CommentInfo::print_readlink() method, some of which are Smooth Sailing, Refried Paper, Unearthed, and Disjointed. If you are using one of these layouts, you will need to modify the code that prints the "Read Comments" link to use this function.

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

function CommentInfo::print_readlink {
    var Page p = get_page();

    var string[] ones = ["Zero","One","Two","Three","Four","Five","Six","Seven","Eight","Nine"];
    var string[] teen = ["Ten","Eleven","Twelve","Thirteen","Fourteen","Fifteen","Sixteen","Seventeen","Eighteen","Nineteen"];
    var string[] tenths = ["","","Twenty","Thirty","Forty","Fifty","Sixty","Seventy","Eighty","Ninety"];
    var string text;
    var string comment_text_s = "reply";
    var string comment_text_p = "replies";
    var int rest;
    var int elevens;

    if($.count>99) {
        $text = "" + $.count;
    } else {
        $rest = $.count / 10;
        $elevens = $.count % 10;
        if($rest>0) {
            if($rest==1) {
                $text = $teen[$elevens];
            } else {
                $text = $tenths[$rest] + ($elevens>0 ? "-" + $ones[$elevens] : "");
            }
        } else {
            $text = $ones[$elevens];
        }
    }

    $text = $text + " " + (($.count==1) ? $comment_text_s : $comment_text_p);
    if($.screened) {
        $text = $text + " <b>$*text_month_screened_comments</b>";
    }
    print safe """<a href="$.read_url">""" + $text + "</a>";
}

You can alter the text in orange to change the text displayed after the number of comments for both singular and plural text, respectively. 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.

Originally written by nigi_atp and prissi with elements borrowed from a previous tutorial by gamble.

This tutorial describes a simple method for reversing the order of entries on your Recent Entries page, changing them from reverse-chronological to chronological, under Magazine, Punquin Elegant, or Tabular Indent. This will only reverse the order of entries on each page — navigation will still work in reverse-chronological order. Additionally, this tutorial explains how to reverse the entries on your Friends page, changing them to the order in which they were posted to LiveJournal servers, in the same layouts. Similarly, the navigation will still work in the reverse order.

This tutorial will replace the function RecentPage::print_body and/or FriendsPage::print_body. This new code will be placed in a theme layer. If you already have a theme layer for this layout, you can simply edit it. Otherwise, you need to create one as explained in the Theme Layer tutorial.

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

function RecentPage::print_body() {
    foreach var Entry e (reverse $.entries) {
        if ($e.end_day) {
            $e.end_day = false;
            $e.new_day = true;
        } elseif ($e.new_day) {
            $e.new_day = false;
            $e.end_day = true;
        }
        $this->print_entry($e);
    }
}

The code in orange changes the order of the entries.

The above code will change the order of the entries on your Recent Entries page only. If you wish to have this effect on your Friends page (alone or together with your Recent Entries page), you will need to copy and paste the following code:

function FriendsPage::print_body() {
    foreach var Entry e (reverse $.entries) {
        if ($e.end_day) {
            $e.end_day = false;
            $e.new_day = true;
        } elseif ($e.new_day) {
            $e.new_day = false;
            $e.end_day = true;
        }
        $this->print_entry($e);
    }
}

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.

Originally written by skywhisperer with elements borrowed from a previous tutorial by gamble. Re-written by camomiletea. Simplified and reworded in spots by pauamma.

Most of the themes in the Expressive/Expressive Winter/Mixit family already feature header images. This tutorial explains how users can replace these header images with his or her own using the Custom Stylesheet option. Before beginning this customization, note that your image should be in a valid format (.jpg, .gif, .png, etc.) and hosted by a website that allows remote loading. For best results, your image should be 940 pixels wide, but the image height is not restricted.

The Custom Stylesheet option can be found in the Customize Journal Style area by clicking on the "Custom CSS" link in the left sidebar. You will need to add the following code to the "Custom Stylesheet" field:

#header-inner { 
    background-image: url("http://www.example.com/image.jpg");
	height: 200px;
}


#header {
    background-image: none;
}

You will need to replace the URL address in orange with the actual URL of your image. You will also need to replace the number 200 with the height of your image in pixels, plus any additional space you might want. The code in blue is required for some themes to suppress the original header image.

Depending on the "base" theme of your journal, you may need to add additional codes to prevent additional images from displaying. If you are using a style based on one of these themes, add the lines appropriate to your theme.

Bunnylicious, Weston, Cherry Blossom, Clouds

#header-content { 
     background-image: none; 
}

Fleur

#header-content-inner { 
     background-image: none; 
}

Bloom, Playful Robots, Poe

.layout-tw #header { 
     background-image: none; 
}

For these themes, replace the orange text according to your column layout:
Two-column, sidebar on left: tw
Two-column, sidebar on right: wt
Three-column, content in middle: twt
Three-column, sidebars on right: wtt

Click the "Save Changes" button at the bottom of the page to apply the customizations to your journal.



Contributed by av8rmike.

Cascading Style Sheets (CSS) allow you to change a lot of things in your journal. All of the system layouts support the ability to enter your custom CSS. However, if you are using a custom layout that doesn't have such an option, or if you would like to use different CSS on different page views, you can use print_custom_head() method in a custom theme layer.

The print_custom_head() method allows you to enter custom content into the <head> section of your journal, which can also be used to change the browser title or favicon for your journal, or add <meta> tags. Furthermore, you can choose to have different <head> content depending on the view of your journal (recent entries, friends page, calendar, etc.).

Note that the only HTML elements that can be used in print_custom_head() are those elements that are valid in the head of a HTML document. This is limited to <title>, <base>, <style>, <link>, and <meta>. All other elements are stripped.

The basic usage format of the print_custom_head() method is as follows:

function Page::print_custom_head() {
"""
Your desired HTML elements
""";
}

You will need to replace Your desired HTML elements with the actual HTML. For example, the following code will add a <meta> tag of the type required by Google for site ownership verification, and change the font to a 14 point Times New Roman font:

function Page::print_custom_head() {
"""
<meta name="verify-v1" content="unique-string">

<style type="text/css">
p, td, body {
font: 14pt Times New Roman, sans-serif;
}
</style>

""";
}

If you wish the code to be applied only to a particular page view, you can also replace Page with the appropriate child class (e.g. RecentPage, FriendsPage, YearPage, etc.).

The specific function that you define such as function Page::print_custom_head() can be used only once in your custom layer, however you can combine several elements into the same function as illustrated above and in a separate tutorial.

The LiveJournal core layer provides time_display() method that specifies the time zone to use for the comment times. All the system layouts use this method in order to display the comment times in your local time zone if you have set one. If you are using a custom layout, however, you will need to modify its code, if the comments are shown in a different time zone.

You will need to find the code of your custom layout that specifies the way the comments or more specifically the date and time of the comments are printed. Usually this code may be found in EntryPage::print_comment(Comment c) or EntryPage::print_comment_partial(Comment c) functions, but it may differ. You will need to modify the code to use the time_display() method like in the following line:

print $c->time_display();

where $c is the Comment class variable used in your layout.

If you would like to specify different date and time formats, you can use another form of time_display() method, with the additional code in the parentheses. For example, the following code will change the date format to "Tue, Feb. 5th (1980)" and leave the time format default.

print $c->time_display("%%da%%, %%mon%%. %%dayord%% (%%yyyy%%)", "");

Please see the Date and Time Formats tutorial for further details.

Contributed by camomiletea.

This tutorial provides information on adding a header image in S2. The exact method of doing so — a layout-specific setting, custom CSS, or a combination of the two — depends on the particular layout. All customizations will be made through the Custom Options page.

Layouts that specifically support header images are listed here. The header option can usually be found under either "Presentation" or "Images" section. You will need to enter a height (such as "300px") as well as the URL address of the header image.

For other layouts, the easiest way to have a header image is to add it as a background image, specify the background image properties so that it appears at the top of the journal and does not repeat, and then shift the journal contents down so they start below the image. Layouts that support both adding a background image and specifying the image properties are listed here. Layouts that support adding a top margin, which will shift the journal down, are listed here.

For layouts that do not offer some or all of the above customization options, you can use CSS to add a background image and shift the journal down. CSS can be added in the "Custom CSS" section of the Custom Options page.

More tutorials for adding a header image can be found under the 'header image' tag of this community.

Contributed by isabeau.

Usericons are disabled by default on the Recent Entries view of Cuteness Attack, so this tutorial covers how to enable them. It will override the print_entry function. 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.

Copy and paste the following code into your theme layer if you do not already have the print_entry code in your theme layer. If you already have this in your theme layer (for example, if you have already customised an aspect of how journal entries are printed using this function) then ignore this step.

# -------------------------------
# display an entry (all views )
# -------------------------------
function print_entry ( Page p, Entry e )
{
        # get date/time
        var string datetime;
        $datetime = $e.time->date_format($*date_format) + " | " + $e.time->time_format($*time_format);

        # get metadata
        var string metadata;
        if ( $e.metadata ) {
                foreach var string k ( $e.metadata ) {
                        var string text = $k;
                        var string val = $e.metadata{$k};
                        if ( $k == "mood" ) {
                                $text = $*text_meta_mood;
                        } elseif ( $k == "music" ) {
                                $text = $*text_meta_music;
                        } elseif ( $k == "location" ) {
                                $text = $*text_meta_location;
                        }
                        if ( $k == "mood" and defined $e.mood_icon ) {
                                var Image i = $e.mood_icon;
                                $val = "<img src=\"$i.url\" width=\"$i.width\" height=\"$i.height\" align=\"absmiddle\" alt=\"$val\" /> $val";
                        }
                        $metadata = "$metadata\n<b>$text:</b> $val<br />";
                }
        }

        # get any extra user info (if posting to community, etc)
        var string poster = "";
        var string userpic = "";
        if ( $p.view == "friends" or $p.journal_type == "C" or $e.poster.username != $e.journal.username ) {
                if ( $e.poster.username != $e.journal.username ) {
                        $poster = "<a class=\"user\" href=\"" + $e.poster->base_url() + "\" title=\"$e.poster.username\">$e.poster.username</a> in <a class=\"comm\" href=\"" + $e.journal->base_url() + "\" title=\"$e.journal.username\" >$e.journal.username</a>";
                } else {
                        $poster =  "<a class=\"user\" href=\"" + $e.poster->base_url() + "\" title=\"$e.poster.username\">$e.poster.username</a>";
                }
                $poster = "<b>posted by:</b> $poster";
                if ( defined $e.userpic ) {
                        $userpic = "<h3 class=\"userpic\"><img border=\"0\" src=\"$e.userpic.url\" width=\"$e.userpic.width\" height=\"$e.userpic.height\" alt=\"$e.journal.username\" /></h3>";
                }
        }
        # print the entry now:
        print "<div id=\"entry_$e.itemid\" class=\"ind-entry\">";

                # print icon (if needed)
                if ( $userpic != "" ) {
                        print "$userpic";       
                }

                print "<h2>";
                if ( $e.security != "" ) {
                        $e.security_icon->print();
                        print " ";
                }
                if ( $e.subject == "" ) {
                        print "<i>$*text_nosubject</i>";
                } else {
                        print "$e.subject";
                }
                print "</h2>";

                print "<h4>";
                if ( $p.view == "entry" and $*show_entrynav_icons ) {
                        var string item_link = "";
                        foreach var string key (["nav_prev","nav_next"]) {
                                var Link link = $e->get_link($key);
                                if ( $link ) { 
                                        if ( $key == "nav_prev" ) {
                                                $item_link = $item_link + "<a href=\"$link.url\" title=\"" + $link.caption->lower() + "\">« " + $link.caption->lower() + "</a> | ";
                                        } elseif ( $key == "nav_next" ) {
                                                $item_link = $item_link + "<a href=\"$link.url\" title=\"" + $link.caption->lower() + "\">" + $link.caption->lower() + " »</a>";
                                        }
                                }
                        }
                        print $item_link;
                        print "<br />";
                }
                print "<b>$datetime</b><br />";
                print "$metadata";
                if ( $poster != "" ) {
                        print "$poster";        
                }
                print "</h4>";

                print "<div class=\"entry-item\">";
                $e->print_text();
                print "</div>\n";

                print "<h4>";
                print safe get_permalink($e.permalink_url);
                if ( $p.view != "entry" and $p.view != "reply" ) {
                        print " | ";
                        $e.comments->print();
                } elseif ( $e.comments.enabled ) {
                        print " | ";
                        $e.comments->print_postlink();
                }
                var Link tmp;
                if ( viewer_is_owner() and $p.view != "friends" ) {
                        $tmp = $e->get_link("edit_entry");
                        print " | <a href=\"$tmp.url\" title=\"$tmp.caption\">$tmp.caption</a>";
                }
                $tmp = $e->get_link("mem_add");
                print " | <a href=\"$tmp.url\" title=\"$tmp.caption\">$tmp.caption</a>";
                print "</h4>";
        print "</div>";
        print "<hr />";
}

Now, locate the } highlighted in orange, and cut and paste it at the end of the line in blue. That line will now read as follows:

                $poster = "<b>posted by:</b> $poster"; } 

Ordinarily, this style checks to see if a journal is not on the Recent view, and if this is true, it prints a userpic and "posted by: exampleusername". This amendment means that the style still checks that it is not the Recent view in order to display "posted by: exampleusername", but displays the userpic regardless of the view.

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.

Additional References:

What are the different S2 layer types?

Contributed by dandelion.