Tried. Again, didn't work.
Posted under General
Hmm, it's a no-go then.
Added it to the github tracker https://github.com/r888888888/danbooru/issues/2601
https://www.w3.org/TR/css-cascade-3/#at-ruledef-import :
Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid.
Mileage may vary from browser to browser and version to version, but any import rule should technically be above all other custom CSS rules or you risk the browser detecting it as invalid. Is the import line at the very top of your custom CSS?
As a temporary fix, download Stylish for whatever browser you have (Firefox, Chrome, Safari, Opera), "write new style" for donmai.us, and dump whatever your custom CSS was into the form it gives you.
There might be a bit of starter code in the form that looks a bit like this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("donmai.us") {
}In which case, you would put it between the curly braces: { and }.
Custom webfont thru CSS is working now. Using Exo on main interface and American Typewriter (computer/iOS) or Rosario (stock Android browser) on the input boxes. Thanks!
Updated
HaxtonFale said:
I've only now noticed that if you pop out the tagging box, the font for tags is different - no longer monospaced.
evazion said:
So that's what it is. I always thought something slightly off about the popout edit box. Anyway, put this into your custom CSS in your user settings:
.ui-widget #form textarea { font-family: monospace; font-size: 1.2em; }
To complement the permissions highlighting as mentioned in forum #108909, the following adds a star mark in front of users with the super voter privilege.
/*Show super voter star mark*/
.user-super-voter::before { content:"✶"; color:red; font-size:80%; display:inline-block;}
Since the latest commit went live, you can now visually identify banned users with CSS (issue #2691). The following example strikes through the username.
/*Show banned users with strikethrough*/
.user-banned { text-decoration:line-through;}
You can use the following account to test: user #495083
Provence asked me about a custom CSS for showing large thumbnails when hovering over a post. Here it is:
/*
* Zoom thumbnails on hover. .post-preview is the thumbnail container
* on every page *except* the comments page and the mod queue.
* Those pages differ from everywhere else on the site; there
* .post-preview contains other stuff in addition to the thumbnail.
*/
#c-comments .post-preview .preview:hover,
.mod-queue-preview aside:hover,
.post-preview:hover {
transform: scale(2);
z-index: 1000;
}
/*
* Prevent the above `.post-preview:hover` rule from triggering on the
* comments page and in the mod queue.
*/
#c-comments .post-preview:hover,
#c-moderator-post-queues .post-preview:hover {
transform: none;
}
/*
* Prevent zoomed thumbnails from clipping inside certain containers
* that are normally set to `overflow: hidden;`
*/
#posts > div,
.notice,
#has-parent-relationship-preview,
#has-children-relationship-preview,
#c-moderator-post-queues .post {
overflow: visible;
}This is a minor improvement on what sarusa did a year ago in forum #105009. It fixes the clipping issue and makes it work on every thumbnail on the site.
Doing this in CSS has its limitations: the thumbnail is just upscaled, so it's blurry, and it appears immediately on mouseover, so it tends to get in your way. Doing a better job would require a userscript.
Hey guys. I've been working on a danbooru Dark Theme for the last few days and thought I'd post it here since I think it's not too bad myself. It's 'inspired' by the dotabuff websites color scheme pretty heavily since I think that website has really nice colors. Anyway, this is the first bit of CSS work I've ever really done apart from another dotabuff theme for myanimelist 3 years ago... so it's probably pretty messy and ineffcient to anyone who actually knows how to CSS properly. It also doesn't work properly if you use the website settings to set the theme instead of stylish. I don't know why. It also only works on Firefox... I'm an engineer, not a web designer :P Also it was made while using unlimted paginator and Danbooru EX. That probably matters. Reckon I fixed those problems. Tried it out in Chrome and Firefox without any extra extensions and it worked fine. Still needs Stylish though since putting it in the site custom css causes it to append !important to everything, messing with a few things.
Also big thanks to Evazion among others for their works which I used in my style.
The CSS itself: http://pastebin.com/LjMmUZDQ
Here's an album of screenshots
http://imgur.com/a/BDpc2
Updated
Grerin said:
It also doesn't work properly if you use the website settings to set the theme instead of stylish. I don't know why. It also only works on Firefox... I'm an engineer, not a web designer :P
Get rid of lines 1, 41, 169, and 368 (the @-moz lines and their closing braces); those are the firefox specific lines. You can keep the first and last lines if you're using Stylish, obviously, but it doesn't need to be redefined in the middle of the document with 41 and 169.
Gollgagh said:
Get rid of lines 1, 41, 169, and 368 (the @-moz lines and their closing braces); those are the firefox specific lines. You can keep the first and last lines if you're using Stylish, obviously, but it doesn't need to be redefined in the middle of the document with 41 and 169.
Yeah, I knew there was going to be some redundant stuff in there. I'll get around to cleaning that up as soon as I can.
evazion said:
Provence asked me about a custom CSS for showing large thumbnails when hovering over a post. Here it is:...
This is a minor improvement on what sarusa did a year ago in forum #105009. It fixes the clipping issue and makes it work on every thumbnail on the site.
Thanks! Just getting the zooming to work was so exhausting (what's there looks simple, but that's hours of trying things that should work but didn't due to CSS being CSS) that I just punted on the clipping and never went back.
Edit: Oh yeah, that's much better than mine.
This is the best forum thread.
The one minor complaint I have with this is now the non-clipped pics hide the links, like 'Uploads' and 'Favorites' on the Account page.
Tried various things with the z-order to bring the links above the pics, but no luck so far. I'll keep working on it, and it's definitely not a deal breaker (just approach the links more carefully).
Shameless plug: I added the ability to show large previews when hovering over thumbnails to my userscript, check topic #13167.
Here's another bit of CSS. This marks external links with a little icon, so you can tell if a link will take you off-site. Mainly useful on wiki pages. This is a proof-of-concept, it could probably be improved.
/* Add an icon to external links. :not(.other-name) prevents it from firing on Pixiv tags in wiki pages. */
a[href]:not(.other-name):not([href^="/"]):not([href^="#"]) {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%2306c%22%20d%3D%22M1.5%204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22%20fill%3D%22%2306f%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
padding-right: 14px;
background-repeat: no-repeat;
background-position: center right;
}
The background-image junk I stole from Wikipedia. It creates the icon but don't ask me how it works, I don't really understand it either.
EDIT: bugfix.
Updated