Danbooru

Custom CSS Thread

Posted under General

BrokenEagle98

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

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.

Reply
BrokenEagle98

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

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)

Reply
LnH

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.

Reply
Flopsy

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.

Updated

Reply
Zurreak

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

Reply
Zurreak

skylightcrystal said:

Is anyone able to make some CSS to set the full size image as default again, without disabling the z key shortcut to toggle between full size and resized-to-window?

I don't believe that's possible with CSS. However, there is a setting for that. Under "Settings > Basic > Default image width" choose "original". This disables the toggle, though.

Edit: Here's a userscript which achieves the exact functionality you requested.

document.querySelector("a.image-view-original-link").click();

Updated

Reply
skylightcrystal

Zurreak said:

I don't believe that's possible with CSS. However, there is a setting for that. Under "Settings > Basic > Default image width" choose "original". This disables the toggle, though.

Edit: Here's a userscript which achieves the exact functionality you requested.

Default image width of "original" sets images to the width of your screen and not the actual original size of the image unless this is smaller than your screen. There used to be a way of changing your settings so you view the full size image but this was removed at the same time as the shortcut to view it after loading the page was added on 27th March (https://danbooru.donmai.us/forum_topics/9127?page=297#forum_post_164477). The userscript you posted unfortunately does nothing to change this.

I found this posted by @BrokenEagle98 on discord:
.fit-width {
max-width: unset;
height: unset;
}

But this breaks both the z shortcut and the "resize to window" button.

Updated

Reply
BrokenEagle98

For those that want the images to start out at full width upon image load while still preserving the zoom functionality, you can use the following custom CSS. It basically flips the functionality of the "fit-width" class that gets added/removed when triggering the Resize to window function.

Always

#c-posts #a-show #image:not(.fit-width) {
    max-width: 100%;
    height: auto;
}
#c-posts #a-show #image.fit-width {
    max-width: unset;
    height: unset;
}

Desktop mode only

@media screen and (min-width: 661px){
    #c-posts #a-show #image:not(.fit-width) {
        max-width: 100%;
        height: auto;
    }
    #c-posts #a-show #image.fit-width {
        max-width: unset;
        height: unset;
    }
}
Edit:
  • (2020-05-02)
    • Added a section for desktop mode only
      • This is so that it always starts out resized when on a mobile device

Updated

Reply
Zurreak

I see. I misunderstood the question because I had been unaware of the site update. Now that I've noticed it, it really seems like the sort of thing that should be optional. Zooming in on the webpage to get a closer look at the image makes it smaller and when zooming out to get the entire image to fit on screen it's a lot harder to visually estimate how many times you need to zoom out, slowing down the process. @BrokenEagle98 Would it be possible to add an entry into settings to natively disable this behavior (if this behavior is here to stay)?

Reply
skylightcrystal

BrokenEagle98 said:

For those that want the images to start out at full width upon image load while still preserving the zoom functionality, you can use the following custom CSS. It basically flips the functionality of the "fit-width" class that gets added/removed when triggering the Resize to window function.

#c-posts #a-show #image:not(.fit-width) {
    max-width: 100%;
    height: auto;
}
#c-posts #a-show #image.fit-width {
    max-width: unset;
    height: unset;
}

Thank you very much.

Reply
BrokenEagle98

Zurreak said:

I see. I misunderstood the question because I had been unaware of the site update. Now that I've noticed it, it really seems like the sort of thing that should be optional. Zooming in on the webpage to get a closer look at the image makes it smaller and when zooming out to get the entire image to fit on screen it's a lot harder to visually estimate how many times you need to zoom out, slowing down the process. @BrokenEagle98 Would it be possible to add an entry into settings to natively disable this behavior (if this behavior is here to stay)?

I'm not really understanding your question. Regardless, if you have something non-CSS related to talk about, that should probably go in a new thread to avoid spamming this thread needlessly. You can also message me directly.

Reply
kittey

nanami said:

Question: Is there any specific URL to use when importing fonts from FontLibrary? It has instructions, but I'm sort of scratching my head about that.

For your user CSS or for note formatting? You can only use a restricted set of font families in notes, see about:note fonts.

Reply
BrokenEagle98

nanami said:

Question: Is there any specific URL to use when importing fonts from FontLibrary? It has instructions, but I'm sort of scratching my head about that.

1. Pick a font from FontLibrary

Example: Space Meatball (https://fontlibrary.org/en/font/space-meatball)

2. Copy the embed link

Outlined in red.

https://cdn.discordapp.com/attachments/618878216815247372/708813032528281660/unknown.png

3. Add it to an import statement at the head of your Custom CSS
@import url('https://fontlibrary.org/face/space-meatball');
4. Get the names to use for the font

Go to the URL specified, and the names for the font are specified by the font-family attribute (outlined in red).

https://cdn.discordapp.com/attachments/618878216815247372/708813862346162237/unknown.png

5. Use it as one of your fonts
body {
    font-family: SpaceMeatballRegular;
}

Note: This is for Custom CSS only. Just like kittey said, even if you use it in a note font, it will not show up for anyone else.

Updated

Reply
1 11 12 13 14 15 16 17 18 19