Updated user style: Small Mode (now in pick-and-mix sections)

(Updated 05 Aug 2013: Fixed some more minor issues in the dark colour scheme.)

I've adapted the old Small Modo user stylesheet, originally written by Socialery, to work with Danbooru 2; over time, and during the Danbooru 2 rewrite, I added a number of my own tweaks. I use it through Stylish, which is available on Firefox and Chrome; other browsers have their own options for using custom style sheets.

Note that these style sheets are in Mozilla format. For use with Stylish for Chrome - or probably other non-Firefox browsers - you will need to remove the first line (the one reading "@-moz-document domain("donmai.us") {"), and you should remove the last line (containing just a } by itself) as well.

What does it do?

The base script maximises space in the browser for viewing images, by hiding the main page header behind an unobtrusive icon, shrinking text, and compressing other parts of the Danbooru interface. It also has optional additions, so that you can pick just the bits you like:

• moves the pool/tag search bar from below the image to a fixed-position pane in the top right; all of the new keyboard shortcuts will still work.
• enables comments, forum posts and the like to use the whole screen width, rather than leaving a chunk of white space to the right
• changes colours to a light-on-dark theme, rather than dark-on-white
• fixes the sidebar to one spot in the window, so it stays in place when you scroll around the image
• collapses the sidebar to a narrow handle, similar to what happens to the page header: this lets you reclaim even more horizontal space and only bring up the tags when you need them.

So, what does it actually look like?

• Here's a standard Danbooru page. Space is rather limited.
• We add the base Small Mode style (and enable the floating navigation panel), which is an improvement.
• We want more space, so we enable the collapsed sidebar as well; this image also shows how the header menu looks when you hover over the Danbooru icon in the top left.
• If it's late, you may prefer darker colours. This image also shows the collapsed sidebar when un-collapsed; like the menu, you hover over it to make it pop up.

The sidebar has its own scrollbar in the last image, which is an unfortunate necessity when it's fixed to one position on the page: if you couldn't scroll it, then you wouldn't be able to see most of the tags for images with lots of them. Those aren't too common, though; where all of the sidebar fits on screen, the scrollbar won't appear. (For instance, in the image shown, getting rid of the sidebar ad would free up easily enough vertical space.)

Where do I get it?

You may find the component scripts on Pastebin, since UserStyles doesn't like styles for NSFW sites:

• Small Mode base style
• Floating navigation panel
• Full-width text posts
• Fixed-position ('floating') sidebar
• Collapsed sidebar
• Dark colour scheme

You can combine these in basically any combination you like - for instance, you could have a fixed-position collapsed sidebar, a normal-scrolling collapsed sidebar, a fixed-position normal-width sidebar, or a normal-width normal-scrolling one. There are a few tweaks that assume you're running the base script, but they should be fairly harmless even if you're not - you might see a bit of space added in the top left corner, that's all.

All those options sound confusing. Which bits should I use?

Personally, I use all of them. So far as I can tell:

• Lots of people use the base style and the floating navigation panel
• most people like the full-width text option, though it can make the forums a little overwhelming on a very large monitor
• now Danbooru defaults to full-width forums anyway, but my style also expands post comments, pool descriptions, and comment/forum edit boxes
• the dark colour scheme is personal taste; you probably already know if you like light-on-dark or not
• the sidebar setup is the most variable: fixed position and hovering the sidebar to make it visible both tend to be "love it or hate it" things. You should try all the combinations - there are only four - and see which suits you best. You can always change your mind later; no-one's going to know.

latest webarchive index said he's Socialery .

Oooooh yes, you are a gentleman and a scholar! Are you working from the old version, or is this a ground-up rewrite?

Very nice, I especially like the compact tag view and options. It would be nicer to have some margin on the left though, so that forum usernames won't stick to the screen's left end.

Actually, one small issue. When I'm using flynch's Darkbooru, the tag list on a post's page ends up having a light grey background, which is pretty close to unreadable.

EDIT: Also not really liking the scrollbar for when the left-hand tag navigation is longer than the image. It breaks up the visual flow and makes it look more busy.

ghostrigger: Thanks! I've added appropriate credit to my copy of the script, so they'll be there on the next update.

Sal.N: Yes, margins on forum pages and the like are a problem at the moment, I agree. (Also, titles for forum threads, wiki pages etc overlap the menu icon slightly.) That will be fixed before too long, probably when the general page-width stuff is done; my main focus in this release was getting the image pages back to something like the way I wanted them.

DschingisKhan: I'm starting with the styles from the old version (to keep things consistent), but most of the element selectors have been completely replaced, since Danbooru 2 has a vastly different page structure. There are also new additions, of course.

