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 */.

CSS used in the Miscellaneous Tweaks's "Add Style"

/* Hide the Danbooru header */
header h1 { display: none }

/* Increase the space above the navbar */
menu.main { margin-top: 15px }

/* Shove the forum post IDs listed on the Reply rows to the right and color them white. */
div.list-of-forum-posts menu li:first-child { float:right; color:white }

/* Hide the post search Go button */
*#search-box form input[type="submit"] { display: none }

/* Reduce height between thumbnail blocks on profile pages */
div#c-users div#a-show div.box { margin-bottom: 0em; }

/* Make font size more uniform */
body { font-size: 80% }
textarea { font-size: 1.2em }

/* Increase the space around thumbnails */
article.post-preview { min-height: 175px; min-width: 165px; }
.preview { min-height: 175px; min-width: 160px; }

/* Put a little space between the thumbnails and their status borders. */
.post-preview img { padding:2px }

/* Shrink the comment width a tiny bit to accommodate the above width changes */
.list-of-comments { width: 98% }

/* Hide upload guide notice */
div#upload-guide-notice { display:none }

Updated by evazion

"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.


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.


/*Dim the thumbnails for NSFW images*/
.post-preview[data-rating="q"] img {opacity: 0.2;}
.post-preview[data-rating="e"] img {opacity: 0.2;}

/*Dim the thumbnails for images from a certain uploader*/
.post-preview[data-uploader="Type-kun"] img {opacity: 0.2;}

/*Dim the thumbnails for images with negative score*/
.post-preview[data-score^="-"] img {opacity: 0.2;}

/*Dim the thumbnails for images containing a certain tag*/
.post-preview[data-tags~="1boy"] img {opacity: 0.2;}
/*The same for a combination of tags*/
.post-preview[data-tags~="1girl"][data-tags~="1boy"] img {opacity: 0.2;}

Custom user profile link colors

/* Color user names */
a.user-banned { color:black }
a.user-member { }
a.user-gold { color:#0000FF }
a.user-platinum { color:#0000FF }
a.user-builder { color:#6633FF }
a.user-contributor { color:purple }
a.user-janitor { color:green }
a.user-moderator { color:orange }
a.user-admin { color:red }


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}
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.


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):

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;

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; }


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; }


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.

1 2 3 4 5 19