Custom CSS Thread

DeusExCalamus said:

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.

Yeah, that's the first few lines of my CSS style. I still use it instead of the built in because I like the colors I chose better, but I also haven't updated it to fix issues in like two years either.

Bringing this back up to the top because people are probably gonna have shit that's broken (like me!) that needs fixed.

Here are some tweaks I am using for the show post page. I mainly browse with a tall window so I wanted to maximize the width of images. I only tested these with Microsoft Edge.

I started out by taking the sidebar tweak from the mobile CSS that moves the sidebar below the image. Next I put the contents of each section of the sidebar into columns. More columns are added as the browser window gets wider, and each section becomes shorter. I finished up by adding some gradient backgrounds to the section headers and making the Options and History links clickable along the full width of the column.

/* Make more space for images by moving the sidebar below (from mobile CSS)   */
div#c-posts div#a-show div.sidebar-container { flex-direction:column }
div#c-posts div#a-show section#content { order:1; padding-left:0 }
div#c-posts div#a-show aside#sidebar { order:2 }

/* Arrange sidebar sections into columns (reads top to bottom, left to right) */
div#c-posts div#a-show aside#sidebar ul { column-width:20em }

/* Add a background to sidebar headings to break up the sections visually     */
div#c-posts div#a-show aside#sidebar h2 { background:linear-gradient(to right,
    var(--subnav-menu-background-color), var(--body-background-color)) }

/* Make the options and history links clickable within the full column width  */
div#c-posts div#a-show section#post-options a,
div#c-posts div#a-show section#post-history a {
    display:inline-block; width:100% }

Now that the sidebar's gone, here's an ugly tweak I use to let the image element fill the entire width of the browser window.

/* Move page margins to individual page elements, except the image element    */
body.c-posts.a-show div#page { margin:0; padding:0 }
div#c-posts div#a-show div.sidebar-container > * > * {
    margin-left:30px; margin-right:30px }
div#c-posts div#a-show section.image-container{ margin-left:0; margin-right:0 }

I prefer to have sample images upscaled even if they're a bit blurry. So I changed the image element to fill the width of the window. Now there's no need to download a 20 MB PNG just to get a fullscreen preview. Also, I noticed that the top and bottom margins on the image element don't collapse with the other margins. Their size changes quite a bit too because of the way notes are implemented, so I removed them since the other elements have margins anyway.

/* Enable upscaling of sample images when using the resize to window function */
div#c-posts div#a-show #image.fit-width { width:100vw }

/* I disable image margins, which don't work as expected due to note scaling  */
div#c-posts div#a-show section.image-container{ margin-top:0; margin-bottom:0 }

Last but not least, scroll snapping is a great way to scroll to top of the image without fiddling with the scrollbar. If you have trouble getting back to the top of the page, you can hit the Home key, or W if you have keyboard shortcuts enabled.

/* Enable scroll snapping to the top of the image                             */
html { scroll-snap-type: y proximity }
div#c-posts div#a-show #image { scroll-snap-align: start }

Once again, the tag counter code has changed and my CSS code for hiding it doesn't work. Does anyone have another solution?

[data-tag-counter] { display: none; }

Thanks. Surprised to see you here.

tapnek said:

Once again, the tag counter code has changed and my CSS code for hiding it doesn't work. Does anyone have another solution?

/* Hide the tag counter and emoji */
[data-tag-counter] {
  display: none;
}

Similar to the previous solutions you posted you can use the following :

/* Hide the tag counter */
.tag-count {
  display: none;
}

/* Hide the tag counter unless you mouseover it */
.tag-count {
    color: transparent;
}
.tag-count:hover {
    color: revert;
}

The following can be combined with any of the above:

/* Hide the tag counter emoji */
[data-tag-counter] img {
  display: none;
}

Need help modifying this to hide comment under a user's set threshold
in topic #17912 Kitty gave me

 article[data-is-dimmed="true"].comment {display:none}   

which worked 2 months ago until it doesn't. Also in same thread nonamethanks have this as the base CSS to hide all comment

 #comments {display:none}  

