Styling and optimizing my LiveJournal, or turning a green forest into a white lion
Got around to changing my journal's style. I'd gotten used to the Forest Green theme, which is based on the Bloggish layout, but in it only 470 pixels are allotted for the content, which is clearly not enough to comfortably place photos and read the friends feed.
I dug into Custom CSS and changed the size of the text field to 640 in width, and also increased the width of the sidebar, making the overall content width 1000. At the same time I bumped up the font sizes by a couple of points, since pixels on monitors keep getting smaller. For search engine optimization I moved the sidebar to the right, so the entry's content comes first and gets indexed, only it looks somewhat unusual, I'll have to move it back to the left and do an SEO layout; on my own site I managed to do this, and it'll work out in the blog too, a pity I don't know CSS well.
After changing the width of the main blocks, the blog's header turned out ugly, with a narrow image in it. I decided to put a more eye-pleasing picture in the header; a part of a photo of a white lion, which I mentioned here, worked well for this. After replacing the header, a change to the blog's color scheme followed; I picked the new colors with the eyedropper from the header. I didn't completely abandon the old greenish ones — I used them for the link colors. I decided not to change the background image either — it doesn't get in the way much and an alternative hasn't come to mind yet.
Besides changing the styles, I climbed into editing the presentation layer and internationalization. After poking around a bit and looking through the S2 documentation, I created my own presentation layer modeled on Forest Green, based on Bloggish, and an internationalization layer to replace some phrases.
First I tested my abilities on something simple. It caught my eye that under each entry, before the publication date, there's the text "Posted on" in English; I fixed this by redefining the following function like so:
DateTime dt, bool showdate, bool showtime) : string {
var string posted = "Опубликовано";
$posted = $posted + ($showdate ? " " : " в ");
if ($showdate and $showtime) {
if ($e.depth > 0) { # If $e is a comment
return $posted + $e->time_display("med", "");
} else {
return $posted + $dt->date_format("med") + " в " + $dt->time_format();
}
}
if ($showdate and not $showtime) {
return $posted + $dt->date_format("med");
}
if (not $showdate and $showtime) {
return $posted + $dt->time_format();
}
return "";
}
Then I did SEO on the page titles, swapping around the blog name and the article, which will also improve the listing in search engines. And on the main page, in addition to the blog title, I output the subtitle. Code:
var string title = $.global_title;
if ($title == "") {
$title = $.journal.name;
}
if ($.view != "recent") {
$title = $this->view_title() + " - " + $title;
}
else {
$title = $title + " - " + $.global_subtitle;
}
if ($.view == "friends") {
$title = $this->view_title();
}
return $title;
}
Looking further through the page, I noticed that in the entries' metadata (location, mood) their identifiers are output, not the titles. This was a problem of the Bloggish theme itself, since this wasn't observed in the others. The code that fixes this, which I later also saw in the relevant community:
if (size $.metadata) {
"""<div class="metadata">\n""";
foreach var string m ($.metadata) {
"<div><strong>";
print lang_metadata_title($m);
"</strong>: ";
if ($m == "mood") {
" $.mood_icon ";
}
print $.metadata{$m}; "</div>\n";
}
"</div>\n";
}
}
I removed the syndication and powered-by items just by emptying out the corresponding output functions; perhaps there are more proper solutions. The links to RSS and Atom are, in principle, useful, but their original design and placement didn't suit me; later I'll need to bring them back, replacing the look of the buttons.
}
function print_module_syndicate(string title) {
}
The most time went into reworking the tags. I replaced the list with a cloud. As I noticed later, the other themes had a tag cloud from the start, but I'd managed to make my own before that. I simply output all the tags in a line, setting the size equal to the number of uses plus 5. The approach isn't very correct, but it's enough for me for now. In a few entries about big cats I'll start using a coefficient to calculate the size. I was surprised that S2 has no data type for fractional floating-point numbers; as I understand it, there are no logarithms in it either, so using a logarithmic relationship to calculate the tag size won't work out.
var Page p = get_page();
var TagDetail[] tags = $p->visible_tag_list();
if (size($tags) < 1) { return; }
open_module("categories", $title, ""); # TODO: Link to the TagsPage?
print """<div style="text-align: center;">""";
foreach var TagDetail tag ($tags) {
if ($tag.use_count > 0) {
var int size;
$size = $tag.use_count + 5;
var string uses = get_plural_phrase($tag.use_count, "text_tag_uses");
print """<span style="font-size: """ + $size + """px"><a rel="tag" title="$uses" href="$tag.url">$tag.name</a></span> """;
}
}
print "</div>";
close_module();
}
I also added a link to my own site at the end of the links up top. I didn't fully figure this part out; I couldn't find where the array of links "Recent entries", "Archive", "Friends feed", "Profile" is built or set. I had to just add the link to the blog's website after these links are output, dumbly:
var Page p = get_page();
open_module("viewlinks", $title, "");
var string[] links = [];
foreach var string k ($p.views_order) {
$links[size $links] = """<a href="$p.view_url{$k}">"""+lang_viewname($k)+"""</a>""";
}
$links[size $links] = """<a href="$p.journal.website_url">"""+$p.journal.website_name+"""</a>""";
print_module_list($links);
close_module();
}
And finally, in the header I made the blog name a link to the blog itself, since I've already gotten used to such behavior on other sites.
container_open("banner");
print safe "<h1 id='banner-header'><a href='$p.base_url'>$p.global_title</a></h1>";
print safe "<h2 id='banner-description'>$p.global_subtitle</h2>";
container_close();
}
And then I struggled a bit more with CSS: I laid out the link blocks and the userpic at the top in one line, all of this is strange, so much time went into such a trifle, and on top of that I had to sort out cross-browser compatibility.
That's how the Forest Green theme turned into White Lion.