Thanks for the point about use with Darkbooru. I'll drop the background opacity on the sidebar a bit; 0.3 seems to work okay.

Your point about the scrollbar is well-taken, but it's not really avoidable if the sidebar is going to be fixed when you scroll the rest of the page. There's no reliable way to fix that; with standard CSS, the scrollbar is either present (and usable), or hidden (and you can't scroll to the rest of the tag list).

There are nonstandard ways to style the scrollbar to be smaller (or hidden) and still work, but they're very browser-specific; worse, there is no way to do this in Firefox without JavaScript add-ons (it's a long-standing bug). I'm willing to put in browser-specific code if there's a good reason, but not so much when the answer for one or more major browsers is "you just can't do that".

I'll look at breaking the style up into components, though, so that you could have (for instance) the space-saving and the fixed-position pool list, but leave the sidebar scrolling with the rest of the page. There might be another approach, but that's only a slight possibility and I haven't tested it at all yet.

On another note, would someone mind sending me some dmail? I'd like to check the new-mail notifications (if there are any), but messages you send to yourself get marked as read automatically.

Not meaning to hijack your work kounishin. But this is really nice. Hope you don't mind, I messed with it a bit to make it work with dark styles like the second pastebin link in this post, for anyone who wants it:

http://imgur.com/a/1tnUr
http://pastebin.com/CAAjMfDp

It changes a few things that I didn't like as well but that's just me, feel free to screw with it. It also fixes 100% screen width usage on pool and posts pages, which I figured I should probably put in the Darkbooru stuff anyway so if anyone wants that (the fix is in the above paste too though):

http://pastebin.com/hqSivwTf

Edit: You posted just as I was typing my post, for what It's worth, margins are slightly adjusted in what I pasted, I don't know if that helps with what you had but it was one of the things that bothered me.

I completely removed the scrollbar/fixed tags menu on the left as well, really didn't like it sorry. Thanks again for doing it though, really nice stuff.

People messing with it is fine; that's why it's out there, after all. Thanks for the work on the screen-width side of things: I'll probably steal that once I can get my head around how it works.

I see that from the screenshots in your darkened version, you seem to have dropped all of the sidebar tweaks (size / removed headers as well as the fixed-location part). Was that just for convenience, or did the rest of it not sit well with you either?

The reason I ask is to determine whether, once I've broken out the various components, those sidebar tweaks should go on the general space-saving side or on the fixed-position sidebar side. They could be separated out entirely, of course, but I don't want to end up with too many components; that would just get confusing.

kounishin said:
Your point about the scrollbar is well-taken, but it's not really avoidable if the sidebar is going to be fixed when you scroll the rest of the page. There's no reliable way to fix that; with standard CSS, the scrollbar is either present (and usable), or hidden (and you can't scroll to the rest of the tag list).

My personal feeling is I'd rather not have the sidebar fixed at all. This may just be because it's what I'm used to coming from the one I have that worked before. (Or was there an update to the original Small Modo that added the fixed div for the sidebar like you have now and I just completely missed it? I could see me doing that.)

I do like the removal of the type headings. My thought from the start was that those should just be <h3> or <h4> (or even just ), but removing them might work even better for my own case.At the moment, I've actually removed the background-color, position, and z-index for the sidebar. Also, I made the width 15em so the search button doesn't get pushed to the next line (vertical space is much more valuable than horizontal in my configuration).

Updates for 2013-03-19:

• even though the footer still says v2.1.0, post pages now use mostly margins rather than mostly padding for content spacing; collapsed sidebar style updated to compensate (so the rest of the page actually collapses again, rather than leaving whitespace), and floating sidebar to match.
• dark colour scheme adapted to handle red/green tables (like user records); I'd overlooked those, and they were pretty painful to see
• full-width text style has a couple of tweaks for edit boxes; it's still useful even with the latest updates making the forum full-width by default, because it adjusts post comments and pool descriptions too. (Also it fixes a bug with comments and long tag lists in the standard Danbooru style, detailed in the style sheet.)
• floating nav panel adjusted to not grey-highlight the active nav option if there's only one present, and make its style more consistent with the other parts
• instructions for adapting styles to Chrome added to initial post

The base Small Mode style sheet is not changed in this update.

Updates for 2013-07-06:

• tweaked the dark colour scheme to fix the backgrounds on the main page div, page footer, and expanding-text sections
• removed the links from the previous update post to stop them pointing to stale versions

Updates for 2013-07-22 (which I forgot to post until now): some more tweaks/fixes to the dark colour scheme, nothing else changed.