Hacking my 1337 layers: Dreamwidth Layout work

[matgb]

The joys of blogging using a completely new platform with a development team that really want to make it work, instead of just make it sellable is palpable.

Dreamwidth is, still, not a finished, ready-for-general-release product. That's fine, it's getting there. What's really good though, is that the team behind it are really keen on getting the documentation up to speed, and are generally pleased when you go point out something that isn't working right.

After a lot of headscratching, and a bit of trial and error, I've finally got the sidebars to my main layout almost looking right (at least on this browser, on this laptop, with my preferred default settings). Setting the margin for some of the lists to -12px was a daft solution, but until I can figure it out better, it's a working solution.

No point writing something if people can't find it

More importantly, I've developed stuff. Anyone that's read my ramblings online for awhile knows that I take usability and search presence fairly seriously. There's no point in writing something for a general audience if people that are interested can't find what you've written. Dreamwidth's default settings for page TITLE tags were, well, a bit weird, and broke basic usability and SEO rules. So I've been hacking. My early attempts simply didn't work, but a few days ago I simply swapped two lines of code, and now it almost works completely properly (see above bug link though).

function Page::print_head_title() { if ($this isa FriendsPage) { print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>\n"""; } elseif ($this isa RecentPage) { print """<title>""" + $.global_title + $*text_default_separator + $.global_subtitle + """</title>\n"""; } else { print """<title>""" + $this->view_title() + $*text_default_separator + $.global_title + """</title>\n"""; } }So, if you're comfortable with adding stuff to DW layers (probably not going to work on LJ), then this will almost certainly be useful for you. Instead of putting the page title tags out as Username | PageTitle, I've changed it so that on the main recent entries journal page, it displays JournalTitle | Subtitle (ie, for me, Mat Bowles | Whatever I've Picked This Week), but on other pages it displays PageTitle | JournalTitle. When we've figured out what's wrong with the above bug, I'll update it to do even cooler stuff on the Reading page, but...

against a dark background

Now, of more general use, I know a lot of people don't like reading entries against a dark background with light text. function Entry::print_interaction_links(string target) "Prints entry interaction links, aka # comments/leave a comment, with standardized CSS." { var Page p = get_page(); var int count; $count = 0; if ($p isa EntryPage) { """<ul class="entry-interaction-links">"""; var EntryPage ep = $p as EntryPage; if ($.comments.enabled and $ep.comment_pages.total_subitems > 0) { $count ++; """<li class="entry-readlink first-item">"""; $this.comments->print_readlink(); "</li>\n"; } """<li class="entry-permalink first-item"><a href="$.permalink_url?s2id=6964">Pale</a></li>\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url?s2id=1337">Dark</a></li>\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url?style=light">Print</a></li>\n"""; if ($.comments.enabled) { $count ++; """<li class="entry-replylink""" + ( $count == 1 ? " first-item" : "" ) + """">"""; $ep->print_reply_link({ "linktext" => $*text_post_comment, "target" => $target }); "</li>\n"; } "</ul>"; } else { $this.comments->print(); } } function CommentInfo::print() { """<ul class="entry-interaction-links">\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url">$*text_permalink</a></li>\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url?s2id=6964">Pale</a></li>\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url?s2id=1337">Dark</a></li>\n"""; """<li class="entry-permalink first-item"><a href="$.permalink_url?style=light">Print</a></li>\n"""; if ($.show_readlink) { """<li class="entry-readlink">"""; $this->print_readlink(); "</li>\n"; } if ($.show_postlink and $.enabled) { """<li class="entry-replylink">"""; $this->print_postlink(); "</li>\n"; } "</ul>"; } I'm the complete opposite for this; if I spend too much time looking at pale background sites, I start to get a headache, hence my preferred layout. So, for you weirdoeslucky lucky people, I am going to build a pale background layout as well. This will deliberately not define fonts, background colours, etc, so it will only display your browser defaults (you can change them on any decent browser).

