HOWTO: Adding a Flickr Badge to LiveJournal's Expressive layout
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.
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;
"""
""";
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.
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.
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;
"""
""";
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.