Custom CSS Thread

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

tapnek said:

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

.post-preview.post-status-flagged img {
    border-color: #F00;
}

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}

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.

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}

Is it possible to autofocus the tag blacklist textarea in Settings with CSS? I tried the following, but it doesn't seem to do anything:

textarea#user_blacklisted_tags { autofocus }

AFAIK, autofocus isn't a style and can't be set with CSS. You need to use Javascript for something like that.

That makes sense. Thanks, BrokenEagle98. I hacked together a simple userscript for it over in topic #8502/p2, in case it might be useful to anyone.

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.

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

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

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

.odd td {
    background-color: #1b1b1b !important;
}
.even td {
    background-color: #282828 !important;
}
.even:hover td, .odd:hover td {
    background-color: #444 !important;
}
table.striped td, table.striped th {
    background-blend-mode: multiply;
}

This will blend your background-color and the linear-gradient to give the effect back.
For browsers that support it, that is.

I didn't really care for the visual effect, personally; it was the fact that it was based on the tag count which was the interesting part.

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:

• (2017-06-02) Added reiyasona's fixes from below (forum #132119)

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;
}

Ah, good catch. I updated my post.

However, I still left the <article> element out of mine, as that excludes post previews that are in <div> elements, such as those found on the /comments page.

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:

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

#delete-account {
    display: none;
}