How to enable flexible width and user-pic styling

[branchandroot]

This is a bit of S2 code to switch the order of the main page elements, so that #beta and/or #gamma come first in the html code, allowing layouts in which #alpha is not floated and does not need its width defined. This will really only be useful for people who are making their own style sheets. You could put this code into an existing theme, but none the associated style sheets will work right once the order of #alpha and #beta/gamma are switched.

For people who, like me until a few days ago, have never set eyes on anything S2, here are some directions to get to the layers and how to make a new one. It's easy.

Open the customize-your-journal page and click on the farthest right-hand tab, Advanced. Next page, click on the fourth link down the page, Your Layers.

If you've never messed around with S2, the table you see on the next page will probably be all the little color and text customizations you did with the customization wizard. If you've never switched around colors or text in your layouts, there may not be any table at all. In any case, look down at the very bottom of the page.

You want to "Create a Layout-specific Layer". Choose "theme" and "Expressive" from the dropdown menus and click on the "create" button. The page should reload and, either at the very top or very bottom of the table, your new theme layer will appear. It will be a child of Expressive, and have no name yet. Click the "edit" button.

This will open up a set of three windows on a gray page. For now, ignore the left-hand and bottom panes, it's the large one on the top right that you want. Paste the following code into that window and hit the "save and compile" button up at the top.



layerinfo "type" = "theme";
layerinfo "name" = "Flex-width";

function render_layout (Page p, string lay) {
if ($lay == "3CL") {
container_open("beta");
$p->lay_sidebar_secondary();
container_close();
container_open("gamma");
$p->lay_sidebar_primary();
container_close();
container_open("alpha");
$p->print_body();
container_close();
return;
}

if ($lay == "2CL") {
container_open("beta");
$p->lay_sidebar_primary();
$p->lay_sidebar_secondary();
container_close();
container_open("alpha");
$p->print_body();
container_close();
return;
}

if ($lay == "2CR") {
container_open("beta");
$p->lay_sidebar_primary();
$p->lay_sidebar_secondary();
container_close();
container_open("alpha");
$p->print_body();
container_close();
return;
}

if ($lay == "3CM") {
container_open("beta");
$p->lay_sidebar_secondary();
container_close();
container_open("gamma");
$p->lay_sidebar_primary();
container_close();
container_open("alpha");
$p->print_body();
container_close();
return;
}

}

And that's it. Hit the back-button until you get the customize-your-journal page back, go to the Look And Feel tab and select Flex-width as your theme, and you're done.

I also revised some functions to strip out the automatic styling of user-pics, so you can define those completely through your style-sheet, but lj doesn't seem to like to display that code, no matter what tag I put it in. So I put it up here instead. Scroll down a bit for these two. This code you could paste into an existing theme without causing trouble, I imagine.

Hope this is helpful!

P.S. Could the maintainers give us a list of tags, and what they want them used for on this comm? Without at least a moderately controlled vocabulary, I'm reluctant to start tagging entries here.