Перекрашиваем любые сайты на вкус, цвет и дизайн — Stylish

статьи
браузеры
интернет

Всем доброго времени суток и всяческих прочих разностей. Сегодня мы про Stylish, да. Скрасим, так сказать, предновогодние и новогодние праздники (кстати у нас начался сезон скидок, да).

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

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

Сегодня мы посмотрим, как целиком устанавливать свои "темы" дизайна на любой сайт в браузере, будь то какая-нибудь социальная сеть, поисковик, почта или "Заметки Сис.Админа" (на которых, надеемся, Вы сейчас и находитесь.

Давайте приступим.

Вводная

Ну, своими словами я уже сказал, а как разработчики описывают это так:

Стильный интернет со Stylish, пользовательским менеджером стилей.
Устанавливайте темы и скины для многих сайтов и создавайте свои.
  • Попробуйте Reddit в темном стиле, используйте минималистский Facebook, меняйте внешний вид Google, Twitter и других ваших любимых сайтов;
  • Кастомизируйте фон, цветовую схему, шрифты и даже анимацию;
  • С легкостью отключайте, включайте, редактируйте и удаляйте любую из установленных вами тем;
  • Создавайте ваши собственные пользовательские стили (темы) с помощью редактора SCC от Stylish и делитесь ими с миллионами пользователей Stylish.

Stylish предлагает темы и скины для сайтов и веб-аппликаций со всего мира, таких как:

  • Поисковые машины – Yandex, Google, Baidu, Yahoo;
  • Социальные сети - ВКонтакте, Facebook, Twitter, Reddit, Whatsapp, Instagram, WeChat;
  • Сайты для разработчиков – Stackoverflow, Github, JIRA, Thunderbird;
  • Браузеры – Chrome, Firefox, Opera, Safari.

Есть так же возможность заказать тему или создать её самому, если Вы знаете CSS. По сути ничего сложно там нет. Стоит понимать, что парни (разработчики), собирают разного рода статистику, о чем подробнее есть здесь. Впрочем, учитывая, что конфидициальности не существует.. Ну вы поняли.

В общем это такое себе расширение Stylish, подменяющее или добавляющее файлы стилей (если почти у всех сайтов) с удаленных (хотя по факту они все равно лежат у Вас в кеше на компьютере) на локальные и переписывают их в браузере на свои. Ну как-то вот так, если говорить просто и криво.

Сообщества Stylish:

      • Официальное: forum.userstyles.org
      • Red: reddit.com/r/userstyles
      • Тима: tumblr.com/tagged/userstyles
      • Гит: github.com/UserStyles

На сим давайте перейдем к использованию, но сначала посмотрим как оно выглядит.

к содержанию ↑

Как Stylish выглядит и примерно работает

Вообще чем-то всё это похоже на Personas (помните, у Firefox такой был когда-то) только для сайтов. Устанавливаем расширение в браузер, переходим в каталог тем, ищем нужную нам тему для нужно сайта, применяем и задаем настройки (если они есть) и вуаля, - всё готово.

Например вот ВКонтактик в тёмном цвете (скриншоты не кликабельны):

обзор расширения Slylish - примеры дизайна - скриншот 1

Гугл в серо-буромалиновом (в смысле в странном, так сказать):

обзор расширения Slylish - примеры дизайна - скриншот 2

Несколько очеловеченный и тёмный фейсбук, хотя мне кажется, что с ним вообще сложно сделать что-то внятное даже сторонними силами (хотя народ таки умудряется делать хорошие стили). Но, тем не менее, вполне, вполне:

обзор расширения Slylish - примеры дизайна - скриншот 3

Ну и, сильно простая, буквально на одну строчку, варианция заметок sonikelf.ru с тёмной подложкой сбоку (полосы слева и справа):

обзор расширения Slylish - примеры дизайна - скриншот 4

Красота же? Карасота. А вообще там этих красот хватает на вкус и цвет, как говорится.

Да еще и для всяческих сайтов, популярных и не очень.

к содержанию ↑

Как установить и использовать

Берем совместимый браузер, например Google Chrome (или браузер на его основе), идем на страницу с расширением и тыркаем в кнопку "Установить" и "Добавить расширение" (или Add extension в моём случае):

обзор расширения Slylish - настройка и использование - скриншот 1

обзор расширения Slylish - настройка и использование - скриншот 2

Собственно, ничего не обычного. В результате, во-первых, у Вас появляется значок расширения. Во-вторых, есть каталог тем, который открывается после установки (если не открылся, то какое-то время он жил вот по этому пути):

обзор расширения Slylish - настройка и использование - скриншот 3

обзор расширения Slylish - настройка и использование - скриншот 4

По клику на значок Stylish Вы можете включить или выключить работу расширения в текущий момент, а так же выбрать (активировать, деактивировать, настроить и тп) какую-то из тем, если Вы установили их несколько.

Дальше идем в каталог тем и ищем нужный сайт (слева есть список популярных):

обзор расширения Slylish - настройка и использование - скриншот 5

Выбираем стиль (или несколько), который нам нравится и жмём в кнопку установки. Вылезет запрос, собственно, с ним соглашаемся и радуемся жизни.

обзор расширения Slylish - настройка и использование - скриншот 6

обзор расширения Slylish - настройка и использование - скриншот 7

Перекрашиваем любые сайты на вкус, цвет и дизайн - Stylish

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

обзор расширения Slylish - настройка и использование - скриншот 8

Что таки не сложно.

к содержанию ↑

Ну и совсем немного про настройки и свои стили

По правой кнопки мышки на значке Stylish можно открыть опции, быстро отключить все стили и многое другое. В общем и целом всё на английском, но и сложного тоже особо ничего:

обзор расширения Slylish - настройка и использование - скриншот 9

В самих опциях можно делать бекапы, создавать свой стиль для любого сайта (Write new style), смотреть какие стили у Вас установлены и их версии, массово обновлять их всем и многое такое-полезное:

обзор расширения Slylish - настройка и использование - скриншот 10

обзор расширения Slylish - настройка и использование - скриншот 11

Описывать все пункты не буду, кнопки Stylish знакомы многим, кто хоть какое-то провел за компьютером, ну, а всем остальным в помощь интуитивный метод тыка или великолепный гугл переводчик.

Мы же перейдем к послесловию.

к содержанию ↑

Послесловие

Это расширение для браузера, - отличный повод обновить дизайн сайтов, который Вам уже приелся, добавить на них функционал, убрать визуальный мусор или рекламу, да и многое многое другое.

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

Как и всегда, на сим всё. Спасибо за уделенное время, внимание и что Вы с нами.
Ну и, на данный момент (написания), - поздравляем Вас с наступающими праздниками.
Как раз скоро будем Вас поздравлять. А пока все бегом за скидками ;)

сказать «спасибо»подписатьсяобучаться
Хотите знать и уметь, больше и сами?

Мы предлагаем Вам скачать бесплатные книги от автора. Компьютеры, программы, администрирование, сервера, сети и другое. Не является рекламой. Предложение от sonikelf.ru

Скачать книги
Sonikelf's Project's логотип Sonikelf's Project's логотип Космодамианская наб., 32-34 Россия, Москва (916) 174-8226
10000
6 Цепочка комментария
3 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
3 Авторы комментариев
  Подписаться  
Уведомление о
Анна

В моей версии гугл хрома всё идёт на русском. А как сохранить стиль для определённой страницы? Я открываю соцсети в режиме инкогнито. Будет ли работать расширение?

Анна

Первая

Анна

Установила несколько стилей для сайта яндекса. Но их нету в графе установленные

Анна

Сейчас на работе. Приду домой и посмотрю

Анна

У меня гугл хром 63.0.3239.108. Версия приложения открывала по вашей ссылке. А где посмотреть установленные стили?

User1234

Ой..., у мене на мониторе, бильярдные шары с неба сыплются! Х-D Спасибо за "Stylish", нуно будет посмотреть-испробовать. ;-)