Custom CSS Thread

This CSS snippet places a striped background behind images. Not only will it highlight that an image has a transparent background, but it will also let you see transparency surprises such as post #1496955, post #2540465 and post #2552285. The downside is that transparent images that look best on white background now have a striped background. It only works with full-size posts because thumbnails and samples are generated without transparency information. The more common checkerboard pattern requires stacked gradients and seems to render somewhat slowly.

#image {background-image:linear-gradient(45deg, #a0a0a0 25%, #909090 25%, #909090 50%, #a0a0a0 50%, #a0a0a0 75%, #909090 75%, #909090); background-size:50px 50px}

BrokenEagle98 said:
Nothing ground breaking about the following CSS, but it does remove the ominous feeling I get whenever I see that huge "Delete account" link...

Thanks. I feel the same.

kittey said:

The more common checkerboard pattern requires stacked gradients and seems to render somewhat slowly.

#image { background-image: linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%), linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%); background-size: 65px 65px; background-position: 0 0, 32px 32px; background-color: #808080; }

This works fine and fast for me.

BrokenEagle98 said:
Nothing ground breaking about the following CSS, but it does remove the ominous feeling I get whenever I see that huge "Delete account" link...

Aside: There's a French term, L'appel du vide (call of the void) for when you're on the edge of a giant drop and, even though you're not the least bit suicidal, you momentarily contemplate what would happen if you threw yourself off.

How would one remove the new 'favorite' button below images? I think it's superfluous with the existing option in the sidebar.

DeusExCalamus said:

How would one remove the new 'favorite' button below images? I think it's superfluous with the existing option in the sidebar.

form#add-fav-button {display: none;}
form#remove-fav-button {display: none;}

works for me.

nonamethanks said:

form#add-fav-button {display: none;}
form#remove-fav-button {display: none;}

works for me.

removed it via adblocker \o/

Is there a method to open image pages without the tag/s being appended to the URL? For instance:

http://danbooru.donmai.us/posts/2852286

instead of

http://danbooru.donmai.us/posts/2852286?tags=tomboy

My primary personal concern is bookmark duplication (so I don't end up with functionally the same bookmark with, say, ?tags=3girls appended instead), but this may be useful to other people for other reasons.

southrim said:

Is there a method to open image pages without the tag/s being appended to the URL? For instance:

Danbooru doesn’t have a setting for that, but you could do it by writing a user script for it.

You asked in the custom CSS thread, but it’s definitely not possible with CSS.

@southrim

Check out the Javascript I added in forum #136251 which removes the trailing search parameters like you asked.

kittey said:

Danbooru doesn’t have a setting for that, but you could do it by writing a user script for it.

You asked in the custom CSS thread, but it’s definitely not possible with CSS.

Okay. I'm functional at implementing existing scripts but not knowledgeable about different categories for them or writing them myself. I thought it might not be a CSS thing, but this was the most relevant thread I saw on the forum.

BrokenEagle98 said:

Check out the Javascript I added in forum #136251 which removes the trailing search parameters like you asked.

Checking it out now, thanks.

kounishin said:

Here's a version that will collapse the list of blacklisted tags entirely, until you mouse over the heading; it'll save some space, especially if you have a lot of things blacklisted:

Collapsing blacklist

#blacklist-box ul { display: none; }
#blacklist-box:hover ul { display: block; }

You can achieve the same effect with a single rule:

#blacklist-box:not(:hover) ul { display: none; }

Does anyone know of a css trick to make the information box for a post (specifically the source link) display at the top of the sidebar, above the tags?

nonamethanks said:

Does anyone know of a css trick to make the information box for a post (specifically the source link) display at the top of the sidebar, above the tags?

You could try to fiddle around with what evazion posted in forum #139137. A while ago, I tried to move the information box to the top with floating objects and margins/padding/whatever and failed horribly. A JS solution would easily work for simply moving things around, but the event handlers for post voting and showing favorited users would break.

/* /posts/1234: Move the Information section above the tag list. */
#c-posts #a-show #sidebar { display: flex; flex-direction: column; }
#c-posts #a-show #sidebar #search-box       { order: 0; }
#c-posts #a-show #sidebar #blacklist-box    { order: 1; }
#c-posts #a-show #sidebar #post-information { order: 2; }
#c-posts #a-show #sidebar #tag-list         { order: 3; }
#c-posts #a-show #sidebar #post-options     { order: 4; }
#c-posts #a-show #sidebar #post-history     { order: 5; }

Yes, the same trick from forum #139137 works here too. Flexboxes are the key to rearranging things without having to resort to Javascript.

Ah neat, that works very nicely. Thanks!

Is there a CSS to get rid of these boxes around each post?

/* Remove borders from forum posts. */
div.list-of-forum-posts article {
  border: none;
  box-shadow: none;
}

evazion said:

/* Remove borders from forum posts. */
div.list-of-forum-posts article {
  border: none;
  box-shadow: none;
}

Thanks a lot :3.

Is there CSS code to prevent the upload page from fetching from the source when I copypaste a link in the source field?

tapnek said:

Is there CSS code to prevent the upload page from fetching from the source when I copypaste a link in the source field?

That’s being done with JavaScript. CSS has no influence on it. It’s probably possible with a user script, but I haven’t seen one around yet.