Skip to content

CSS tricks

Jump to bottom Edit New page
SthephanShi edited this page Aug 29, 2019 · 24 revisions

[Read in English]

CSS трюки

Некоторые из хотелок пользователей могут быть решены при помощи CSS. Здесь указаны некоторые CSS-выражения, которые могут быть вам полезны. Чтобы их применить, откройте окно "Настройки" > вкладка "Общее" > включите опцию "Пользовательский CSS" и нажмите кнопку "Правка". После ввода ваших выражений нажмите кнопку "Сохранить", чтобы изменения применились.

Как скрыть кнопки на панели?

#ID { display: none; }

где ID =

  • "Скрытое" — de-panel-hid
  • "Видео" — 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-audio-off
  • "Каталог" — de-panel-catalog
  • "Выключение скрипта" — de-panel-enable
  • "Счетчик постов/картинок/постящих" (целиком) — de-panel-info

Пример CSS, который скроет все кнопки, кроме "Настроек":

#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; }

Если вы закрыли окно настроек и не можете их снова открыть из-за того, что скрыли кнопку #de-panel-cfg, нажмите Alt+S, чтобы открыть окно "Настройки".

Как отдельно отключить счетчики постов/картинок/постящих?

Счетчик постов:

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

Счетчик картинок:

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

Счетчик постящих:

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

Как разместить панель скрипта по центру окна браузера?

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

Также открывать по центру "Настройки", "Избранное", и т.д.:

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

Как разместить весь тред по центру страницы?

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

Как закрепить панель скрипта наверху треда над оп-постом?

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

Как отключить пометку (OP) у >>ссылок на оп-пост?

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

Как сделать квадратные скобки в >>ссылках на оп-пост? >>123456[OP]

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

Как убрать пометку (You) у >>ссылок на ваши посты?

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

Как убрать счетчик страниц "Страница 1" при бесконечной прокрутке?

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

Как отключить панель навигации слева при разворачивании треда?

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

Как убрать рамку вокруг >>ссылок при наведении?

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

Как убрать причины скрытия постов? autohide #blabla(...)

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

Как сделать квадратные скобки [123] вокруг счетчиков постов в Избранном?

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

Вместо black подставьте свой цвет, например #800000 для iichan.hk.

Firefox Quantum: как таскать webm за шапку, закрывать по крестику и ставить на паузу ЛКМ в любой области?

.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; }

Как убрать удаленные посты (помеченные как "удалено")?

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

Как вернуть старую иконку раскрытия всех картинок ("Лупа") на панели скрипта?

#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; }

Как в форме ответа убрать кнопку добавления файла по ссылке (которая синяя круглая с плюсом)?

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

Как вручную перекрасить кнопки постов?

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

где color - цвет содержимого кнопки, fill - цвет фона кнопки, и ID это...

  • "Скрыть пост" — de-btn-hide
  • "Раскрыть пост" — de-btn-unhide
  • "Скрыть пост", если пост был раскрыт пользователем — de-btn-hide-user
  • "Раскрыть пост", если пост был скрыт пользователем — de-btn-unhide-user
  • "Быстрый ответ" — de-btn-rep
  • "Развернуть тред" — de-btn-expthr
  • "Добавить тред Избранное" — de-btn-fav
  • "Добавить тред Избранное", если тред уже в Избранном — de-btn-fav-sel
  • "Поиск картинки" — de-btn-src
  • "Закрепить превью" — de-btn-stick
  • "Закрепить превью", если превью поста уже закреплено — de-btn-stick-on
  • "Индикатор сажи" — de-btn-sage

Пример. Сделать фоном всех кнопок постов украинский флаг:

.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); }

Как убрать определённые кнопки в постах?

.ID { display: none; }

ID кнопок постов смотрите выше.

Как убрать зеленые номера постов?

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

Как убрать галочки для выделения постов?

.de-reply input[type="checkbox"] { display: none; }

CSS для конкретных борд

iichan.hk и 4chan.org

Как убрать ">>" перед постами?
iichan:

.doubledash { display: none; }

4chan:

.sideArrows { display: none; }

Как сделать, чтобы код в тексте и блочный код не вылезали за посты?

code, pre { white-space: pre-wrap; }

Как сделать, чтобы блоки кода не занимали много места по ширине?

pre { max-width: 960px; overflow: auto; background: #FFF2E6; }

2ch.hk

Как сделать, чтобы длинные сообщения разворачивались полностью, без скролла?

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

Надоело скроллить вайп-посты! Как вернуть скроллы в длинных сообщениях?

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

Как сделать, чтобы новые посты подкрашивались оранжевым?

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

Если панель Dollchan мешает нажимать вкладку "Топ тредов".

.bb { bottom: 30px !important; }

dobrochan.com

Как убрать кнопки "edit" редактирования картинок?

.edit_.icon { display: none; }
Add a custom footer
Add a custom sidebar
Clone this wiki locally