Danbooru

Custom CSS Thread

Posted under General

Since we have the "Custom CSS style" advanced setting, how about a thread for them?

Preferably with /* embedded comments */.

Updated by Log

"Blacklisting" the pools - that is, don't show that a post belongs to a certain pool:

#nav-link-for-pool-<pool_id> {display:none}

For example, to hide "chaos" pool:

#nav-link-for-pool-2355 {display:none}

Note that it will NOT hide posts belonging to said pool.

Updated

Any chance of removing the Copyrights/Characters/Artist/Tags subheaders?

Log said:

Any chance of removing the Copyrights/Characters/Artist/Tags subheaders?

Here. If you want to keep the blank line between the sections, just leave off the third line:

section#tag-list h1 { display:none }
section#tag-list h2 { display:none }
section#tag-list ul { margin-bottom:0 }

Some thumbnail filtering, just to show the power of selectors combined with the data danbooru provides. Granted, opacity tweaks can be replaced with anything else. More stuff to come after/if issue #1902 gets implemented.

I'm not skilled in CSS. Anyone got one for turning the general white background a dark grey for night-time viewing?

Ah, thank you, but I was only hoping to change the colors of the main background without affecting the borders that show different modes (e.g. note edit, tag script, etc.).

If modes are your only concern, then here. I'm not happy with it, but at least it works for me:

*:not(.mode-edit):not(.mode-tag-script):not(.mode-add-fav):not(.mode-remove-fav):not(.mode-rating-s):not(.mode-rating-q):not(.mode-rating-e):not(.mode-vote-up):not(.mode-vote-down):not(.mode-lock-rating):not(.mode-lock-note):not(.mode-approve):not(.mode-unapprove):not(.mode-add-to-pool):not(.mode-translation) { background-color:grey }

#page, #top, and #page-footer are the only other classes Danbooru's CSS explicitly specifies a background color for.

RaisingK said:

If modes are your only concern, then here. I'm not happy with it, but at least it works for me:

You could simplify it:

*:not(body), body.mode-view, body:not([class]) { background-color: grey; }

I think this was much closer to what I was looking for. I *think* this covers everything, but again I don't really know CSS all that well.

#page, #top, #page-footer {background-color:darkgray}
body.mode-view{background-color:darkgray}
table.striped tr.even{background-color:gainsboro}

RaisingK said:
#page, #top, and #page-footer are the only other classes Danbooru's CSS explicitly specifies a background color for.

Actually, if you search the CSS for background: and background-color: you turn a good number of other classes. Some div & table stuff, for example.

Updated

There are other implications as well - notably, changing to a dark background often means you want to change the foreground colour to something lighter.

The "dark colour scheme" part of my "Small Mode" style set (in topic #9037) is the most comprehensive I know of; it should work fine on its own, without needing any of the other bits. There's also a simpler one by Gollagh in topic #9588 (it may need tweaking to accommodate the extra classes RaisingK mentions, since I think it predates those changes, but that should be easy enough).

Both may be a little long for inclusion with other rules in the Miscellaneous Tweaks section, but that'll be hard to avoid if you want to cover everything; Danbooru's style sheets get reasonably complex, so any after-the-fact tweaks have to work with that complexity.

An additional tweak for the thread (unrelated to the whole dark-colours thing):
[expand=Visual indicators of translation status]
/* Visually indicate translation status of posts on their previews in */
/* relevant Danbooru pages (pools, search results, etc) */
/* CSS by kounishin; adapted from idea by itsonlyaname in forum #84726 */
/* Borders are set to 1px + 1px padding so as not to change the page layout: */
/* Danbooru 2 uses 2px transparent borders on the <article> elements at time */
/* of writing (2013-02-23). This will break if the Danbooru styles change. */
/* Last match wins. partially_translated comes last because all posts with */
/* that tag also have translation_request by automatic implication. */

article.post-preview[data-tags~="translated"] {
border: 1px solid green !important;
padding: 1px !important;
}
article.post-preview[data-tags~="check_translation"] {
border: 1px dotted green !important;
padding: 1px !important;
}
article.post-preview[data-tags~="commentary_request"] {
border: 1px dashed red !important;
padding: 1px !important;
}
article.post-preview[data-tags~="translation_request"] {
border: 1px dotted red !important;
padding: 1px !important;
}
article.post-preview[data-tags~="partially_translated"] {
border: 1px dotted orange !important;
padding: 1px !important;
}

[/expand]
Not my idea; itsonlyaname gets the credit, having done it as a user script in topic #9023. I just adapted it to straight CSS.

Type-kun said:

"Blacklisting" the pools - that is, don't show that a post belongs to a certain pool:

[...]

Note that it will NOT hide posts belonging to said pool.

Similarly, you can blacklist pools by category:

/* Hide all collection pools */
.pool-category-collection { display: none; }

Edit:

To only hide them from appearing in the pool bar on post pages:

/* Hide all collection pools */
#c-posts #a-show .pool-category-collection { display: none; }

Updated

I'll leave this stickied until requests/useful posts die down, added it to the index anyways.

Color all request tags (eg. tagme, translation_request) a different color from other general tags so they're more noticeable in the sidebar:

/* Color request tags black */
a.search-tag[href*=_request], a.search-tag[href*=tagme] { color: black; }
a.search-tag[href*=_request]:hover, a.search-tag[href*=tagme]:hover { color: #666; }

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.