Simon’s Backup Weblog


S2 Hacking: Adding a Flickr Badge to LiveJournal’s Expressive layout

Posted in Uncategorized by Simon Bisson on September 1, 2006

I’m feeling quite pleased with myself.

I’ve been delving into the mysteries of S2 and have been working out how to add custom HTML to a layout sidebar. The first fruits of my endeavours are now online, and I’ve add one of Flagrant Disregard’s Flickr badges.

There’s a lot of help in the new community, which showed me how to create a new S2 style from an existing one, and how to add new customtext areas to my layout.

Here’s how I pulled it all together, and made my own version of Expressive:

Start with the S2 source for Expressive.

Then use the LJ style layer tools to create a new blank S2 style, by creating a new top-level layer, and copy the Expressive code into it.

Then switch your style to the new, custom, style. It’s important to note that custom versions of Expressive don’t use the LJ style tools to change the base theme. However, the style code lets you set your own base theme, and includes the syntax for all the standard Expressive themes. So, I set the base theme to my preferred London look-and-feel:

set base_theme = "cityscape-london";

To add HTML to the customtext module, click on the print_module_customtext() link in the S2 editor navigation.

The edited code (with the HTML for my Flickr badge) looked like this:

function print_module_customtext(string title, string text, string titlelink_url) {
    var Page p = get_page();
    open_module("customtext", $title, $titlelink_url);
    print safe $text;
    """<a href="http://flickr.com/photos/40732566019@N01/"><img src="http://flagrantdisregard.com/flickr/profilewidget/random.compact/000000/ffffff/40732566019@N01.jpg" border="0" alt="sbisson. Get yours at flagrantdisregard.com/flickr" title="sbisson. Get yours at flagrantdisregard.com/flickr"/></a>""";
    close_module();
}

The key change is adding a new line after the print safe $text declaration. You can put any HTML here (within reason – LJ doesn’t permit JavaScript or object tags, though), just make sure it’s delimited with """ and """;. You can put as much HTML here as you like. I suspect you can also copy the block and rename it to create your own sidebar elements that can then be called from a user customisation layer.

Next use style tools automatically make a new user customisation layer by changing the position of the sidebar from left to right. Using the S2 style customisation tools, Edit the new user layer, pasting in your customisations. I also used the opportunity to reorder the sidebar, placing the various sidebar elements in my preferred order, and adding a new customtext section for the Flickr badge code:

layerinfo "type" = "user";
layerinfo "name" = "Auto-generated Customizations";
set page_friends_items = 50;
set page_recent_items = 25;
set layout_type = "2CR";
set opt_userpic_main = false;

set sidebar_primary = [
        [ "userprofile", "Profile", "1", "1" ],
	[ "syndicate", "Syndicate" ],
        [ "calendar", "Latest Month" ],
        [ "links", "Links" ],
        [ "customtext", "Flickr", "" ],
     ];

set sidebar_secondary = [
        [ "archive", "Page Summary" ],
        [ "tags", "Tags" ],
        [ "poweredby" ],     
    ];

Compile and save the new S2 layer, and refresh your blog.

Bingo! (Hopefully…)

And here’s one I made earlier.

Advertisements

3 Responses to 'S2 Hacking: Adding a Flickr Badge to LiveJournal’s Expressive layout'

Subscribe to comments with RSS or TrackBack to 'S2 Hacking: Adding a Flickr Badge to LiveJournal’s Expressive layout'.

  1. srallen said,

    Hunh. I’m going to have to take a whack at this when I get home. I’ve been hoping to do something like this for a while but never had the skills 🙂

  2. oceanpark said,

    hey cool! i got it working. thanks for posting that!:)

    quick question – if i wanted to add another custom sidebar like that with html (say, for my delicious linkroll) how would i go about it? am i limited to one customtext box?

    thanks!

  3. oceanpark said,

    hello again.. any thoughts on how to make it easier to edit your links in the customize menu rather than through the evil s2 editor?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: