The S2 HowTo Journal

[paidaccount] Displaying comment count in words instead of numerals

2008-07-10T04:03:30Z

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 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.

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 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];   
     }     
    }   

    if($.count==1) { $text = $text + " singular comment text"; }
 else { $text = $text + " plural comment text"; }
    print safe "<a href=\"$.read_url\">"+ $text+"</a>";  
    }

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?
S2 View Types

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

[paidaccount][magazine, punquin, tabular indent] Reversing the order of the entries

2008-02-05T03:36:23Z

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.

Additional References What are the different S2 layer types?
S2 View Types

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

[all accounts][expressive/mixit] Changing the Header Image

2008-01-17T05:24:34Z

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.

Additional References
Why are my images not displaying? What is remote loading?

Contributed by av8rmike.

[paidaccount] Using print_custom_head()

2007-12-15T01:14:51Z

Paid Accounts OnlyThe 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.

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.

Additional References Creating and Using a Theme Layer
W3 school's CSS tutorial

[paidaccount] Adding time zone support to custom layouts

2007-11-09T04:17:54Z

Paid Accounts OnlyThe 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.

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.

[all] Adding a Header Image — Overview

2007-06-24T04:32:39Z

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.

Additional References How do I customize my journal using S2?
Why are my images not displaying? What is remote loading?

Contributed by isabeau.

[paid accounts only] [Cuteness Attack] Adding Usericons to the Recent View

2007-02-17T01:53:35Z

Paid Accounts OnlyThe 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.

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.

[paid accounts only] [haven] Adding a tag cloud to the sidebar

2007-01-14T20:10:18Z

This tutorial will explain how to add a tag cloud to the sidebar in the Haven layout. The code will need to be placed into a theme layer, as it will override the function print_sidebar(). 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.

A tag cloud is a list of your tags, where the size of the font is proportional to the number of times the tag has been used. In the Haven layout, you can add a tag cloud into an extra sidebar box using the code below. The parts highlighted in green are the minimum and maximum font sizes in pixels to use for the cloud and these can be changed as you wish. For information on changing the order of the sidebar boxes, or for creating new sidebar boxes, you can follow this tutorial. Note that if your theme layer already has function print_sidebar(), you will need to modify it to include the code highlighted in orange. Otherwise, copy and paste the following code into the layer, making sure to include everything:

function print_sidebar()
{
    print_sidebar_userpic();
    print_sidebar_summary();
    print_sidebar_blurb();
    print_sidebar_linklist();
    print_sidebar_calendar();
    

    var int minSize = 12;
    var int maxSize = 24;

    var Page p = get_page();

    var TagDetail[] visibletags = $p->visible_tag_list();
    if (size($visibletags) != 0 and $p.view != "friends")
    {
	var string taglist_title = "<br /><b>Tags:</b>";
        var string taglist = "";

	var int count = 1;
	foreach var TagDetail t ($visibletags)
	{
	    if ($t.use_count > $count) { $count = $t.use_count; }
	}

	foreach var TagDetail t ($visibletags)
        {
	    var int tagSize = $minSize;
	    if ($t.use_count > 1)
	    {
		$tagSize = (($maxSize-$minSize)*$t.use_count)/$count + $minSize;
            }

            $taglist = $taglist + """<a href="$t.url" style="font-size: """ + $tagSize + """px;">$t.name</a> """;	    
        }

	print_sidebar_box($taglist_title, $taglist);
    }
}

This code will add a tag cloud to the sidebar in all journal views except the friends view. If you would like to see your tag list also on your friends page, remove the text highlighted in yellow.

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 ReferencesWhat are the different S2 layer types?

Contributed by scaryjeff, based on tutorials by camomiletea and tell_me.

[s2 features by layout] Expressive

2006-09-19T03:06:07Z

This layout is available to Plus, Paid, Permanent, and Early Adopter account holders.

Expressive Explained

2006-09-14T23:37:07Z

Expressive Explained

Here are some things that may be helpful to know if you want to customize Expressive.

Column Variations:

Expressive has 4 different layout types to choose from:

3 columns with entries on the left and 2 sidebars to the right
3 columns with entries in the middle and a sidebar on either side
2 columns with entries on the left and a sidebar on the right
2 columns with entries on the right and a sidebar on the left

