Custom CSS Thread

Here are a few tweaks I've been experimenting with the past few days. I find it more convenient to use these with Stylish so I can toggle them on & off, but they should work as custom CSS too.

You'll have to remove the "@-moz-document" bits too if you don't use Firefox.

Misc Tweaks (before / after)

• Makes the forum updated link shut the fuck up. (issue #2229)
• Minor tweaks to make the tag list take up less vertical space.
• Hides the "+ -" links in tag lists.
• Makes the search box wider.

Form Styling (before / after)

• Restyles buttons and edit boxes sitewide into something a bit nicer looking than the browser default.
• Redesigns the Edit form on posts to take up less vertical space so there's less scrolling between the image and the edit form.
• Makes the source edit box wide enough to see the full URL.
• Makes the tag edit box a little bigger.

Border Styling

• Adds a small gap between thumbnails and the thumbnail border. This makes thumbnail borders more discernable when the thumbnail background is the same color as the border.
• Caveat: This makes thumbnails a couple pixels smaller to keep the added gap from shifting the layout.

Border For Pools

• Display a purple border around posts that are in pools.
• Doesn't display any borders for status:flagged/pending/deleted.
• Tweaks parent/child border colors so they contrast better against a white background.
• Caveats: collection pools can be annoying. Also, posts in deleted pools are included because of issue #1997.

Thumbnail Icons (before / after)

• Adds icons in the bottom left corner of thumbnails for status pending, deleted, flagged, and banned.
• Adds icons for translated / translation_request in the bottom right corner as per Tenebrous' script, but styles them like Toks' animated icon.

evazion said:

• Redesigns the Edit form on posts to take up less vertical space so there's less scrolling between the image and the edit form.

fyi if you use the shift+e floating edit dialog you won't need to scroll between the image and edit form at all.

I know, I use it most of the time now. But that's no excuse for the main edit form being crappy. There are many things like this I can tell nobody ever put much thought into. I have a bunch of usability improvements I'm working on that I plan on sending pull requests for when I have the time.

evazion said:

Hides the "+ -" links in tag lists.

Those links are from a userscript, better to just disable that feature in it's options :p

itsonlyaname said:

Those links are from a userscript, better to just disable that feature in it's options :p

Danbooru itself has them, too, for Gold+ users: help:users

I'm quite thankful for the comment blocking by user CSS above, but I'm also getting tired of the "call the MPs" roleplaying on all the KanColle images with younger girls. Is there a way to filter them via the comment's contents instead of creator? I have absolutely nil coding experience.

OOZ662 said:

I'm quite thankful for the comment blocking by user CSS above, but I'm also getting tired of the "call the MPs" roleplaying on all the KanColle images with younger girls. Is there a way to filter them via the comment's contents instead of creator? I have absolutely nil coding experience.

Not with pure CSS, alas. If you're fine with userscript, that should be easy, though.

Type-kun said:

Not with pure CSS, alas. If you're fine with userscript, that should be easy, though.

I do use Danbooru 2 Tweaks (which hasn't been updated in a kinda worryingly long time) and Improved Blacklists already, so another wouldn't be an issue.

OOZ662 said:

"call the MPs" roleplaying

I would also like some of that if someone would care to enlighten us.

With a hi-res monitor the thumbnails are too tiny, so I always browse the thumbnails at 150% zoom (via browser zoom), but individual posts at 100%, so I'm always zooming in and out. Instead of that I find this half-assed CSS works on Chrome, FF, and IE 11:

.post-preview { 
  transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5); 
  margin: 40px !important;
}

1.5 is the zoom (150%). If you adjust that you probably need to adjust the margin too. Messing with margin at this level is easier than trying to fix the width, because of centering/clipping issues.

Yaiishi said:

How would I go about making images enlarge when I hover over the thumbnail?

#posts article:hover { 
  z-index: 99999 !important;
  transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5); 
}

1.5 is 150% zoom, adjust as you want.

Edit: Looks like it clips at top and bottom of page, but this doesn't seem to be a huge detriment. Could probably put an overflow: visible at a higher level.

Styling user names depending on permissions:

Credit for check-mark idea goes to @Toks

What it looks like

While this thread has had recent activity, I'd like to take the opportunity to ask a question: is it at all possible to use CSS to disable the new 'mobile' layout?

Here is my two cents

/*Hide scrollbars (webkit base only, like chrome, opera, vivaldi, etc)*/
::-webkit-scrollbar { display: none }

Blacklisted posts started to appear as black boxes for me, instead of the old behavior in which they simply disappeared.

This css fixes this:

.blacklisted-active { display: none; }
li .blacklisted-active { display: inline; }

_cf said:

Blacklisted posts started to appear as black boxes for me, instead of the old behavior in which they simply disappeared.

Toks already provided a version that works better in topic #9127/p107:

.post-preview.blacklisted-active, #image-container.blacklisted-active { display: none; }

Thanks to everyone for all their hard work.

Is there possibly a CSS trick to move Options above Tags on the left-hand side ? This is an edge-case since I personally would rather not scroll down to favourite a post so many many times on a rather slow connection, whereas most people probably like it as it is. Even if that's just a quarter-second per post it eventually adds up.

Thanks.

Claverhouse said:

Thanks to everyone for all their hard work.

Is there possibly a CSS trick to move Options above Tags on the left-hand side ? This is an edge-case since I personally would rather not scroll down to favourite a post so many many times on a rather slow connection, whereas most people probably like it as it is. Even if that's just a quarter-second per post it eventually adds up.

Thanks.

If you don't like scrolling down to favorite why not use the F shortcut?

I do; but that's slower than mousing down. [ Everything’s slower than a mouse. ]

This should work, if text overlaps adjust the margin

#sidebar {
  position: relative;
}
#c-posts #a-show #search-box {
  margin-bottom: 20em;
}
#post-options {
  top: 4em;
  position: absolute;
}