Custom CSS Thread

@Zurreak: > @Flopsy said: > > CSS critique is welcome....

2020-03-19T10:28:35-04:00

@Flopsy said:

CSS critique is welcome. In particular, if you know a neater way to select the "a" tags around the "NEW" labels, then please tell me about it.

One of the site developers recommended the following:
div#c-forum-topics #a-index tr span.new {
display: none;
}

@Flopsy: Forum beautification for those who are not hard...

2020-03-19T08:30:13-04:00

Forum beautification for those who are not hard of seeing:

tr[data-is-read=false] > td.title-column {
	font-weight: bold;
}

td.title-column > a[href="/forum_topics?search%5Bis_read%5D=false"] {
	display: none;
}

CSS critique is welcome. In particular, if you know a neater way to select the "a" tags around the "NEW" labels, then please tell me about it.

Edit: Now bolds only the topic title.

@Sakil: > evazion said: > > Danbooru has a native dark...

2020-02-17T01:07:48-05:00

evazion said:

Danbooru has a native dark theme if you weren't aware. You can enable it in your account settings. Otherwise it's this:
:root {
  --target-background: grey;
}

Damn, I've had no idea about this honestly, I looked for it before but since there was nothing I was just using some random dark theme I've found on pastebin which I've modified to not look so terrible. I see that on GitHub this was added recently, it looks great too. Thanks a lot for letting me know and also thanks for adding the theme as well.

@evazion: Danbooru has a native dark theme if you weren't...

2020-02-17T00:55:25-05:00

Danbooru has a native dark theme if you weren't aware. You can enable it in your account settings. Otherwise it's this:

:root {
  --target-background: grey;
}

@Sakil: Does anyone know how to change that yellow...

2020-02-17T00:09:22-05:00

Does anyone know how to change that yellow background color (#ffffcc) when you click the date when a post was made? I use a dark theme and it really sticks out badly with it.

@rrroi: > BrokenEagle98 said: > > The following should...

2020-02-14T17:29:14-05:00

BrokenEagle98 said:

The following should work:
#c-posts #a-show #image {
    height: 100vh;
    width: auto;
}

changing the 'parameter 100' this worked perfect, thanks!
I guess I should ask for the download shortcut in another thread x)

@BrokenEagle98: > rrroi said: > > Hello guys, do you know of...

2020-02-14T14:08:00-05:00

rrroi said:

Hello guys, do you know of any CSS or script to make images fit screen by height instead width by default?

One more thing... you know if it's possible to give a keyboard shortcut to Download button?

Thx.

The following should work:

#c-posts #a-show #image {
    height: 100vh;
    width: auto;
}

@rrroi: Hello guys, do you know of any CSS or script to...

2020-02-14T13:20:19-05:00

Hello guys, do you know of any CSS or script to make images fit screen by height instead width by default?

One more thing... you know if it's possible to give a keyboard shortcut to Download button?

Thx.

@Zurreak: That works. Thank you!

2020-02-07T02:11:47-05:00

That works. Thank you!

@BrokenEagle98: > Zurreak said: > > Does anyone know how to...

2020-02-06T23:44:40-05:00

Zurreak said:

Does anyone know how to change the color of the border that appears around the post listing when in a specific viewing mode?

Just change the colors as desired.

https://www.w3schools.com/html/html_colors.asp

body {
    background-color: #fff;
}
body.mode-edit {
    background-color: #5c5;
}
body.mode-tag-script {
    background-color: #d6d;
}
body.mode-add-fav {
    background-color: #ffa;
}
body.mode-remove-fav {
    background-color: #ffa;
}
body.mode-vote-down {
    background-color: #faa;
}
body.mode-vote-up {
    background-color: #afa;
}
body.mode-lock-rating {
    background-color: #aa3;
}
body.mode-lock-note {
    background-color: #3aa;
}

@Zurreak: Does anyone know how to change the color of the...