The entries column is named Alpha. Beta and Gamma are the sidebars. You will find a variation of layout-wtt in the HTML based on the layout type you have selected from the Customize wizard. This is a class that can be styled. W stands for a wide column, and T is for a thin column. This is the order the columns appear based on the selected layout type.

layout-wtt – Alpha Gamma Beta
layout-twt – Beta Alpha Gamma
layout-wt – Alpha Beta
layout-tw – Beta Alpha

Stylesheet Structure:

These are stylesheets we pulled from Vox. They are the same as they are on Vox so that if something gets updated, we can replace the whole stylesheet rather than find and make each individual change on the LJ copy.

base.css – resets styled elements to its default
default/screen.css – default styles across all themes
theme/screen.css – styles for theme
theme-variation/screen.css – images and color changes per theme variation

These are the stylesheets we added to override any styles set in the Vox stylesheets, and also to add in new classes that are specific to LJ:

ljextras.css – things specific to LJ that aren't in Vox
theme.css – if a theme has something that needs to override any of the preceding stylesheets, this stylesheet may also show up

If you add custom CSS, it comes after all the other stylesheets.

custom stylesheet url
custom CSS (from the custom CSS box)

Customizing Stylesheet(s):

If you're making simple changes such as replacing a header with one of your own, or if you're just changing the background color, overriding the CSS in the theme-variation's stylesheet is the way to go.

However, if you're creating a completely new layout, "starting from scratch" is recommended. Instead of starting off with a premade theme, select "(none)" from the themes drop-down menu and create your own stylesheet for your design.

This is recommended since your layout won't have 4 variations (unless you want to make variations, which is cool too) and it would be unnecessary extra work to create a theme stylesheet and a variation stylesheet which overrides the main theme stylesheet's colors. There is also a lot of extra CSS in the theme stylesheets that you wouldn't need since you're creating a layout for LJ, not Vox.

Here is an example of a theme stylesheet that you can use. It combines the theme stylesheet and the theme-variation stylesheets into one, and all the extra Vox stuff has been stripped out.

But there are so many names! What's what and what's where?

Here are the main IDs and classes in Expressive, in the order they're nested within each other.

