?

Log in

No account? Create an account

The S2 HowTo Journal

Tips, Tricks, and Tutorials for Basic S2 Customization

[paid accounts only] [haven] Adding a tag cloud to the sidebar
howto_user
Paid Accounts Only
The following tutorial requires creating and editing a custom style, which in turn requires a paid, permanent, or early adopter account. Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

This tutorial will 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.

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


[s2 layouts by feature] Navigation strip colors
howto_user
[ 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.

[s2 features by layout] Expressive/Expressive Winter/Mixit
howto_user
[ 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:
[preview] [preview] [preview]

Configurable Options:Other Features:

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

Expressive Explained
howto_user

Expressive Explained

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

column variationsCollapse )
stylesheet structureCollapse )
customizing stylesheetsCollapse )
visual guide of ID and class namesCollapse )

[s2 layouts by feature] Tag List in Sidebar
howto_user
[ Go Back | List of Layouts | List of Features ]


† 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
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
[ 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
[ Go Back | List of Layouts | List of Features ]

Sample images:
[preview] [preview] [preview] [preview]

Configurable Options:Other Features:

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

[s2 features by layout] Refried Paper
howto_user
[ Go Back | List of Layouts | List of Features ]

Theme image:
[preview]

Configurable Options:Other Features:

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

[s2 layouts by feature] Changing Time Format
howto_user
[ 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.