2020-02-06T23:02:19-05:00

Does anyone know how to change the color of the border that appears around the post listing when in a specific viewing mode?

@anonbl: /* Blur instead of hiding (blacklisted) */...

2019-12-29T07:12:43-05:00

/* Blur instead of hiding (blacklisted)  */
.post.blacklisted-active, #image-container.blacklisted-active, .post-preview.blacklisted-active { display: inline-block!important; }
.post.blacklisted-active picture, #image-container.blacklisted-active picture, .post-preview.blacklisted-active picture {filter: blur(4px) brightness(0.5);}
.post.blacklisted-active, #image-container.blacklisted-active {filter: blur(8px) brightness(0.5);}
.post.blacklisted-active:hover picture, #image-container.blacklisted-active:hover picture, .post-preview.blacklisted-active:hover picture,.post.blacklisted-active:hover, #image-container.blacklisted-active:hover {filter: blur(0px) brightness(1);}
.post-preview.post-status-flagged:not(.mod-queue-preview) img, .post-preview.post-status-pending:not(.mod-queue-preview) img, .post-preview.post-status-has-parent img, .post-preview.post-status-has-children img, .post-preview.post-status-deleted img {border: none !important;}
.post-preview a {border : 2px solid transparent !important;overflow: hidden;}
.post-preview.post-status-deleted a {border-color: var(--preview-deleted-color); }
.post-preview.post-status-has-parent a {border-color: var(--preview-has-parent-color);}
.post-preview.post-status-has-children a {border-color: var(--preview-has-children-color);}
.post-preview.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-pending:not(.mod-queue-preview) a {border-color: var(--preview-pending-color);}
.post-preview.post-status-has-children.post-status-has-parent a {border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);}
.post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-has-children.post-status-pending:not(.mod-queue-preview) a { border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);}
.post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) a, .post-preview.post-status-has-parent.post-status-pending:not(.mod-queue-preview) a {border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);}
.post-preview.post-status-has-parent.post-status-deleted a {border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);}
.post-preview.post-status-has-children.post-status-deleted a {border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);}

For example, in post #3724300 Rem focus, but this post will be hidden if Emilia_(re:zero) is blacklisted. With blur, you can understand who is in focus and not miss the post.
Screenshot

@Icy_Auron: > BrokenEagle98 said: > > Based upon a...

2019-12-26T07:16:56-05:00

BrokenEagle98 said:

Based upon a conversation in topic #16501, I thought I'd share some CSS that I've been using.
//Removes the minus link "+" next to tags
.search-inc-tag {
    display: none !important;
}
//Removes the minus link "-" next to tags
.search-exl-tag {
    display: none !important;
}

Thank you very much! This worked like a charm.

@BrokenEagle98: Based upon a conversation in topic #16501, I...

2019-12-25T22:31:40-05:00

Based upon a conversation in topic #16501, I thought I'd share some CSS that I've been using.

//Removes the minus link "+" next to tags
.search-inc-tag {
    display: none !important;
}
//Removes the minus link "-" next to tags
.search-exl-tag {
    display: none !important;
}

@BrokenEagle98: issue #4194 was recently fixed, so now items in...

2019-10-17T15:30:31-04:00

issue #4194 was recently fixed, so now items in the upload menu can be hidden/sorted with a bit more stability.

The following is a hiding example pulled from forum #160379.

#c-uploads #a-new  .upload_artist_commentary_container { display: none; } /* Hide commentary section */

forum #159841 above can be used as an example for how to change the order.

@Arcana55: Is there a way to do a bulleted list in a note,...

2019-09-24T22:08:20-04:00

Is there a way to do a bulleted list in a note, using a specified character for the bullet (which is different between the first list-item and subsequent ones) and have the text aligned correctly in hanging indent form?

