Danbooru

Custom CSS Thread

Posted under General

tapnek said:

Why wasn't it just the first seven characters of the hash like before?

The numbers are still there, the CSS just hides them, but it's a bit imprecise. 4em seemed too short, and I didn't want to resort to using pixels, so I just went with 5em which seemed the closest. Although you can if you want, I believe 5em is 70px, so just keep adjusting the number until you get only 7 characters.

Sorry... I misunderstood you. TBQH, I don't know why the length of the hash changed.

Updated

Not a fan of the new tooltips. Made some changes that I like and I'm just sharing.

Would be cool to get the upload date added to the footer

Show
/* Removes interactiveness, and attempts to make it less intrusive */
.post-tooltip { 
    pointer-events: none;
    border-style: none;
    box-shadow: none;
    opacity: 0.9;
    max-width: 40em;
}
/* Either hide overflow or let it scale to fit all tags */
.post-tooltip .qtip-content .post-tooltip-body {
    /*overflow-y: hidden;*/
    max-height: none;
}
/* Removes "Top Tagger" because it's clutter */
.post-tooltip-footer a:first-child {
    display: none;
}

Updated

I added to some CSS from evazion to make the new tooltips match Darkbooru and not change color on hover. It could probably be cleaner, but it seems to work.

/* Always color tooltips */
.post-tooltip .category-0 a { color: #0073ff; }
.post-tooltip .category-1 a { color: #A00; }
.post-tooltip .category-3 a { color: #A0A; }
.post-tooltip .category-4 a { color: #0A0; }
.post-tooltip .category-5 a { color: #F80; }
.post-tooltip-header a, .post-tooltip-header:not(:hover) a { color: #0073ff; }
.post-tooltip-header span, .post-tooltip-header:not(:hover) span { color:#848484 }
.post-tooltip-pools a.pool-category-series, .post-tooltip-pools:not(:hover) a.pool-category-series { color:#A0A }

/* Make tooltips match Darkbooru */
.post-tooltip-header { background-color: #3d3d3d; }
.post-tooltip-body { background-color: #1b1b1b; }

Updated

Since the input boxes for Edit Saved Search are really small, some CSS to widen them:

/* Edit Saved Search - wider Query and Labels input boxes */
input#saved_search_query, input#saved_search_label_string { width: 90%; max-width: 90% }

The upload page has been changed again and the CSS code I used to hide the commentary options doesn't work anymore and I can't figure out how to fix it. Can someone supply some code that can do the same thing?

edit: And the Related Tags space doesn't show up by default anymore. I have to click the button to get it to show up. Can someone supply code for that as well? I think this one may be a bug though.

Updated

The following will get back the old method for uploading files from disk:

#c-uploads #a-new #filedropzone {
    display: none;
}
#c-uploads #a-new .input.fallback {
    display: block;
}
Edit:
  • (2022-02-20) Doesn't work, since the filezone removes the old input. The userscript on forum #160207 can be used instead.

Updated

In response to the issues brought up in topic #9127/p241, to have the Related Tags section show up on the Uploads page by default, using the following CSS:

#c-uploads #a-show #related-tags-container,
#c-upload-media-assets #a-show #related-tags-container {
    display: block;
}
Edit:
  • (2022-02-20) Updated for new upload scheme.

Updated

tapnek said:

@BrokenEagle98 Thanks. Do you have a solution to hiding the commentary options on the upload page?

Alright, having talked with tapnek behind the scenes, I see that only a basic hiding scheme is needed.

#c-uploads #a-show #form > div:nth-child(14),
#c-upload-media-assets #a-show #form > div:nth-child(14) {
    display: none;
}

A disclaimer about the above, is that it is highly fragile due to the necessity of using positional selectors, so any page layout changes could either cause it not to work or for the wrong element to be hidden.

Edit:
  • (2022-02-20) Updated for new upload scheme.

Updated

Sassy-Chan said:

My CSS is suddenly not working? Worked fine for about a year but suddenly just stopped.
What's going on?

Maybe the site structure or CSS classes changed. We can’t tell without knowing what your non-working CSS is.

Please create a new thread for it because this one is for sharing CSS with other users, not troubleshooting.

Z-Dragon said:

Hello, is there any CSS code that makes the comments disappear? I tried to use any CSS codes for hiding the comments, but all of them didn't work for me for whatever reason.

section#comments {
    display: none;
}

or if you'd prefer a cosmetic filter for uBlock (the advantage of this being that you don't need to be logged in for this to work):

donmai.us###comments

Updated

Would it be possible to get a bit of code to switch the new upvote/downvote graphics back to text, or maybe just insert some dashes or something to space them apart a bit more? I'm finding it hard to adjust to the tiny, visually similar images.

zigzag said:

Would it be possible to get a bit of code to switch the new upvote/downvote graphics back to text, or maybe just insert some dashes or something to space them apart a bit more? I'm finding it hard to adjust to the tiny, visually similar images.

.fa-thumbs-up:before {
    content: "Up";
    font-family: Arial;
    font-weight: bold;
}
.fa-thumbs-down:before {
    content: "Down";
    font-family: Arial;
    font-weight: bold;
}
.fa-meh:before {
    content: "Meh";
    font-family: Arial;
    font-weight: bold;
}
.fa-thumbs-up,
.fa-thumbs-down,
.fa-meh {
    margin: 0 4px;
}

Change the pixel value for the margin to adjust how far apart the elements are.

If you just want to space the icons apart, then just use the following.

.fa-thumbs-up,
.fa-thumbs-down,
.fa-meh {
    margin: 0 4px;
}
Edit:
  • (2018-07-11)
    • Fixed issue where extra text was being added to comment votes
  • (2018-09-15)

Updated

1 7 8 9 10 11 12 13 14 15 19