Click to view full-size. (It's 1242x1289 and 88.88kb)

[s2 layouts by feature] Tag List in Sidebar

2006-09-05T22:59:53Z

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

* Layouts denoted with an asterisk are usable only by selected account holders.

[all] Customizing Navigation Strip Colors

2006-07-25T20:06:43Z

The settings for the Navigation Strip allow you to choose dark grey (with light text), or light grey (with dark text). However, these options don't always match the journal's style. Luckily, it's possible to use CSS to change the background and text color for the navigation strip.

There are four elements that are easily customizable: the background to the strip, which can be made transparent or, optionally, given a background color; the text color; the link color; and the border between the elements. Users who are familiar with CSS can also make additional customizations as desired.

To change the colors, you will need to access the "Custom CSS" section of the Custom Options customization tab. Enter the following CSS information into the "custom stylesheet" area of this section:

/* background of entire strip */
#lj_controlstrip
{
background-image: none;
background-color: #FFFFFF;
}

/* text color */
#lj_controlstrip td, #lj_controlstrip_statustext
{
color: #000000;
}

/* link color */
#lj_controlstrip a
{
color: #0000FF;
}

/* border between elements */
#lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login
{
border-right: 1px solid #888888;
}

Change #FFFFFF to the color code for the background color you want; if you want it to be transparent, so that the background color and image for the page will show through, type the word transparent instead of the color code. Change #000000 to the color code you want for the text; change #0000FF to the color code you want for links. For the border, change 1px to the desired width, solid to the desired border style (select from: none, dotted, dashed, solid, double, groove, ridge, inset, outset), and #888888 to the desired color code.

You can use the Color Hexadecimal Codes Chart to find the hexadecimal color code for your desired colors.

Paid users who are using a custom layout may need to adapt this code into a print_custom_head() function instead. 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.

function Page::print_custom_head() {
"""
<style type="text/css">
CSS information
</style>
""";
}

Replace CSS information with the code provided earlier in the tutorial. Note that if you already have a print_custom_head function, you will need to merge the two functions together.

Contributed by isabeau.

[s2 layouts by feature] Top Margin

2006-07-15T23:18:33Z

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

* Layouts denoted with an asterisk are usable only by Paid, Permanent, and Early Adopter account holders.

[s2 features by layout] Disjointed

2006-07-13T21:52:54Z

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

[s2 features by layout] Refried Paper

2006-07-13T21:31:46Z

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

[s2 layouts by feature] Changing Time Format

2006-07-01T03:22:39Z

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

* Layouts denoted with an asterisk are usable only by Paid, Permanent, and Early Adopter account holders.

[s2 layouts by feature] Counter Code

2006-07-01T01:47:38Z

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

* Layouts denoted with an asterisk are usable only by Paid, Permanent, and Early Adopter account holders.

Date and Time Formats

2006-06-20T18:09:23Z

Many layouts offer you the ability to change the way the date or the time is displayed in your layout; this option is available in the layout's customization wizard.

In order to format the date and time the way you'd like, you will need to use the variables described below. You can put these together in any order you want, with any other text you want, in order to display the date/time the way you'd like it. None of these variables are required, so if you don't want to display any particular portion of the date/time, you can simply omit that variable.

For example, if you use "%%da%%, %%mon%%. %%dayord%% (%%yyyy%%)", the date will be displayed as "Tue, Feb. 5th (1980)". Similarly, "%%m%%/%%yyyy%%" will appear as "2/2006", and so on.

Time Formats

Hour

%%H%%: Hour, 0-23.
%%HH%%: Hour, 00-23.
%%h%%: Hour, 1-12.
%%hh%%: Hour, 01-12.

Minute

%%min%%: Minute, 00-59.

Seconds

%%sec%%: Second, 00-59.

AM/PM

%%a%%: "a" for am, "p" for pm
You can use %%a%%m to form "am" or "pm"
%%A%%: "A" for am, "P" for pm
You can use %%A%%M to form "AM" or "PM"

Date Formats

Day of Week

%%da%%: Short day of week, translated. (English: Sun, Mon, …)
%%day%%: Long day of week, translated. (English: Sunday, Monday, …)

Day

%%d%%: Day, 1-31.
%%dd%%: Day, 01-31.
%%dayord%%: Ordinal day of week, translated. (English: 1st, 2nd, 3rd, …)

Month

%%m%%: Month, 1-12.
%%mm%%: Month, 01-12.
%%mon%%: Short month name, translated. (English: Jan, Feb, …)
%%month%%: Long month name, translated. (English: January, February, …)

Year

%%yy%%: Year, two digits.
%%yyyy%%: Year, four digits.

[s2 features by layout] Bloggish

2006-04-26T17:25:50Z

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

[s2 layouts by feature] Header Image

2006-04-24T17:50:06Z

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

* Layouts denoted with an asterisk are usable only by Paid, Permanent, and Early Adopter account holders.
** Layouts denoted with a double asterisk indicate that this feature is only available to Paid, Permanent, and Early Adopter account holders.

[paidaccount] [smooth sailing] Randomized User Pictures

2006-04-13T00:15:13Z

Paid Accounts OnlyThe 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 explains how to randomise user picture which displays in the profile box in the sidebar. The code to do this will override the Page::lay_print_sidebar_profile(). You will need to place the coding in a theme layer. If you already have a theme layer for the Smooth Sailing style, you can edit it to include this code. 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 Page::lay_print_sidebar_profile() {

   var string[] pic;

   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";
   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";
   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";
   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";
   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";
   $pic[size($pic)]="http://www.livejournal.com/userpic/######/######";

   var int randpic;
   $randpic = rand(0, ((size $pic) - 1));

    $this->lay_print_sidebox_top($*text_sidebox_profile_title);
    """
      <div class="sideboxContent" id="profile">
        <div><a href="$*SITEROOT/allpics.bml?user=$.journal.username"><img src="$pic[$randpic]" alt="" border="0" class="profile-userpic" /></a></div>
        <div><span class="profile-label">$*text_sidebox_profile_userlabel</span><span class="profile-content">$.journal</span></div>
        <div><span class="profile-label">$*text_sidebox_profile_namelabel</span><span class="profile-content">$.journal.name</span></div>
        """; 
        if ($*text_sidebox_profile_info!="") { """<div>"""; print $*text_sidebox_profile_info; """</div>"""; }
        """
       </div> <!--sidebox-profile-->
    """;
    $this->lay_print_sidebox_bottom();
}

In the above code, you need to replace http://www.livejournal.com/userpic/######/###### (for each) with the user pictures that you'd like to be randomized. Please notice that, though six user pictures are used here, there is no maximum or minimum to the number of user pictures that you can use.

Once you have finished adding the code above, you can save your theme layer by clicking on the "Save & Compile" button at the top of the screen. Your changes will not take effect until you apply your theme layer by selecting it on the Customize Journal page.

Additional References:

What are the different S2 layer types?

S2 View Types

Originally based on coding from dianna_wills, original tutorial written by aajwind. Converted into a Smooth Sailing tutorial by draconid.

[paidaccount] [all] Adding a Navigation Strip

2006-04-07T02:33:51Z

Paid Accounts OnlyThe 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.

LiveJournal provides the Navigation Strip for easy access to common site features. All system styles automatically support it, however, if you have a custom layer, you may need to include the built-in function for printing the Navigation Strip in your layer in order for it to display. This function will need to be added immediately after the <body> tag of the HTML structure.

In your custom layout or theme layer (depending on which you are using) locate the function Page::print(). Within it, you will find a tag, which may look similar to the following:

Immediately after the body tag, you will want to close off the string, add $this->print_control_strip();, and then start the string again if necessary. This will make the code look something like this:

<body bgcolor="$*page_back" text="$*entry_text" link="$*page_link" vlink="$*page_vlink" alink="$*page_alink"> """;
$this->print_control_strip();
"""
<div align="center">

Should you wish to add extra HTML or CSS that would appear if the Navigation Strip is displayed, you can use the function viewer_sees_control_strip(), like this:

if (viewer_sees_control_strip()) {
"""Extra HTML or CSS to display, if the navigation strip is displayed""";
}

You will also need to enable the Navigation Strip in your Edit Personal Information page before it will appear on your journal.

Contributed by isabeau and camomiletea.

[paidaccount] Printing Trusted Entry Content

2006-03-27T21:17:25Z

Paid Accounts OnlyThe 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 explain how to change custom layers to function with embedded media such as videos from external sites and LiveJournal's Flash-based voice post player. These currently contain elements that will not work with some custom S2 layout or theme layers; you will need to edit the code to replace $e.text with $e->print_text().

The first step is to edit the layer -- either the layout layer if you are using a fully custom style, or the theme layer if you are using a modified system style. For the purposes of this tutorial, you may find it easier to copy the layer code into a separate text editor so that you can do a text search for "$e.text".

The exact code will vary by style, but it may look something like this:

You will want to replace this with:

<div class="entry">"""; $e->print_text(); """</div>

This will only work if the $e.text variable is inside a string block. If the line containing $e.text looks like one of the following:

"""$e.text""";

"$e.text";

print $e.text;

you will want to replace it with:

$e->print_text();

Note that the $e.text variable may occur multiple times in the layer, depending on how the code is set up. You will need to replace each one.

In some situations, the layer will use $.text instead of $e.text. In this case, you will want to follow the above instructions but use $this->print_text() in place of $e->print_text().

Lastly, if your theme or layout layer doesn't just print $e.text (or $.text) as it comes but modifies the content somehow, there is a $.text_must_print_trusted flag that will indicate whether the entry contains embedded media that needs to be printed by the print_text function. You can use this to perform your own functions on the entry text whenever possible:

if ($e.text_must_print_trusted) {
$e->print_text();
} else {
#whatever you are doing with $e.text here
}

Once you have made the necessary changes, you will need to paste the changed code back into the S2 layer editor, and compile to save the changes.

Additional References:

What are the different S2 layer types?

Where can I learn more about advanced S2 customization?

Contributed by isabeau.

[s2 layouts by feature] Permanent link to entry

2006-03-23T01:04:07Z

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

* Layouts denoted with an asterisk are usable only by selected account holders.

[s2 layouts by feature] Timezone Support

2006-03-09T05:17:55Z

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

* Layouts denoted with an asterisk are usable only by selected account holders.