Danbooru

Custom CSS Thread

Posted under General

/* Rearrange the uploads page. Move the commentary section down, to just above the related tags section, so that loading it doesn't shift the tags. */

#c-uploads #a-new #form { display: flex; flex-direction: column; }
#c-uploads #a-new #form :nth-child(8)  { order: 1; } /* file field */
#c-uploads #a-new #form :nth-child(9)  { order: 2; } /* source field */
#c-uploads #a-new #form :nth-child(10) { order: 3; } /* rating field */
#c-uploads #a-new #form :nth-child(11) { order: 4; } /* parent field */
#c-uploads #a-new #form :nth-child(16) { order: 5; } /* tags field */
#c-uploads #a-new #form :nth-child(17) { order: 6; } /* submit button */
#c-uploads #a-new #form :nth-child(7)  { order: 7; } /* upload for approval */
#c-uploads #a-new #form :nth-child(12) { order: 8; } /* commentary header */
#c-uploads #a-new #form :nth-child(13) { order: 9; } /* commentary show/hide toggle */
#c-uploads #a-new #form :nth-child(14) { order: 10; } /* commentary fields */
#c-uploads #a-new #form #related-tags-container { order: 11; } /* related tags */

/* Hide things on the uploads page that I never use. */

#c-uploads #a-new #form :nth-child(7)  { display: none; } /* hide upload for approval */
#c-uploads #a-new #form :nth-child(8)  { display: none; } /* hide file field */
#c-uploads #a-new #form :nth-child(10) { display: none; } /* hide rating field (tag with rating:s instead) */
#c-uploads #a-new #form :nth-child(11) { display: none; } /* hide parent field (tag with parent:123 / child:123 instead) */
#c-uploads #a-new #upload-guide-notice { display: none; } /* hide upload notices */

Updated

tapnek said:

Since Albert will be removing a direct link to the uploader's profile and uploads on a post, is there a way to restore it using CSS?

We don't know how the page will look yet so there's no way to answer that now. If the uploader name is completely removed from the post page then you'll have to use a userscript, as it's out of the scope of CSS.

Is there a way to change the background or text color of translation notes? I'm using a darkbooru style so most of the site text is white, which means mouseover on most notes is white-on-peach and I can't read it without highlighting.

I don't know CSS myself beyond really basic stuff, so I haven't been able to figure out how to fix it. If there's no fix I'll just have to make the site text a light grey or something instead.

Edit: clarifying problem after fiddling with the code some more and failing spectacularly

Updated

Kayako said:

Is there a way to change the background or text color of translation notes? I'm using a darkbooru style so most of the site text is white, which means mouseover on most notes is white-on-peach and I can't read it without highlighting.

div#note-container div.note-body {background-color: black !important}

It might work without the !important for you.

Firefox and probably other browsers too have a tool to let you inspect elements of a website, showing you matching CSS rules. Just look for the background-color rule and overwrite it with a matching selector.

kittey said:

div#note-container div.note-body {background-color: black !important}

It might work without the !important for you.

Firefox and probably other browsers too have a tool to let you inspect elements of a website, showing you matching CSS rules. Just look for the background-color rule and overwrite it with a matching selector.

Ahhhh, okay, so I was pretty close to getting it right...I need to sit down and properly learn CSS instead of just picking up tricks from looking at other people's codes. Thank you!

FivePastNever said:

If I wanted to change the background and font color of the favorite/unfavorite buttons, how would I do it?

.fav-buttons {
    background-color:#826281;
    color:#ff00ff;
}

disclaimer: I wrote this on my phone, so it might be slightly off

also, you could color the favorite and unfavorite buttons differently if you wanted, but you'd have to look up the class names with the inspect element tool or something

Gollgagh said:

.fav-buttons {
    background-color:#826281;
    color:#ff00ff;
}

disclaimer: I wrote this on my phone, so it might be slightly off

also, you could color the favorite and unfavorite buttons differently if you wanted, but you'd have to look up the class names with the inspect element tool or something

FivePastNever said:

Using the inspect tool it turned out to be input.ui-button.ui-widget.ui-corner-all.gradient for both buttons, at least for the desktop.

Actually, both of the above are wrong. The first one gets the anchor specifier correct, but incorrectly doesn't specify the element specifier. The second gets that correct, but doesn't specify the correct anchor specifier.

Additionally, it's background and not background-color, and the border should also be specified.

Anchor specifiers

  • Both: .fav-buttons
  • Favorite: #add-fav-button
  • Unfavorite: #remove-fav-button

Element specifier

  • All: .ui-button

Examples

Both buttons have black background with white text with gray border:

.fav-buttons .ui-button {
    background:#000000;
    color:#FFFFFF;
    border:solid 4px #888888;
}
.fav-buttons .ui-button:hover {
    background:#222222;
}

Favorite button with pink gradient background and purple text with no border:

#add-fav-button .ui-button {
    background:#FFAEC9;linear-gradient(#FFAEC9, #EE9DB8);
    color:#8000ff;
    border:0;
}
#add-fav-button .ui-button:hover {
    background:#FFCFEF;
}

The following fixes that annoyingly long GitHub link in the footer. Adjust the length according to your own liking.

footer a[href*=github] {
    display: inline-block;
    overflow: hidden;
    max-width: 5em;
}

Update:

Updated

1 6 7 8 9 10 11 12 13 14 19