Custom CSS Thread

Okay, since issue #1902 got implemented - more good stuff :3

Wypatroszony said:

It only struck me to type it now, it's that not important.
I'd like to request a CSS for "clickable" blacklisted tags on the post page (much like in danbooru 1, what tag(s) is/are being actually blacklisted was/were also hidden, until a click on the number of posts hidden, except I'll be fine with the whole name to be clickable), because I'm not using it to be flaunted what exactly I DON'T want to see is on the page and be explicitly and always informed about that. (I'm not approving any of those by definition.)
Is that possible? Thanks in advance.

If I'm getting this right, you want clickable links in 'blacklisted tags' section to be hidden, but still usable? I'd suggest coloring them white and showing on mouseover, so you won't see them unless you want to:

Type-kun said:

Okay, since issue #1902 got implemented - more good stuff :3

"comment & forum blacklisting"

/*Comment blacklisting*/

/*hide the comments from a specific user*/
article.comment[data-creator="albert"] {display:none;}
/*Or 'white them out' - you will see the blank space, selecting it with mouse will allow to read it.*/
article.comment[data-creator="albert"] *{background:white; color:white; border:none;}
/*Same white-out, but only the text, so you can see the comment author and date*/
article.comment[data-creator="albert"] .content *{background:white; color:white; border:none;}

/*Same things for forum posts*/

/*hide*/
.list-of-forum-posts article[data-creator="albert"] {display:none;}
/*white-out*/
.list-of-forum-posts article[data-creator="albert"] *{background:white; color:white; border:none;}
/*only the text white-out*/
.list-of-forum-posts article[data-creator="albert"] .content *{background:white; color:white; border:none;}

Here's another option for blacklisting users. It makes their posts partially transparent, but they become visible when you hover over them.

Toks said:

Here's another option for blacklisting users. It makes their posts partially transparent, but they become visible when you hover over them.

You beat me to it by a few seconds :3 Another option instead of whiting-out is using opacity:0 to fully hide posts:

Type-kun said:
If I'm getting this right, you want clickable links in 'blacklisted tags' section to be hidden, but still usable? I'd suggest coloring them white and showing on mouseover, so you won't see them unless you want to:

Fair enough. Thank you, kind soul.

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:

You can't do "click to do X" stuff in CSS (except for a couple of very limited cases); it pretty much always has to be "hover to X" instead.

Okay, after getting a handful of KLK spoilers from comments listing today, before I even started to watch the show, I thought it's about time to dim the spoiler thumbnails. Wouldn't hurt to share, I guess, even if it's just combining the solutions already mentioned in this thread:

How would I go about making images enlarge when I hover over the thumbnail?

A week, a year, whatever. I guess I'll just leave it stickied since it doesn't get much use it'll get buried on page 200 otherwise.

Yaiishi said:

How would I go about making images enlarge when I hover over the thumbnail?

Strictly speaking, you could make the thumbnail physically larger on the screen, but you wouldn't be able to see any additional detail since it's still the same image. I don't believe it's possible to load a larger version of the image purely through CSS at the moment (no browser supports treating attribute values as URLs), so you'll need a userscript for that.

uxw said:

Strictly speaking, you could make the thumbnail physically larger on the screen, but you wouldn't be able to see any additional detail since it's still the same image. I don't believe it's possible to load a larger version of the image purely through CSS at the moment (no browser supports treating attribute values as URLs), so you'll need a userscript for that.

I see. Where would I start at on getting a script to do that for me? I'm not a complete noob, but I'm no pro either.

Wow, don't know why I didn't notice this feature sooner.

Here are a couple I've cooked up in short order. Thanks to kounishin for the idea of marking translated posts.

/* These settings are required to properly align the SVG icon */
article.post-preview a {display: inline-block; position: relative;}
/* Create a pseudo-element containing a data url with chat SVG icon (License at http://raphaeljs.com/license.html) */
article.post-preview[data-tags~="translated"]:not([data-tags~="partially_translated"]) a:after {
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0,32,32'><g><path fill='darkgreen' stroke='lime' d='M15.985,5.972c-7.563,0-13.695,4.077-13.695,9.106c0,2.877,2.013,5.44,5.147,7.108c-0.446,1.479-1.336,3.117-3.056,4.566c0,0,4.015-0.266,6.851-3.143c0.163,0.04,0.332,0.07,0.497,0.107c-0.155-0.462-0.246-0.943-0.246-1.443c0-3.393,3.776-6.05,8.599-6.05c3.464,0,6.379,1.376,7.751,3.406c1.168-1.34,1.847-2.892,1.847-4.552C29.68,10.049,23.548,5.972,15.985,5.972z' /><path fill='lime' stroke='darkgreen' d='M27.68,22.274c0-2.79-3.401-5.053-7.599-5.053c-4.196,0-7.599,2.263-7.599,5.053c0,2.791,3.403,5.053,7.599,5.053c0.929,0,1.814-0.116,2.637-0.319c1.573,1.597,3.801,1.744,3.801,1.744c-0.954-0.804-1.447-1.713-1.695-2.534C26.562,25.293,27.68,23.871,27.68,22.274z' /></g></svg>");
  position: absolute; bottom: 0; right: 0; width: 32px; height: 32px; z-index: 100;
}

/* Find the section sibling to the sibling to the Tag List */
section#post-share {display: none;}

Edited for new Share section's ID

Tenebrous said:

Hide the "Share" Section

/* Find the section sibling to the sibling to the Tag List */
section#tag-list+section+section {display: none;}

I said this in the other thread, but I'll repeat it here: When the site layout changes in the future this css will break things. It should only be used as a temporary measure.

Taken from topic #10731:

article.post-preview[data-tags~=animated]:before {
  position: absolute;
  content: "►";
  background-color: white;
  color: white; 
  background-color: rgba(0,0,0,0.5); /* or a solid grey background */
  margin-left: 2px;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  border-bottom-right-radius: 5px;
}

RaisingK said:

Taken from topic #10731:

CSS to display a ► in the corner of animated posts

article.post-preview[data-tags~=animated]:before {
  position: absolute;
  content: "►";
  background-color: white;
  color: white; 
  background-color: rgba(0,0,0,0.5); /* or a solid grey background */
  margin-left: 2px;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  border-bottom-right-radius: 5px;
}

? Kinda weird to post that here when it's gonna be in the site itself in a few days.

Toks said:

? Kinda weird to post that here when it's gonna be in the site itself in a few days.

Come on, you didn't say it would be until after I said that.

RaisingK said:

Come on, you didn't say it would be until after I said that.

forum #98314 2 days ago

Toks said:

forum #98314 2 days ago

You didn't outright say it was going to be pushed to the site. You just stated the necessary CSS.

Can custom CSS be used to hide the "Save this search" button?

try this:

#saved-searches-nav {
    display: none;
}

thanks, works