Topic: Any recommendation for the "Custom CSS style" ?

Posted under e621 Tools and Applications

I just saw that on the advanced settings there is a "Custom CSS Style" which would apply to the whole site.

Tho I'm too lazy to write some CSS so I would like to get some CSS style written if you guys have any to give (for testing).

Thanks in advance! ;)

html body img {
  -ms-interpolation-mode: nearest-neighbor;
}

makes pixel art scale better when zooming in.

post[deleted=true] > a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
	content: "YOU DIED";
	font-family: "Times New Roman";
}

div.avatar div[data-status="deleted"] a, article[data-flags="deleted"] a, div.profile-avatar div[data-status="deleted"] a {
    justify-content: center;
    position: relative;
    display: flex;
}

div.avatar div[data-status="deleted"] a:after, article[data-flags="deleted"] a:after, div.profile-avatar div[data-status="deleted"] a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
    content: "YOU DIED";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: "Times New Roman";
    letter-spacing: 3px;
    font-size: 1.5rem;
    text-shadow: 1px 1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000, -1px -1px 0px #000;
}

Changes the "DELETED" banner on deleted posts to say "YOU DIED".

a#re-enable-all-blacklists::before {
  content: "⚠️";
}

a#re-enable-all-blacklists {
  background: rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px 8px 4px 2px;
}

styling to make it more obvious when my blacklist is disabled.

article.comment menu li:nth-of-type(7):nth-last-of-type(3) a::before,
article.comment menu li:nth-of-type(9):nth-last-of-type(3) a::before {
  content: "⚠️";
}

article.comment menu li:nth-of-type(7):nth-last-of-type(3) a,
article.comment menu li:nth-of-type(9):nth-last-of-type(3) a {
  background: rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px 8px 4px 2px;
}

styling to make the "report" button on comments more obvious.

/* Make the custom CSS style box bigger */
#user_custom_style {min-height:400px; width:100%;}

/* Add more space on wiki pages */
#wiki-page-body {margin: 2em 0 2em 0;}

/* Fix to keep profile from breaking? */
.about-section p {word-break: break-word}

/* Move Reply/Edit and Report/Hide away from each other in forum */
.forum-post div.content-menu li:nth-child(2n):not([class]) {
    float: right; font-size:80%;
}

/* Star on favorited images */
article[data-is-favorited=true]::before, article[data-is-favorited=true]::after {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffeb3b, #ff5722);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    display: block;
    z-index: 11;
}
article[data-is-favorited=true]::after {
    background: linear-gradient(45deg, #3F51B5, #2196F3);
    z-index: 10;
    transform: scale(1.5);
}

So far, these recommendations do work pretty well! (Nice one with the "YOU DIED" CSS code for deleted posts lol)

Might take more recommendations if I receive more. And thanks to both janitors for giving some! ;)

/* Make search inputs ("Search Options") wider */
.simple_form div.input input[type="text"] {max-width: 95%; width: 26rem; padding-left: 0.2rem;}

New profile design is live, so I did a couple more CSS snippets.

div#c-users div#a-show>div {
  max-width: initial;
}

div#c-users div#a-show .posts-section .profile-sample-posts {
  justify-content: space-evenly;
}

Makes profile pages use your display's full width if needed, spaces posts out evenly.

Updated

  • 1