Skip to content
SthephanShi edited this page Aug 29, 2019 · 12 revisions

[Read in Russian]

CSS tricks

Some of users' wishes can be fulfilled with CSS. Here are some CSS tricks that you may find useful.
To apply them, open "Settings" (Alt+S) > "Common", enable "User CSS" and press "Edit", paste the desired CSS and click "Save".

How to hide buttons on the panel?

#ID { display: none; }

where ID is:

  • "Hidden" — de-panel-hid
  • "Video links" — de-panel-vid
  • "Return to board" or "Go to previous page" — de-panel-goback
  • "Go to next page" — de-panel-gonext
  • "To top of page" — de-panel-goup
  • "To bottom of page" — de-panel-godown
  • "Expand all images" — de-panel-expimg
  • "Mask images" — de-panel-maskimg
  • "Preload images" — de-panel-preimg
  • "Save to disk" — de-panel-savethr
  • "Sound notification about new posts" — de-panel-audio-off
  • "Go to catalog" — de-panel-catalog
  • "Turn on/off the script" — de-panel-enable
  • "List of posts/images/posters in thread" (the whole thing) — de-panel-info

Example CSS that hides all of them except the "Settings":

#de-panel-fav, #de-panel-hid, #de-panel-refresh, #de-panel-vid, #de-panel-goback, #de-panel-gonext, #de-panel-goup, #de-panel-godown, #de-panel-expimg, #de-panel-maskimg, #de-panel-preimg, #de-panel-savethr, #de-panel-upd-on, #de-panel-upd-off, #de-panel-audio-off, #de-panel-catalog, #de-panel-info, #de-panel-enable { display: none !important; }

If you closed the settings window and can't open it again because you disabled the button #de-panel-cfg, press Alt+S to open the "Settings" window.

How to disable the counter of posts/images/posters separately?

For posts:

#de-panel-info-pcount { display: none; }
#de-panel-info-icount::before { content: none; }

For images:

#de-panel-info-icount { display: none; }
#de-panel-info-acount:not(:empty)::before { content: none; }

For posters:

#de-panel-info-acount { display: none; }

How to place the panel at the center of a browser window?

#de-panel { right: 50%; transform: translateX(50%); border-radius: 15px 15px 0px 0px; }

Also place in the center "Settings" window, "Favorites", etc:

.de-win-fixed { right: 50% !important; transform: translateX(50.5%); }

How to place the thread at the center of a browser window?

body { margin: auto; width: 1000px; }

How to lock the panel at the top of the thread above the OP?

#de-panel { position: static; float: right; }

How to remove the (OP) tag from >>links to the OP?

.de-ref-op::after { content: none; }

How to add square brackets around >>links to the OP? >>123456[OP]

.de-ref-op::after { content: " [OP]"; }
.de-ref-op.de-ref-my::after { content: " [OP](You)"; }

How to remove the (You) tag from >>links to my posts?

.de-ref-my::after { content: none; }
.de-ref-del.de-ref-my::after { content: " (Del)"; }
.de-ref-op.de-ref-my::after { content: " (OP)"; }

How to remove the page numbering "Page 1" when infinite scrolling is enabled?

.de-page-num { display: none; }

How to disable the navigation panel which shows up when a thread is expanded?

#de-thr-navpanel { display: none !important; }

How to remove the on-hover outline from >>links?

.de-link-parent { outline: none !important; }

How to remove the post filtering reason? autohide #blahblah(...)

.de-post-note { display: none; }

How to add square brackets [123] around post counters in Favorites?

.de-fav-inf-old::before { content: "["; color: black; }
.de-fav-inf-old::after { content: "]"; color: black; }

Replace black with a desired color, for example #800000 for iichan.hk.

Firefox Quantum: how to drag webm by header? How to close webm by a cross icon? How to pause webm by left-click in any area?

.de-fullimg-center-video { border-top: 20px solid #444 !important; border-radius: 10px 10px 0 0; cursor: pointer; }
.de-fullimg-center-video > .de-fullimg-video::before { right: 6px !important; top: -20px; }
.de-fullimg-video::before { content: "\2716"; color: #fff; background-color: rgba(64, 64, 64, 0.8); text-align: center; width: 20px; height: 20px; position: absolute; right: 0; font: bold 14px/18px tahoma; cursor: pointer; }
.de-fullimg-video-hack { display: none; }

How to remove deleted posts (posts marked as "deleted")?

.de-wrap-removed { display: none; }

How to restore the old "Magnifier" icon for the "Expand all images" button?

#de-panel-expimg > .de-panel-svg { display: none; }
#de-panel-expimg { background-image: url(data:image/gif;base64,R0lGODlhGQAZAIAAAPDw8P///yH5BAEAAAEALAAAAAAZABkAQAI9jI+pGwDn4GPL2Wep3rxXFEFel42mBE6kcYXqFqYnVc72jTPtS/KNr5OJOJMdq4diAXWvS065NNVwseehAAA7); background-repeat: no-repeat; background-position: center; }

How to disable the "Enter a link to the file" button in the reply form (blue round button with plus)?

.de-file-off > .de-file-utils { opacity: 0; }

How to customize post buttons' colors?

.ID { color: yellow; fill: red; }

where color is the button's color and fill is its filling color, and ID is...

  • "Hide post" — de-btn-hide
  • "Unhide post" — de-btn-unhide
  • "Hide post", (after you unhide it) — de-btn-hide-user
  • "Unhide post", (after you hide it) — de-btn-unhide-user
  • "Quick reply" — de-btn-rep
  • "Expand thread" — de-btn-expthr
  • "Add thread to Favorites" — de-btn-fav
  • "Remove thread from Favorites" — de-btn-fav-sel
  • "Image search" — de-btn-src
  • "Attach preview" — de-btn-stick
  • "Detach preview" — de-btn-stick-on
  • "Sage" — de-btn-sage

The following example changes all buttons' background to the flag of Ukraine:

.de-btn-expthr, .de-btn-fav, .de-btn-fav-sel, .de-btn-hide, .de-btn-hide-user, .de-btn-unhide, .de-btn-unhide-user, .de-btn-rep, .de-btn-sage, .de-btn-src, .de-btn-stick, .de-btn-stick-on { color: white; fill: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%20x2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230057b8%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffd700%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#gradient); }

Site-specific CSS tricks

iichan.hk and 4chan.org

How to remove the ">>" before posts in a thread?

iichan:

.doubledash { display: none; }

4chan:

.sideArrows { display: none; }

How to prevent the [code] blocks from stretching a page when being wider than a post?

code, pre { white-space: pre-wrap; }
pre { max-width: 960px; overflow: auto; background: #FFF2E6; }

2ch.hk

How to expand long posts without a scrollbar?

.post.reply .post-message { max-height: initial !important; }

Tired of scrolling wipe posts! How to add a scrollbar for long posts?

.post.reply .post-message { max-height: 600px !important; }

How to highlight new posts with an orange shadow?

.de-new-post { box-shadow: 6px 0px 2px -2px #F60, -6px 0px 2px -2px #F60 !important; }

If the Dollchan panel prevents you from clicking the "Top Threads":

.bb { bottom: 30px !important; } 

dobrochan.com

How to remove the "edit images" button?

.edit_.icon { display: none; }
Clone this wiki locally