Best bit? I've got this into the base layout code (for my main layout) as a link. At the bottom of this entry on DW, you'll see some extra links, Dark, Pale and Print. Dark gets you back here, Pale takes you to the new layout, and Print takes you to a completely unformatted page. Theoretically, all internal links on the Pale layout will maintain those settings, including if you comment. This is useful.

.bottom-metadata ul { list-style:none; text-align: right; } .metadata-label-xpost { text-transform:uppercase; color: #ee5; font-size:smaller; } .metadata-item-xpost { font-size:smaller; }Lastly, they've added a new feature in, when I post an entry here, the LJ copy will link here, and show hoe many comments are here. But these days I allow comments on the LJ backup, but there's no way of getting from here directly there. Until now. But, the display was, well, FUGLY. Fixed that too, custom CSS box, copy/paste, change the colours to suit.
It's all, naturally, still being tested, but I thought I'd post and let people know that a) I'm still alive and b) I'm trying to be useful.

This layout is, officially, 1337

But more importantly, hover over that 'Dark' link. Look at the S2 ID number. Everytime someone creates a new layout on DW, it gets assigned a new, sequential, number. There are loads and loads and loads of them. But those of us who signed up to the site really early, well we've got styles with low numbers. Mine isn't that low. But it is pretty cool. S2 layout #1337. This layout is, officially, 1337.

I just felt like sharing that.

(feedback on the code, suggested improvements, bug reports, etc very very welcome. Pointing out that the pale layout is barely personalised and needs a lot of work will be a statement of the already known, I'm looking for unknown unknowns out of preference...)

Comments

[freddiefraggles]

The "page generated" and "powered by" boxes at the bottom, also titles in other boxes but not so much as the first two, are too close to the edge of the box. Trying to get out the box, even.

The black box under your user icon for the post, which contains your username, does not line up with the user icon, think it's about 2 or 3 pixels out, which is enough to be noticable!

Dark / pale / print options: not at the bottom of the page for everyone. It shows in the toolbar at the top if you have that enabled, I can choose to show your version or light or in my layout style.

The crossposts thing is nice and all right-aligned, but the tags line under it is broken, the word tags appears to be left-aligned while the tags themselves right-aligned.

I'm using FF 3.6.3, widescreen.

[matgb]

Aye, the bottom two boxes are something I keep forgetting to fix, that's just a CSS fix that I've been lazy about.

Icon location, and that of the username below it, has been borked for ages, need to completely redo it; the official styles now have a way to place it properly that works, need to copy that code, unfortunately they prefer icon as part of post, I prefer it as part of header, probably better to override that than try to move it back up.

The layouts in the toolbar aren't exactly the same, and most people miss them, yes it's got my style, yours and style=light, but hasn't got my pale layout, and doesn't show for everyone, especially not logged out readers, which is what matters (especially for Jennie)

And yes, I wanted the crosspost data to show exactly as per tags, but it wouldn't position correctly, but tags work in a different way and I haven't fixed that hack yet. I will do, but...

Danke.

[cesy]

Very 1337 :)

[kake]

Thank you for the title stuff! I've added it to my style — great improvement.

I don't suppose you happen to know if it's possible to change the head_title and page_title depending on whether the person is viewing a particular tag? Specifically, I'd like this page to have "Reading Chinese Menus" in both the <title> and the main page heading (but for http://kake.dreamwidth.org/ and other tag views to stay as they are).

[matgb]

I do plan to put in tags to the title when I can, but IIRC there's a bug that stops it working. Not sure if it can be done for just one specific tag though.

I will do some more digging, I have more layout goodness planned (the share this links at the bottom of each post are current project).

[kake]

Neat — look forward to seeing what you come up with.

[kake]

I have a new question... do you know if there's a way to add a specific bit of HTML to the bottom of a post if and only if the post has a particular tag? I'd like to be able to define my Chinese Menus footer in one of my layers rather than copy-pasting it into every post.

[matgb]

I'm fairly sure it's possible, but I've not played around with tag specific variables so I don't actually know for sure.

One thing though, you need to define the font colour as well as the background colour in that box, or even better, give the thing a class and not do any inline styling.