It work for all comment so I just need to figure out how to declare dimmed comment

 #comment[data-is-dimmed="true"] {display:none}  

 #comment[data-is-dimmed="true"].comment  {display:none}  

 #article[data-is-dimmed="true"] {display:none}  

These 3 doesn't work.

@Hyoroemon said:

 #comment[data-is-dimmed="true"] {display:none}  

 #comment[data-is-dimmed="true"].comment  {display:none}  

 #article[data-is-dimmed="true"] {display:none}  

These 3 doesn't work.

Custom CSS was changed to no longer automatically be granted priority. In order to give these lines priority just add !important after the value specified, like so:

 #comment[data-is-dimmed="true"] {display:none !important }  

 #comment[data-is-dimmed="true"].comment  {display:none !important }  

 #article[data-is-dimmed="true"] {display:none !important }  

Hyoroemon said:

...

#page article[data-is-dimmed="true"].comment {display:none}

If you add the right amount of specificity to a CSS selector, using !important really shouldn't be needed (with some exceptions).

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://www.w3schools.com/css/css_specificity.asp
https://specificity.keegan.st

Zurreak said:

...

Those won't work because the #comment and #article IDs no longer exist.

Thank you BrokenEagle98, it works.

Zurreak said:
just add !important

Oh yes, Kitty said the same thing, I forgot.

Great for original size images:

/* Limit image size to fit the screen */
#image {
width: auto;
max-height: 100vh;
}

Due to issue #4950, I created some CSS rules which will allow you to do the same. Basically, it'll scale the 720px images down to 360px.

#c-posts #a-index .post-gallery-720 img {
    max-height: 360px;
}
#c-posts #a-index .post-gallery-720 .post-preview-container {
    height: 360px;
}
#c-posts #a-index .post-gallery-grid.post-gallery-720 .posts-container {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

To get 720px, you have to use the URL parameters, i.e. add &size=360 to the end of the URL to activate it.

Apologies if I have to necrobump this thread, but is it possible thru CCS or JS to fill a radio button by default at least in an upload page? Since I rate most of my posts as "Safe," I want to default to that rating and change to the others when appropriate.

MaskedAvenger said:

Apologies if I have to necrobump this thread, but is it possible thru CCS or JS to fill a radio button by default at least in an upload page? Since I rate most of my posts as "Safe," I want to default to that rating and change to the others when appropriate.

If you use a userscript manager (like Violentmonkey) you can make a script to auto-select rating:s.

// ==UserScript==
// @name        Rate s by default
// @namespace   Violentmonkey Scripts
// @match       https://*.donmai.us/uploads/*
// @grant       none
// @version     1.0
// @author      -
// @description 2/17/2022, 6:35:26 AM
// ==/UserScript==
$("#post_rating_s").click()

Talulah said:

Thanks for the code; I do have Greasemonkey. I had been thinking of a CSS thing that would do the same.

You can't do it via CSS. CSS is purely cosmetic, it can't change the state of a page.

So with the new upload page, I'm assuming all the CSS and userscripts that modified the old upload page don't work anymore?

tapnek said:

So with the new upload page, I'm assuming all the CSS and userscripts that modified the old upload page don't work anymore?

Yes, that is correct, however for a lot of mine, I have already updated them for the new uploads page. For those that aren't mine, you can use the following lines in the userscript specifier to get them to activate. You can replace/delete the // @match https://*.donmai.us/uploads/* if you want.

// @include      /^https?://\w+\.donmai\.us/uploads/\d+(\?|$)/
// @include      /^https?://\w+\.donmai\.us/uploads/\d+/assets/\d+(\?|$)/

For the CSS, you would have to replace the usage of #a-new with #a-show, and also add #c-upload-media-assets #a-show as well. I'll go through the CSS that I've posted to this thread as well as the scripts I've posted to topic #8502 and update them for the new scheme.

Usernames in both comments and forum threads are no longer bolded. I don't know if this is a temporary measure, but this is disorienting. Is there CSS to make them bolded again?