Custom CSS Thread

忍猫 said:

Is there a way to change the width and height of the "Edit tags" pop-up when pressing Shift+E?

Just temporarily or do you want it to pop up with a different size?

Inspired by BrokenEagle's upvote/downvote CSS, I made some that reverts the next/prev page buttons, "more" indicator (...), and search button to text.

/* Change ... and < > and search button to text */
input#tags.ui-autocomplete-input {
    margin-right: 3px;
}
a[rel~="next"][href*="posts?"]:after {
    content: ">>";
}
a[rel~="prev"][href*="posts?"]:after {
    content: "<<";
}
li.more:after {
    content: "...";
}
form[action~="/posts"] button:after {
    font-style: normal;
    content: "Go";
}
svg.svg-inline--fa.fa-search.fa-w-16, svg.svg-inline--fa.fa-chevron-left.fa-w-10, svg.svg-inline--fa.fa-chevron-right.fa-w-10, svg.svg-inline--fa.fa-ellipsis-h.fa-w-16 {
    display: none;
}

kittey said:

Just temporarily or do you want it to pop up with a different size?

I was hoping for the window to pop up in a different location or size.

/*external link symbol*/
.dtext-external-link::after {
  content: "⎆";
  margin-left: 2px;
}

Is there a way to move or remove that box with "fetch source data" and stuff that now appears between the image and the tag box? (and loads after everything else as well, potentially causing mistagging when clicking from the dropdown box)

skylightcrystal said:

Is there a way to move or remove that box with "fetch source data" and stuff that now appears between the image and the tag box? (and loads after everything else as well, potentially causing mistagging when clicking from the dropdown box)

Yeah, I don’t like how it pops up all the time now even when you don’t need it because you want to add just one tag…

Try adding this to your user CSS:

div#source-info {display:none}

skylightcrystal said:

Is there a way to move or remove that box with "fetch source data" and stuff that now appears between the image and the tag box? (and loads after everything else as well, potentially causing mistagging when clicking from the dropdown box)

#c-posts #source-info {
    display: none;
}

The above won't stop translated tags from appearing though. To do that, use the following CSS.

#c-posts #translated-related-tags-column {
    display: none;
}

Thanks (I'm fine with translated tags)

Like pointed out in forum #150579, I'm still seeing boxes instead the FontAwesome icons, so as a workaround while waiting for a reply there, I've been using emojis for the meantime. I couldn't figure out the icons (or their FA codes) for the tooltips. What are the FA names of the different symbols used in those tooltips? Thanks!

nanami said:

Like pointed out in forum #150579, I'm still seeing boxes instead the FontAwesome icons, so as a workaround while waiting for a reply there, I've been using emojis for the meantime. I couldn't figure out the icons (or their FA codes) for the tooltips. What are the FA names of the different symbols used in those tooltips? Thanks!

forum #148728

BrokenEagle98 said:

forum #148728

How about the others, particularly those in the tooltips? I'm already using those codes with modifications.

Hey guys, just need a little help with the code that I copied from a user here that he/she posted in the forum.

The code is to make Danbooru dark sitewide. It's nice, but the problem is in the pools page or similar pages that list texts, which is also the same with the forums.

This is the code:

The code, once applied, shows the listed pools as striped. Example: poolA(black background), poolB(white background), poolC(black background), so on and so forth.

I tried removing the codes that mentions "striped" and reapplied it, but doesn't seem to work. Any ideas on how solve this problem?

shiro123 said:

There is topic #9588 which I use to make the site dark. The problem, as I understand it, is that the tables now use td:nth-child in the code

The following will keep the DText internal links (links to elsewhere on Danbooru) from displaying the external link icon afterwards.

a.dtext-external-link[href^="/"]::after {
    content: "";
}

BrokenEagle98 said:

The following will keep the DText internal links (links to elsewhere on Danbooru) from displaying the external link icon afterwards.

a.dtext-external-link[href^="/"]::after {
    content: "";
}

I'd been meaning to ask about this, but I kept forgetting...

BrokenEagle98 said:

The following will keep the DText internal links (links to elsewhere on Danbooru) from displaying the external link icon afterwards.

a.dtext-external-link[href^="/"]::after {
    content: "";
}

Doesn't work/stopped working, mind fixing it?

DeusExCalamus said:

Doesn't work/stopped working, mind fixing it?

Still works for me.

DeusExCalamus said:

Doesn't work/stopped working, mind fixing it?

Unbreakable said:

Still works for me.

Sometimes your custom CSS doesn't load (for various reasons), and so you get the barebones style of the site. This has happened to me multiple times. It usually resolves it self given enough time.

As noticed in forum #151314, the ever-expanding search bar no longer seems to be in effect. So I created the following to get around that in the meantime, for those that want something similar. It basically makes the search bar stretch the entire length of the display (only in Desktop mode).

/*Screen-wide search bar*/
@media screen and (min-width: 661px){
    #c-posts #tags {
        width: 95vw;
    }
    #c-posts #a-index #posts,
    #c-posts #a-index #excerpt {
        margin-top: 2em;
    }
    #c-posts #a-show #content {
        margin-top: 4em;
    }
    #c-posts #a-show #sidebar {
        margin-top: -4em;
    }
}

I made this to hide the "Share" social links in the sidebar.

section#post-share {
    display: none;
}