BrokenEagle98 said:
...
Already tried the method, but I'm still struggling on how to apply it to my custom CSS. The font I want to use has multiple weights (9 plus respective italics) and I want to use the 500 and 800 (and their italics) ones.
Posted under General
nanami said:
Already tried the method, but I'm still struggling on how to apply it to my custom CSS. The font I want to use has multiple weights (9 plus respective italics) and I want to use the 500 and 800 (and their italics) ones.
Use the font-family name as specified at the font link, and then make sure that the font weights and italics match up.
Example:
body {
font-family: BlahBoldItalic;
font-weight: 500;
font-style: italic;
}If you're still having issues, post the font and I'll test it out.
How would I change the colour of the thumbnail borders that indicate status? I specifically want to change the colour of deleted posts because it's currently black and I use a dark background.
Edit: I found it.
.post-preview.post-status-deleted img {
border-color: red !important;
}
Updated
BrokenEagle98 said:
If you're still having issues, post the font and I'll test it out.
The font is Metropolis (a free font similar to Gotham), which is still not yet in Google Fonts. I'm trying to put the 500 and 900 weight fonts (and their respective italics), but so far, trying several syntaxes did not give me as good a result as good using fonts from Google Fonts.
nanami said:
The font is Metropolis (a free font similar to Gotham), which is still not yet in Google Fonts. I'm trying to put the 500 and 900 weight fonts (and their respective italics), but so far, trying several syntaxes did not give me as good a result as good using fonts from Google Fonts.
I tried it out for myself and it works for me. It seems like for the fonts for that site, you have to use the different font names in order to achieve the affect you want.
The reason that the deprecated rules at the bottom aren't "working" is because they overload they same settings multiple times, so the last setting that gets declared in that list is the one that wins.
However, if you are so inclined to do, you can take the deprecated rules as laid out at the import URL and add them directly to the custom CSS instead. It does require ordering the fonts by weight and setting the appropriate font weight and style for each network font.
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/152ab0324f4452c56f2622dc6262e9b6/MetropolisThin.otf') format('opentype')
;
font-weight: 100
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/a10db35c6f484989bb7bd80b5e06b075/MetropolisThinItalic.otf') format('opentype')
;
font-weight: 100
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/c5ae09393655dab636f6d2e3d222137c/MetropolisExtraLight.otf') format('opentype')
;
font-weight: 200
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/414a434d6ad4b388afa68225a7e44597/MetropolisExtraLightItalic.otf') format('opentype')
;
font-weight: 200
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/c82170e08b76657553ab939bd28e8515/MetropolisLight.otf') format('opentype')
;
font-weight: 300
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/2de2a64942ecaedbf0dc68270a8ce3b8/MetropolisLightItalic.otf') format('opentype')
;
font-weight: 300
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/f7b5e589f88206b4bd5cb1408c5362e6/MetropolisRegular.otf') format('opentype')
;
font-weight: 400
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/763b44257f3ad942e107551bff15b544/MetropolisRegularItalic.otf') format('opentype')
;
font-weight: 400
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/f4bca87fd0d19e61c27dc96299c75f8c/MetropolisMedium.otf') format('opentype')
;
font-weight: 500
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/60eace1cb8db8096bcd15731bd3a35a3/MetropolisMediumItalic.otf') format('opentype')
;
font-weight: 500
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/2556a4f74e2c523893e6928d6e300f1c/MetropolisSemiBold.otf') format('opentype')
;
font-weight: 600
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/536778d712a7064c003705580236e03f/MetropolisSemiBoldItalic.otf') format('opentype')
;
font-weight: 600
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/dea4998b081c6c1133a3b5b08ff2218c/MetropolisBold.otf') format('opentype')
;
font-weight: 700
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/15b149fc383c85f27360a5736fa6e50d/MetropolisBoldItalic.otf') format('opentype')
;
font-weight: 700
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/d7eaa8ab58ec03f16c8d08389711f553/MetropolisExtraBold.otf') format('opentype')
;
font-weight: 800
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/f1e8fdf108c2af1ebb791f40c1bd1868/MetropolisExtraBoldItalic.otf') format('opentype')
;
font-weight: 800
;
font-style: italic
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/de55ae52af85b8952e65d1b546992618/MetropolisBlack.otf') format('opentype')
;
font-weight: 900
;
font-style: normal
;
}
@font-face {
font-family: 'Metropolis'
;
src: url('https://fontlibrary.org/assets/fonts/metropolis/d0503ab3a6abf88e972c5bb91fc76da1/ef50aa42a925d3c8a52d0e6828f2c66c/MetropolisBlackItalic.otf') format('opentype')
;
font-weight: 900
;
font-style: italic
;
}After adding the above to the custom CSS, the font will work just by using the "Metropolis" name and by selecting the font weight and style. The one downside to this is that if the URLs change for the network fonts, then the rules will cease to work, which is why using the @import statement is the preferred method. Additionally if you notice, the semi-colons are on their own lines. This is to prevent Danbooru from adding !important to the end of the lines, which would screw up the font declarations.
BrokenEagle98 said:
...
Tried the fonts I want to apply using the above CSS and they now work, although I have to put the Metropolis codes after the @import lines because putting them at top would screw the fonts specified by the @import lines.
I've saved the previous "all Google fonts" custom CSS in a text file for the meantime for when I want to revert.
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.)
krankins said:
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.)
Take a look at topic #16771
g-san said:
Eiyo, hello guys,
Do you know of any CSS or script to always show images in their original file size, cuz since a few days ago it keeps showing the samples despite my setting. I'm browsing on my smartphone.
On mobile, posts now show the sample image size (850px) instead of the original image size, even if you have original images enabled in your settings.
This is intentional. If you want to see the original size, you have to be using desktop mode on your phone.
tapnek said:
Looks like the tag counter changed and my CSS code for hiding it doesn't work anymore. Does anyone have an updated version I could use?
Here are some solutions I received from a user who wishes to remain anonymous.
/* Hide the tag counter */
.tag-counter {
display: none;
}/* Hide the tag counter emoji */
.tag-counter img {
display: none;
}/* Hide the tag counter emoji and effectively hide the tag counter unless you mouseover it */
.tag-counter img {
display: none;
}
.tag-counter {
color: var(--body-background-color);
}
.tag-counter:hover {
color: revert;
}
Hi all,
Recent site update removed data-is-favorited and is_favorited from the api and as a result the css I've been using to change thumbnail opacity for favorite images no longer works.
.post-preview[data-is-favorited="true"] {
opacity: 0.5;
}
.post-preview[data-is-favorited="true"]:hover {
opacity: 1.0;
}https://github.com/danbooru/danbooru/issues/4652#issuecomment-754803065 might (?) be a fix/replacement but I'm not a css wizard so I'm not sure how to use it. Can anyone help?
I use the following code to see Danbooru in an improvised dark mode.
header,
.main {
color: #333 !important;
background-color: #1b1b1b !important;
}However, every other row in lists like the forum and saved searches is painfully bright. How would I change the colour of those rows?
Kapten-N said:
I use the following code to see Danbooru in an improvised dark mode.
header, .main { color: #333 !important; background-color: #1b1b1b !important; }However, every other row in lists like the forum and saved searches is painfully bright. How would I change the colour of those rows?
...why not just use the builtin dark theme?
wisedog said:
Hi all,
Recent site update removeddata-is-favoritedandis_favoritedfrom the api and as a result the css I've been using to change thumbnail opacity for favorite images no longer works.
I added this capability to DisplayPostInfo (topic #15926) with the setting "post favorites enabled".
Kapten-N said:
I use the following code to see Danbooru in an improvised dark mode.
I'm confused, why not just use "dark" Theme? It's under User settings >> Basic.
DeusExCalamus said:
...why not just use the builtin dark theme?
BrokenEagle98 said:
I'm confused, why not just use "dark" Theme? It's under User settings >> Basic.
When was that added?!?
The reason that I used the CSS code is that it was recommended to me when I asked about a dark mode in the past.
Oh. And I think I may have posted the wrong part of the code. I only saw part of it because the box was too small and I didn't notice that I could scroll.
Kapten-N said:
When was that added?!?
The reason that I used the CSS code is that it was recommended to me when I asked about a dark mode in the past.Oh. And I think I may have posted the wrong part of the code. I only saw part of it because the box was too small and I didn't notice that I could scroll.
At least a year ago, lmao.