Donmai

Custom CSS Thread

Posted under General

tapnek said:

Is there any CSS code that makes flagged posts have a red border again?

BrokenEagle98’s version clobbers parent/child status. If you also want the green/red and yellow/red borders for flagged parent and child posts, use these:

.post-preview.post-status-has-children.post-status-flagged img {border-color: lime red red lime}
.post-preview.post-status-has-parent.post-status-flagged img {border-color: #CC0 red red #CC0}
.post-preview.post-status-flagged img {border-color: red}

tapnek said:

Thanks, that works. Now I just need help getting a purple border around banned posts. I tried copying the same code but replacing flagged with banned and red with purple and it didn't work.

.post-preview[data-flags~="banned"] img {
	border-color:#F0F !important;
}

If you want purple no matter what...

.post-preview[data-flags="banned"] img {
    border-color: #F0F;
}

...or using kittey's variant above...

.post-preview.post-status-has-children[data-flags="banned"] img {border-color: lime #F0F #F0F lime}
.post-preview.post-status-has-parent[data-flags="banned"] img {border-color: #CC0 #F0F #F0F #CC0}
.post-preview[data-flags="banned"] img {border-color: #F0F}

The following is an example of an icon overlay that can be used for post information visualization. For the following example, it indicates that the post is part of a pool, although it can be adapted to indicate other data conditions as well.

Note: The below is mostly the same CSS code used to display the animation icon for animated pictures.

#c-posts .post-preview[data-pools^="pool:"]:after,
#c-comments .post-preview[data-pools^="pool:"] .preview:after {
    content: "P";
    position: absolute;
    width: 20px;
    height: 20px;
    color: white;
    font-weight: bold;
    background-color: rgba(0,0,0,0.5);
    margin: 2px;
    text-align: center;
    right: 0px;
    top: 0px;
}
#c-comments .post-preview[data-pools^="pool:"] .preview {
    position: relative;
}

To change the data being tested, just adjust the selector between the square brackets "[ ]". Many of the other stylings can also be freely adjusted, such as content and color.

Edit:

(2017-05-25) Adjusted the above so that it appears in the upper right-hand corner, which avoids some slight issues it had overlapping with the animation icon.
(2017-05-27) Fixed issue with how the overlay icon was appearing on the comments page.

Updated

Does anyone know how to change the colors of the tag-count gradient in the tag list? I am using Darkbooru from topic #9588, and the white plus gray color of the gradient makes it rather hard to see. It has been pointed out in the said forum that Gollgagh haven't figured it out yet, but that was three years ago, maybe now someone knows.
I tried to figure it out through googling and inspecting the elements, but I do not know CSS...(I just copypaste CSS codes here and there)

It's not possible to replicate the gradient effect, however if you just want to make the color solid, that's doable.

table.striped td, table.striped th {
    background: darkgrey;
}

Replace the value of darkgrey with whatever you want, to include 4-bit or 8-bit RGB values, e.g. #DDD (4-bit) or #FF0F3F (8-bit).

In-depth

Show

The reason why the gradient effect cannot be replicated is because it's calculated by the server for each tag on the fly and attached to each element. Additionally, CSS properties cannot be modified, they can only be replaced.

background: linear-gradient(to left, #DDD 19.19517372054323%, white 19.19517372054323%);

For example, with the above, the values that would need to be changed are the #DDD and white values, however the whole linear-gradient(...) counts as one element and cannot be replaced piecemeal.

See the problem there is that particular element uses a linear-gradient() function, the arguments for which are generated logarithmically in Ruby from the tag count: the top tag, 1girl with a 100% gradient and 1.8M posts to its name, down to any empty tag with 0% gradient.

The solution will probably require a script, as (afaik) I can't get the tag count to do anything useful with in pure CSS.

Edit: I fixed my style so that it just clobbers the gradient.

I was previously using the .even and .odd classes to style for table striping, but I guess I needed to specify td

Updated

Since the data-is-favorited attribute has been added, it is now possible to add effects to images you have favorited.

The following causes favorited images to be faded, and normal when hovering over. (Credit to reiyasona for this visualization idea)

.post-preview[data-is-favorited="true"] {
    opacity: 0.5;
}

.post-preview[data-is-favorited="true"]:hover {
    opacity: 1.0;
}
Edit:

Updated

BrokenEagle98 said:

Since the data-is-favorited attribute has been added, it is now possible to add effects to images you have favorited.

The following causes favorited images to be faded, and normal when hovering over. (Credit to reiyasona for this visualization idea)

[data-is-favorited="true"] img {
    opacity: 0.5;
}

[data-is-favorited="true"] img:hover {
    opacity: 1.0;
}

I tweaked your CSS code a little bit so that it only affects post previews instead of all images.

article.post-preview[data-is-favorited="true"] {
	opacity: 0.15;
}

article.post-preview[data-is-favorited="true"]:hover {
	opacity: 1.0;
}

See topic #14113 for the full discussion. Basically though, blacklisted items will appear momentarily as the page loads before the Javascript can hide them. The following CSS codes fixes that and prevents them from displaying at all.

  • NOTE:
    • Javascript must be working or the posts will remain hidden.
/*Blacklist thumbnails hidden (Common case)*/
article.post-preview.blacklisted.blacklisted-active {display: none !important;}
article.post-preview.blacklisted {display: block !important;}
article.post-preview {display: none !important;}

/*Flex previews*/
article.post-preview.post-preview-fit-fixed.blacklisted.blacklisted-active {display: none !important;}
article.post-preview.post-preview-fit-fixed.blacklisted {display: inline-flex !important;}

/*Inline block previews*/
.post-gallery-inline article.post-preview.blacklisted.blacklisted-active {display: none !important;}
.post-gallery-inline article.post-preview.blacklisted {display: inline-block !important;}

/*Blacklist image hidden*/
.image-container.blacklisted.blacklisted-active {display: none !important;}
.image-container.blacklisted {display: inline-block !important;}
.image-container {display: none !important;}

/*Images added after blacklist has been processed*/
#recommended article.post-preview {display: block !important;}
.post-tooltip-body article.post-preview {display: inline-flex !important;}

/*Pages without blacklist controls*/
#c-iqdb-queries article.post-preview {display: inline-flex !important;}
#iqdb-similar article.post-preview {display: inline-flex !important;}
#related-posts-by-source article.post-preview {display: inline-flex !important;}
#related-posts-by-source, #iqdb-similar {vertical-align: top;}
.iqdb-posts article.post-preview:not(.hidden) {display: block !important;}
Edit:
Edit Log
  • (2017-06-04)
    • Fixed issue with child/parent post previews by switching display from inherit to inline-block.
  • (2017-06-07)
    • Fixed issue with comments group_by=comment by switching display from inline-block to inline.
    • Fixed issue on "current image" border.
      • 1. With the exception of parent/child previews which are set to inline-block, all images are set to block.
      • 2. Included an implementation for full-size images, which was missing in the original.
      • 3. Removed dependency on order by taking advantage of CSS priority calculations.
  • (2017-07-11)
    • Fixed problem caused by issue #3183, where pages without blacklist controls will no longer be processed, so posts would never appear
    • Added temporary settings to address this until the problem gets resolved by issue #3183
  • (2017-07-21)
    • Fix for issue #3183 is in place, so I removed the temporary settings
  • (2017-09-12)
    • Fixed problem with Find Similar function, since it's not active at page load it won't add the class that reveals the thumbnail.
    • Also fixed Find Similar from the uploads page since there are no blacklist controls there.
  • (2018-07-29)
    • Fixed problem with thumbnails changing to use inline-block
      • With the exception of the comments page when viewing by comment (but not by post)
    • Added/modified/deleted thumbnails that don't get processed by blacklist controls
  • (2018-09-13)
    • Added exception for the Recommended Posts page, since it has no blacklist controls
  • (2018-09-14)
    • Removed exception since the blacklist controls were added to the page (commit de78c5f)
  • (2019-10-07)
    • Updated for post previews on advanced tooltips
    • Removed unnecessary elements
    • Separated userscripts into a separate group
  • (2019-12-27)
    • Updated selector for EventListener userscript
  • (2020-03-27)
    • Fix for new image selector and display type on post show page
  • (2021-05-09)
  • (2021-05-09)
  • (2022-03-06)
    • Fix for the posts in the mod queue not remaining hidden when disapproved
    • Updated the CSS selectors and display types
  • (2022-03-08)
    • Fix for similar/related posts on uploads page
  • (2023-05-14)
    • Fix for IQDB results on the new uploads page

Updated

1 4 5 6 7 8 9 10 11 12 20