Custom CSS Thread

It kinda bugged me that the fav button is now totally squeezed to the left side below the pictures, so I made this to center it again, plus making it a bit bigger. The 2nd part is to center the pictures of every post aswell if you want. I don't know much about CSS so I just put this together with the help of some online tutorials. It seems to work fine, but if someone knows a better code for this, please feel free to correct them.

.fav-buttons .ui-button {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
}

Can anything be done with css to fix the pool link, or would that need a greasemonkey script?

DeusExCalamus said:

Can anything be done with css to fix the pool link, or would that need a greasemonkey script?

That would need a Greasemonkey script. You can use CSS to make the current pool link much more pretty, though.

Here's a greasemonkey/tampermonkey script to fix the pool link...

// ==UserScript==
// @name         FixPoolMenuLink
// @version      1.0
// @description  Replace Pools link in top nav with original link.
// @match        *://*.donmai.us/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    $("menu.main li#nav-pools a").attr('href','/pools')
})();

DeusExCalamus said:

Here's a greasemonkey/tampermonkey script to fix the pool link...

...

Userscripts should go in topic #8502. This thread is for CSS.

BrokenEagle98 said:

Userscripts should go in topic #8502. This thread is for CSS.

I forgot about that thread tbh.

Does anyone know how to hide the tag counter for when you're uploading or tagging posts?

tapnek said:

Does anyone know how to hide the tag counter for when you're uploading or tagging posts?

Add this to your custom css:

.header > .options {
  display: none
}

Anyone know the code to hide the view count of a post?

tapnek said:

Anyone know the code to hide the view count of a post?

That is put there by a userscript and not by Danbooru.

If you're using the DisplayPostInfo userscript (topic #15926), then post views can be disabled from the settings menu (My Account >> Settings >> Userscript Menus).

Oh, right. I thought I turned that option off. Thanks.

Is there a CSS that can further resize the image preview when using the Bookmarklet to upload images? Often, it feels pretty tedious to tag up front when the image has a large resolution. If the image preview was scaled down so that it is fully within view on the screen, it would make fully tagging an image from top to bottom before clicking submit much easier and less tedious.

Edit: Fredgido provided it for me, courtesy of Nonamethanks. Thank you.

inkuJerr said:

#c-uploads #a-new #image {
max-height: 100vh;
}

fredgido said:

CSS code

Although the CSS works very well, there is also a slight problem that the resolution size listed below the image preview does not show the original image size. It can be displayed if I refresh the page, but that applies only if I upload from Twitter (not possible for Pixiv or Seiga).

https://files.catbox.moe/36gbeh.PNG

inkuJerr said:

Although the CSS works very well, there is also a slight problem that the resolution size listed below the image preview does not show the original image size. It can be displayed if I refresh the page, but that applies only if I upload from Twitter (not possible for Pixiv or Seiga).

https://files.catbox.moe/36gbeh.PNG

That requires Javascript to fix. I put something up on forum #155990.

Here is mine, it's dark but not black (material design like for Android and Google) and with green links, got the colors from https://flatuicolors.com/palette/defo

body, #top, #page, menu, footer, table.search{
    background-color: #2d3436 !important;
    color: #ecf0f1;
}

.ui-menu-item{
    background-color: #636e72;
}

#nav-links, div#c-posts div.notice.notice-child{
    background-color: #34495e !important;
    border-color: black !important;
    color: white;
}

a:not(.search-tag){
    color: #2ecc71 !important;
}

a:hover{
    color: white !important;
}

li.current a{
    background-color: #7f8c8d !important;
}

table.striped tr:nth-child(even) {
    background-color: #34495e !important;
}

blockquote{
    background-color: #636e72 !important;
}

pre{
    background-color: #636e72 !important;
}

input[type="text"], textarea, select {
  background-color : #b2bec3;
    border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 2px;
}

div.list-of-forum-posts article:target{
    background-color: #7f8c8d !important;
}

Add to favgroup dialog is broken recently on my phone, so I did this:

/* make add to favgroup dialog ui usable on Firefox Beta */
div.ui-dialog:nth-child(13) { width:300px !important; }
/* pad for mobile */
div#add-to-favgroup-dialog div { font-size: 1.5em; margin: 1em; }

Johnyyyz said:

Here is mine

I quite like this! I added #artist-commentary to the #nav-links, etc. selector.

I was wondering if the admin of the site (or just someone which has access to the html and css) could add a class to the TD on the tags page? Right now the css style is inline, like so:

<td style="background: linear-gradient(to left, #DDD 0.0%, white 0.0%)">1</td>

So it's not possible to change it and the background will therefore stay white, which is very annoying when you are using a dark theme :(

Not sure how you get in contact with an admin, can you guys help?