Currently it shows in my layout as white text on pale background. Ideally you should never inline style but do everything with CSS in your layout, but if you do inline stuff it needs to be complete ;-)

[kake]

Yes, good point, thanks — I'll get that sorted out. I've added the font colour to new posts for now.

[kake]

Mmm, slight snag with putting it all in the stylesheet — people viewing the page in their own style won't see that the footer paragraph is meant to be distinct from the rest of the post.

[matgb]

Yup, but that's their problem. If somoene chooses to override your preferences, then post formatting can go all wrong.

Ideally, the site would have some standard classes for stuff like footers and images in the base stylesheet that can be overridden by themes. I keep meaning to suggest it, but I don't know how big in scope to make it.

[kake]

Whoops, my inbox got away from me and I managed to miss your reply, so belated thanks!

I don't really want to decide that someone's overriding of my style is their problem, since people may need to do this for accessibility reasons — not everyone finds dark text on a light background comfortable to read. I don't want to take away visual cues from someone who's already having to change things to make them more readable. So I've gone back to inline styling for now, though I might experiment at some point with having some of it in the stylesheet and some of it inline.

I would love to have a standard class for footers — also for related posts, which I'm currently hacking around by hijacking the tags div.

[marahmarie]

Thank you for the tab name hack. I never realized it printed out that way until Joseph came along to getting_started to say so and got himself banned for being a little too nasty about it. So I added your code to my already-existing theme layer, and you know, gosh, it took me two seconds and all, but I had to put aside research and lose another nice day with the cooler weather approaching to pull it off, didn't I...was it worth it, or should I just use LJ, which supposedly does all their code in ten lines of HTML or less, and you know, HTML code does the same thing as the 3 pages of blasted CSS we use on each DW journal and does it so much better... *sigh*

(to fill in those who may have missed Joseph's posts, I lifted almost every word in my last paragraph from him just to highlight how ridiculous his arguments were)

[matgb]

To be fair, the user interface for doing this sucks mightily, and it's fairly top of the things on my List To Get fixed when I can apply the brainpower.

But "this is hard to do" or "I don't understand this" should not translate into "you're all lying to me you fanboys and I don't have the time".

It's also worth noting that, on other blog platforms, if you want to edit the base CSS for your layout, you actually normally edit the actual CSS file, so you see all of it. On DW/LJ, you apply new CSS, which is called last and thus overrides the default CSS, but looking at the actual CSS means going into the Advanced section, which has a "here be dragons" warning.

I do need to both write a how-to and sort the UI and taskflow. Glad it's of use and working though, does look quite nice, like your Favicon as well, keep meaning to add mine but haven't got around to it...

[marahmarie]

If you use the Web Dev Tools included in IE8/IE9 and/or use the Web Dev add-on for Firefox, you can do live CSS edits without seeing the default CSS in LJ's or DW's Custom CSS box, which means you can also skip going into LJ's or DW's Advanced Customization pages to find it (which, I agree, might as well have a skull and crossbones posted on the intro page).

I'm so used to working that way, and I'm so used to putting the !important declaration after half the custom CSS I add, to override the default style sheet(s) on LJ or DW, that I almost wonder what it would be like to work any other way, *but*...but for someone who doesn't (or doesn't know how) to use browser-based live CSS editing tools, I can see how you might be pretty much up the creek without a paddle.

edit...Just for it's worth, did you know your implementation of the tab name/title bar is actually better than that of most websites? To remind myself how much more awesome yours is, I went to TechCrunch a few moments ago and clicked through to the top post, which was:

http://techcrunch.com/2010/10/07/calacanis-facebook/

When you visit it directly, all you see in the title bar is the post title and the browser name. Click through to any other post on that site, same thing.

[unicorn]

For the record, after coming back to your comment in my suggestions post recently, I found this post and showed it to a more code-savvy friend of mine who was able to make the change you envisioned; it's implemented on two heavily commented-on communities she maintains and a related journal that I help to maintain now, and it's proved super useful. We had no idea something like that was possible with S2, so thanks!