Custom CSS Thread

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

Tweaked your code a bit so that it hides just the commentary options. Thanks!

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.

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?

It works for me now after removing "[data-creator="albert"]". Thanks, tapnek!

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

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!

A good way to learn is to use your Inspect tool, change things, see what happens; you can use http://www.w3schools.com for documentation.

kittey said:

It might work without the !important for you.

Yes... fun fact. Danbooru will add in the !important if it doesn't already exist.

Anyone got any CSS to hide the Favorite/unfavorite buttons at the bottom of images? Kinda dumb to show them on desktop view

DeusExCalamus said:

Anyone got any CSS to hide the Favorite/unfavorite buttons at the bottom of images? Kinda dumb to show them on desktop view

.fav-buttons {display:none}

^The above will hide it for all views, both desktop and mobile.

The following will hide it only for the desktop view.

@media screen and (min-width: 661px) {
    .fav-buttons {
        display: none;
    }
}

ty kittey/brokeneagle

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

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

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.

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:

• (2019-08-19)
• No longer needed
• Fixed as mentioned in forum #159068