Настраиваем сайты под себя

[Инквизитор]

Че-то вот, решил поделиться.

 

Есть такое полезное расширение для браузеров - Stylish. Позволяет прикрутить к любой страничке свой CSS. А это, в свою очередь позволяет сделать очень многое - как просто скрыть что-то ненужное и нескрываемое обычным адблокером, так и изменить сайт до неузнаваемости, обломав потуги дизайнера Васи Пупкина сделать какой-либо сайт совершенно блевотным.

 

 

 

Скачать для Хрома: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ru (для других браузеров тоже есть).

Почитать в википедии: https://en.wikipedia.org/wiki/Stylish (инглиш).

Сайтец: https://userstyles.org/

 

Да, можно найти и более крутые альтернативы. Зато у этого есть уйма готовых стилей для уймы сайтов - выбираешь и пользуешься...

 

 

 

 

Типичный пример - Одноклассники. Кому эта сеть нужна, тот в курсе, как бесит совершенно дебилкуватый интерфейс, обилие рекламы в ленте и, в особенности осточертевшие посты "Василиса Пупкина считает классным..." с какой-то, не имеющей к вам отношения, херней.

 

Часик неспешного копания в веб-инспекторе - и вот вам стиль для Stylish, который убирает (полностью или частично) посты "Считает классным", рекламные блоки и врезки, пару баннеров и прочую дрянь:

 

 

 

Чисто стиль:

 

.h-mod.friendship-portlet,
div#hook_Block_FourthCol div[data-bem]:first-of-type,
div#hook_Block_FourthCol > div:first-child,
div#hook_Block_ProLink,
.feed.__klass,
.feed_ava + div:not([class*="feed"]),
.feed:not([data-seen-params*="gId"]) .feed_cnt:not([data-l]),
.feed[data-seen-params*="gId\":\"0\""] .feed_cnt:not([data-l]),
[class*="promo-game-banner"]
{display:none!important;}

.user #mainContainer {
   padding-top: 10px;
}

 

Код для импорта в установленный плагин:

 

@-moz-document domain("ok.ru") {
.h-mod.friendship-portlet,
div#hook_Block_FourthCol div[data-bem]:first-of-type,
div#hook_Block_FourthCol > div:first-child,
div#hook_Block_ProLink,
.feed.__klass,
.feed_ava + div:not([class*="feed"]),
.feed:not([data-seen-params*="gId"]) .feed_cnt:not([data-l]),
.feed[data-seen-params*="gId\":\"0\""] .feed_cnt:not([data-l]),
[class*="promo-game-banner"]
{display:none!important;}

.user #mainContainer {
   padding-top: 10px;
}
}

 

 

 

продолжение следует...

[Инквизитор]

Или вот стили для любимого форума. Меняют кнопочки "New" на более адекватные и убирают из списка новых сообщений изрядно подзадолбавшую тему-трансляцию про украинскую девочку с ДЦП (можно добавить и свои нелюбимые темы тоже, подскажу):

 

 

 

#tvbusers_body, #footer_utilities, #board_footer, #forum_table .topic_preview,
/* topics to hide from "new messages" page */
tr#trow_32454 /* topic ID */
{display:none!important;}

a[href*="/page__view__getnewpost"][title="К первому непрочитанному сообщению"] {
   background: #fb6b5b;
   padding: 5px 15px;
   border-radius: 2px;
   float: right;
}

a[href*="/page__view__getnewpost"][title="К первому непрочитанному сообщению"]:after {content:"new";color:#fff;}

a[href*="/page__view__getnewpost"][title="К первому непрочитанному сообщению"] img {display:none;}

 

 

 

[Инквизитор]

Еще один наборчик стилей для нашего форума. Решает проблему с картинками в пицот мегапикселей, которые многие граждане от несознательности, лени или неумения прикрепляют на форум без изменения размера, отчего увидеть картинку целиком тупо не получается.

 

Стиль:

 

 

/* BEGIN OF image popup size restrictions */
div#lightbox {
   max-width: calc(100vw - 3rem);
   max-height: calc(100vh - 3rem);
   position: fixed;
   top: 50%!important;
   left: 50%!important;
   transform: translate(-50%,-50%);
   width: auto;
   height: auto;
}

#outerImageContainer {
   width: auto!important;
   height: auto!important;
   max-width: calc(100vw - 3rem);
   max-height: calc(100vh - 7rem);
   font-size: unset!important;
}

#imageContainer {
   padding: 0px; 
}

img#lightboxImage {
   max-width: calc(100vw - 3rem - 20px);
   max-height: calc(100vh - 7rem - 20px);
   vertical-align: top;
   margin: 10px;
}

#imageDataContainer {
   width: 100%!important;
   max-width: 100%;
}

#outerImageContainer #hoverNav a{
   max-height: 100%;
}

#imageData {padding:6px 10px 0!important;}

#nextLink:hover, #nextLink:visited:hover {background-position: right center;}
#prevLink:hover, #prevLink:visited:hover {background-position: left center;}
/* END OF image popup size restrictions */

 

 

 

Тестовые картинки разных габаритов, можете оценить разницу:

 

 

 

 

 

 

 

 

 

[Инквизитор]

Ну и для полноты счастья - стиль для починки дурацкого поведения области ввода текста в форме ответа (из-за которого курсора не видно, а текст некрасиво прижат к краю).

 

/* BEGIN: fix textarea invisible cursor and paddings */
#ipboard_body .input_rte {
   padding: 0.25rem;
   box-sizing: border-box;
}
/* END OF: fix textarea invisible cursor and paddings */

[Den3]

У меня, как простого юзера, этот Стилиш как то не прижился (сложно, вникать надо :)). Но рекламу бомблю категорически и ее нет.

[Инквизитор]

сложно, вникать надо

 

в самом плагине ничего сложного нет - установил, код вставил, сохранил. тут больше вопрос в извращениях с CSS, ну то чуть ли не основная моя деятельность =) вот, что наклепал для пользы дела, дарю.

[Den3]

тут больше вопрос в извращениях с CSS

Вот именно это и ставит в ступор))), по-этому и забросил использование.

[Инквизитор]

Вот именно это и ставит в ступор))), по-этому и забросил использование.

Дык обращайтесь =)

 

У Стайлиша на сервере полно готовых стилей для самых разных сайтов. От тем оформления до разнообразных блокеров. Тупо выбрать надо =)