?

Log in

No account? Create an account

Previous Entry | Next Entry

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

Comments

( 5 comments — Leave a comment )
starpaw
Sep. 2nd, 2006 12:34 pm (UTC)
cool, i got up to this part and then got confused, can you explain it?

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...)
ooo5
Oct. 3rd, 2006 01:05 pm (UTC)
Neat. But do you know why it doesn't work when I move the customtext line in the sidebar setting to the second row? Are there any references to how set sidebar_primary/secondary work somewhere?
maegwen
Nov. 1st, 2006 05:27 am (UTC)
ha, having the same problem. hope someone responds.
ooo5
Nov. 1st, 2006 11:50 am (UTC)
I actually got it to work eventually. I don't remember what did the magic, but here's a clip from my layer.

set sidebar_primary = [
[ "userprofile", "Profile", "1", "0" ],
[ "calendar", "Latest Month" ],
[ "customtext", "Weather", "" ],
[ "tags", "Tags" ],
[ "syndicate", "Syndicate" ],
];

Let me know if it doesn't work and I'll see if I can find what made the difference.
ellarien
Oct. 7th, 2006 09:02 am (UTC)
Thank you! I wanted to stick a photo in my custom module, and this is exactly what I needed.
( 5 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars