-
Notifications
You must be signed in to change notification settings - Fork 67
CSS tricks en
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
!!NOTE: if you closed the settings window and can't open it again because you disabled the button (#de-panel-cfg) with the CSS below, press Alt+S to open the "Settings" window.
#de-panel-cfg, #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; }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; }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-main { margin-top: 0; }
#de-panel { position: static; width: auto; float: left; }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 remove the >> from the ">> [Get new posts]" button?
.de-thread-buttons::before { content: 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.
How to rotate opened images/webms by 90º?
.de-img-center { transform: rotate(90deg); }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 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); }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; }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; }How to remove the "edit images" button?
.edit_.icon { display: none; }