I was able to get a satsifactory result with this (see post #3636149):
 ※Head toward the Atmosphere Regulation Facility !Search for City 682 !Obtain map data for this area

based on formatting from post #3329440. But I don't think this works in general (i.e. might look wrong to other users with different browsers).

@BrokenEagle98: With the addition of IDs to the post options in...

2019-09-17T12:43:44-04:00

With the addition of IDs to the post options in the side menu (forum #159833), it's a lot easier and more stable to change the order of items how they appear in the menu. You can use the following as a template which demonstrates ordering the post options section.

#c-posts #a-show #post-options ul { display: flex; flex-direction: column; }
#post-option-resize-to-window  { order: 1; } 
#post-option-add-to-favorites  { order: 2; }
#post-option-remove-from-favorites  { order: 2; }
#post-option-edit { order: 3; }
#post-option-download { order: 4; }
#post-option-add-to-pool { order: 5; }
#post-option-add-note { order: 6; }
#post-option-copy-notes { order: 7; }
#post-option-add-commentary  { order:8; }
#post-option-add-fav-group { order: 9; }
#post-option-find-similar{ order: 10; }
#post-option-flag { order: 11; }
#post-option-appeal { order: 11; }

Note that all options that are available to the user must be included in the list, otherwise they get bumped to the top of the listing.

@nanami: > BrokenEagle98 said: > > Okay, looking over...

2019-07-19T20:38:05-04:00

BrokenEagle98 said:

Okay, looking over it I was able to see why the icons weren't loading on my browser. It's because the "*" block at the beginning of your CSS overrides ALL font choices, but the Overpass font doesn't have those Font Awesome glyphs encoded into it, so it reverts to the browser default which is Arial on mine, which doesn't show anything either. To fix the Font Awesome icons, I just had to specify that those class items get the Font Awesome 5 Pro font, and since a class has a higher specificity than the "*", that's the font that will be correctly used.
.far, .fas {
    font-family: "Font Awesome 5 Pro";
}
I believe I found all of the classes, but if there are any missing, then just inspect the missing icon using the dev console to find the base class.

Just applied the .far/.fas code to my custom CSS. Works now. Also fixed the Russo One problem you're mentioning. I did save my emoji codes in my phone just in case. (I'm using my phone right now.) Thanks!

@BrokenEagle98: > nanami said: > > Here's a link to my custom...

2019-07-19T18:46:12-04:00

nanami said:

Here's a link to my custom CSS, minus the emoji codes:

I hope this helps.

Okay, looking over it I was able to see why the icons weren't loading on my browser. It's because the "*" block at the beginning of your CSS overrides ALL font choices, but the Overpass font doesn't have those Font Awesome glyphs encoded into it, so it reverts to the browser default which is Arial on mine, which doesn't show anything either. To fix the Font Awesome icons, I just had to specify that those class items get the Font Awesome 5 Pro font, and since a class has a higher specificity than the "*", that's the font that will be correctly used.

.far, .fas {
    font-family: "Font Awesome 5 Pro";
}

I believe I found all of the classes, but if there are any missing, then just inspect the missing icon using the dev console to find the base class.

Also, on a side note, one of your import lines is consistently causing faulty network calls since the line isn't formatted correctly.

@import url("https://fonts.googleapis.com/css?family=Russo+One");

The above loads the following section in addition to what you want:

/* sampled usage */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/stats/Russo+One/normal/400);
  unicode-range: U+20;
}

However, that URL is bogus so it always errors out on every single page load. To get the same fonts that you want without the bogus section above, just specify the font weight at the end.

@import url("https://fonts.googleapis.com/css?family=Russo+One:400");

@nanami: > BrokenEagle98 said: > > If you want to post...

2019-07-19T16:33:09-04:00

BrokenEagle98 said:

If you want to post your custom CSS somewhere, I could take a look at it as well.

Here's a link to my custom CSS, minus the emoji codes: https://shrib.com/#_jPO9d8NMuyU12GhpnE9

I hope this helps.