The S2 HowTo Journal

[paidaccount] How to display AdSense in custom styles

howto_user — Fri, 02 Oct 2009 23:51:55 GMT

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.

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.

[s2 features by layout] Minimalism

howto_user — Fri, 12 Dec 2008 19:29:25 GMT

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

Sample images:

Configurable Options:

Other Features:

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

[s2 layouts by feature] Order of Entries on Recent View

howto_user — Mon, 24 Nov 2008 19:52:08 GMT

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

[paidaccount] Displaying comment count in words instead of numerals

howto_user — Thu, 10 Jul 2008 04:03:30 GMT

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.

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

howto_user — Tue, 05 Feb 2008 03:36:23 GMT

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

howto_user — Thu, 17 Jan 2008 05:24:34 GMT

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()

howto_user — Sat, 15 Dec 2007 01:14:51 GMT

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

howto_user — Fri, 09 Nov 2007 04:17:54 GMT

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

howto_user — Sun, 24 Jun 2007 04:32:39 GMT

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

howto_user — Sat, 17 Feb 2007 01:53:35 GMT

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

howto_user — Sun, 14 Jan 2007 20:10:18 GMT

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 layouts by feature] Navigation strip colors

howto_user — Wed, 27 Sep 2006 16:57:52 GMT

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

All layouts include the ability to customize the colors and display of the navigation strip, which appears at the top of journal pages and includes many site navigation links. These options are explained further in this FAQ.

3 Column
A Novel Conundrum
A Sturdy Gesture
Bloggish/The Style Contest
Classic
Clean and Simple
Component (Available to EA, Plus, Paid, and Permanent accounts)
Cuteness Attack
Dear Diary
Digital Multiplex (OSWD)
Disjointed
Expressive/Expressive Winter/Mixit (Available to EA, Plus, Paid, and Permanent accounts)
Flexible Squares
Generator
Gradient Strip
Haven
Magazine
Minimalism
Nebula
Notepad
Opal (Libra OSWD)
Punquin Elegant
Quite Lickable
Refried Paper
Smooth Sailing
Tabular Indent
Tranquility II
The Boxer (Available to EA, Paid, and Permanent accounts)
Unearthed
Variable Flow

[s2 features by layout] Expressive/Expressive Winter/Mixit

howto_user — Tue, 19 Sep 2006 03:06:07 GMT

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

This layout is available to Plus, Paid, Permanent, and Early Adopter account holders, although Plus accounts do not have access to all themes.

Sample images:

Configurable Options:

Other Features:

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

Expressive Explained

howto_user — Thu, 14 Sep 2006 23:37:07 GMT

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

howto_user — Tue, 05 Sep 2006 22:59:53 GMT

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

Bloggish/The Style Contest
Component (Available to EA, Plus, Paid, and Permanent accounts)
† Expressive/Expressive Winter/Mixit (Available to EA, Plus, Paid, and Permanent accounts)
† Flexible Squares
† Minimalism
Smooth Sailing

† These layouts offer an option to display tags as a list or as a "cloud", with text size proportional to number of uses.

[all] Customizing Navigation Strip Colors

howto_user — Tue, 25 Jul 2006 20:06:43 GMT

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

howto_user — Sat, 15 Jul 2006 23:18:33 GMT

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

The layouts listed below allow you to specify a margin size on the top of the content area. You can use this feature to shift your journal contents down in order to display a header image at the top of your journal. This method is an alternate way to add a header image, if your layout does not provide an explicit option for one.

[s2 features by layout] Disjointed

howto_user — Thu, 13 Jul 2006 21:52:54 GMT

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

Sample images:

Configurable Options:

Other Features:

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

[s2 features by layout] Refried Paper

howto_user — Thu, 13 Jul 2006 21:31:46 GMT

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

Theme image:

Configurable Options:

Other Features:

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

[s2 layouts by feature] Changing Time Format

howto_user — Sat, 01 Jul 2006 03:22:39 GMT

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

The layouts listed below provide an option in the Customize Journal Style page for you to change the way times are displayed. Some layouts provide a list of choices to select from, while others enable you to build your own time string from the system variables. A list of these variables can be found in this tutorial. For example, the time format string %%HH%%:%%min%% will display the time as "16:34". Here is a list of layouts in which you can change the date display format.

[s2 layouts by feature] Counter Code

howto_user — Sat, 01 Jul 2006 01:47:38 GMT

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

You can use this option to enter the URL of an external web counter to be displayed on your journal. If your layout is not on the list below, you may be able to add a counter through a free text box, provided it does not use JavaScript or Flash.

Date and Time Formats

howto_user — Tue, 20 Jun 2006 18:09:23 GMT

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/The Style Contest

howto_user — Wed, 26 Apr 2006 10:25:50 GMT

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

Sample images:

Configurable Options:	Other Features:
Changing Comment Link Text Changing Navigation Text * Custom CSS Disable Friends Userpics Leading Text for Links List * Navigation Strip Colors * Number of Journal Entries on Page * Replacement Stylesheet URL * Shared Journal User Pictures Sidebar Position * Site Scheme Comment Pages	* Link List Mini-Calendar Page Summaries Permanent Link to Entry Tag List in Sidebar * Timezone Support User Pictures on Recent Entries

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

[s2 layouts by feature] Header Image

howto_user — Mon, 24 Apr 2006 10:50:06 GMT

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

This option allows you to specify a URL for an external image to be displayed as a header at the top of your journal pages. The image must be uploaded to a webspace provider that allows remote loading to LiveJournal. If your journal layout is not in the following list, you may be able to add a header image to your journal using one of the tutorials linked in this FAQ.

[paidaccount] [smooth sailing] Randomized User Pictures

howto_user — Wed, 12 Apr 2006 17:15:13 GMT

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.

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