Danbooru

Custom CSS Thread

Posted under General

Okay, since issue #1902 got implemented - more good stuff :3

Wypatroszony said:

It only struck me to type it now, it's that not important.
I'd like to request a CSS for "clickable" blacklisted tags on the post page (much like in danbooru 1, what tag(s) is/are being actually blacklisted was/were also hidden, until a click on the number of posts hidden, except I'll be fine with the whole name to be clickable), because I'm not using it to be flaunted what exactly I DON'T want to see is on the page and be explicitly and always informed about that. (I'm not approving any of those by definition.)
Is that possible? Thanks in advance.

If I'm getting this right, you want clickable links in 'blacklisted tags' section to be hidden, but still usable? I'd suggest coloring them white and showing on mouseover, so you won't see them unless you want to:

[expand=]

/*Don't show blacklisted tags until mouseover*/
section#blacklist-box a {color:white;}
section#blacklist-box a:hover {color:#80B9FF;}

Updated

Type-kun said:

Okay, since issue #1902 got implemented - more good stuff :3

Here's another option for blacklisting users. It makes their posts partially transparent, but they become visible when you hover over them.

Toks said:

Here's another option for blacklisting users. It makes their posts partially transparent, but they become visible when you hover over them.

You beat me to it by a few seconds :3 Another option instead of whiting-out is using opacity:0 to fully hide posts:

[expand=]

/*Hide the comment body, show on mouse-over:*/
article.comment[data-creator="albert"] .content {opacity:0}
article.comment[data-creator="albert"] .content:hover {opacity:1}

[/expand]

Updated

Type-kun said:
If I'm getting this right, you want clickable links in 'blacklisted tags' section to be hidden, but still usable? I'd suggest coloring them white and showing on mouseover, so you won't see them unless you want to:

Fair enough. Thank you, kind soul.

Here's a version that will collapse the list of blacklisted tags entirely, until you mouse over the heading; it'll save some space, especially if you have a lot of things blacklisted:
[expand=Collapsing blacklist]
#blacklist-box ul { display: none; }
#blacklist-box:hover ul { display: block; }

[/expand]
[expand=Optional cosmetic addition]
#blacklist-box h1:before { content: "▶ "; }
#blacklist-box:hover h1:before { content: "▼ "; };
[/expand]
You can't do "click to do X" stuff in CSS (except for a couple of very limited cases); it pretty much always has to be "hover to X" instead.

Okay, after getting a handful of KLK spoilers from comments listing today, before I even started to watch the show, I thought it's about time to dim the spoiler thumbnails. Wouldn't hurt to share, I guess, even if it's just combining the solutions already mentioned in this thread:

A week, a year, whatever. I guess I'll just leave it stickied since it doesn't get much use it'll get buried on page 200 otherwise.

Yaiishi said:

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

Strictly speaking, you could make the thumbnail physically larger on the screen, but you wouldn't be able to see any additional detail since it's still the same image. I don't believe it's possible to load a larger version of the image purely through CSS at the moment (no browser supports treating attribute values as URLs), so you'll need a userscript for that.

uxw said:

Strictly speaking, you could make the thumbnail physically larger on the screen, but you wouldn't be able to see any additional detail since it's still the same image. I don't believe it's possible to load a larger version of the image purely through CSS at the moment (no browser supports treating attribute values as URLs), so you'll need a userscript for that.

I see. Where would I start at on getting a script to do that for me? I'm not a complete noob, but I'm no pro either.

Wow, don't know why I didn't notice this feature sooner.

Here are a couple I've cooked up in short order. Thanks to kounishin for the idea of marking translated posts.

Edited for new Share section's ID

Updated

Tenebrous said:

I said this in the other thread, but I'll repeat it here: When the site layout changes in the future this css will break things. It should only be used as a temporary measure.

Taken from topic #10731:

RaisingK said:

Taken from topic #10731:

? Kinda weird to post that here when it's gonna be in the site itself in a few days.

Toks said:

? Kinda weird to post that here when it's gonna be in the site itself in a few days.

Come on, you didn't say it would be until after I said that.