Как сделать тему stylish
Перекрашиваем любые сайты на вкус, цвет и дизайн — Stylish
Если помните, то мы кратко рассказывали о том, как сделать любой сайт в темной (или аналогичной, т.е этакой ночной) версии дизайна, но реализация там была ограниченной и не то чтобы функционалой. Причем речь идет даже не о темных версиях, а просто о других, т.е своих. А уж зная CSS Вы сможете настроить вообще почти любой сайт так, как Вам оно будет удобно.
Сегодня мы посмотрим, как целиком устанавливать свои «темы» дизайна на любой сайт в браузере, будь то какая-нибудь социальная сеть, поисковик, почта или «Заметки Сис.Админа» (на которых, надеемся, Вы сейчас и находитесь.
Вводная
Ну, своими словами я уже сказал, а как разработчики описывают это так:
Stylish предлагает темы и скины для сайтов и веб-аппликаций со всего мира, таких как:
На сим давайте перейдем к использованию, но сначала посмотрим как оно выглядит.
Как Stylish выглядит и примерно работает
Например вот ВКонтактик в тёмном цвете (скриншоты не кликабельны):
Гугл в серо-буромалиновом (в смысле в странном, так сказать):
Ну и, сильно простая, буквально на одну строчку, варианция заметок sonikelf.ru с тёмной подложкой сбоку (полосы слева и справа):
Красота же? Карасота. А вообще там этих красот хватает на вкус и цвет, как говорится.
Да еще и для всяческих сайтов, популярных и не очень.
Как установить и использовать
Берем совместимый браузер, например Google Chrome (или браузер на его основе), идем на страницу с расширением и тыркаем в кнопку » Установить» и » Добавить расширение » (или Add extension в моём случае):
Собственно, ничего не обычного. В результате, во-первых, у Вас появляется значок расширения. Во-вторых, есть каталог тем, который открывается после установки (если не открылся, то какое-то время он жил вот по этому пути):
По клику на значок Stylish Вы можете включить или выключить работу расширения в текущий момент, а так же выбрать (активировать, деактивировать, настроить и тп) какую-то из тем, если Вы установили их несколько.
Дальше идем в каталог тем и ищем нужный сайт (слева есть список популярных):
Выбираем стиль (или несколько), который нам нравится и жмём в кнопку установки. Вылезет запрос, собственно, с ним соглашаемся и радуемся жизни.
Точнее говоря, не просто радуемся, а открываем сайт для которого выбрали стиль, жмём в иконку приложения в браузере и активируем его. Так же стили можно править самому, удалять, деактивировать, смешивать или оставлять отзыв используя соответствующие кнопки:
Что таки не сложно.
Ну и совсем немного про настройки и свои стили
По правой кнопки мышки на значке Stylish можно открыть опции, быстро отключить все стили и многое другое. В общем и целом всё на английском, но и сложного тоже особо ничего:
В самих опциях можно делать бекапы, создавать свой стиль для любого сайта ( Write new style ), смотреть какие стили у Вас установлены и их версии, массово обновлять их всем и многое такое-полезное:
Описывать все пункты не буду, кнопки Stylish знакомы многим, кто хоть какое-то провел за компьютером, ну, а всем остальным в помощь интуитивный метод тыка или великолепный гугл переводчик.
Мы же перейдем к послесловию.
Послесловие
Как сделать тему stylish
igorsub
Как понять готовые? Ты сам создаёшь нужный тебе стиль.
в О пера есть такие стили:
их не нужно настраивать, они есть в программе по умолчанию. Красным выделен стиль, который ищет SAdmn. Он наверно хочет найти замену и остальным стилям.
№8 20-01-2006 23:59:41
Re: как создавать (где взять) CSS для расширения Stylish?
igorsub
Красным выделен стиль, который ищет SAdmn. Он наверно хочет найти замену и остальным стилям.
№9 21-01-2006 01:08:33
Re: как создавать (где взять) CSS для расширения Stylish?
Аналог отключения таблиц встроен в расширение Web Developer Toolbar http://chrispederick.com/work/webdeveloper/ и делается он обычно примерно так:
или если не поможет
№10 21-01-2006 14:31:35
Re: как создавать (где взять) CSS для расширения Stylish?
Ну, в общем и целом, всё, что я «недосказал», поняли почти правильно.
1.2igorsub : вот я и хотел бы линк на эти правила найти, а поиск в нете по «основы CSS» выдаёт мало полезного, плюс хотелось бы ещё узнать что означают
В общем, всем спасибо за понимание. Сам постораюсь в нете поискать чего-нибудь полезного из почитать. 
№11 21-01-2006 15:13:06
Re: как создавать (где взять) CSS для расширения Stylish?
SAdmn
CSS и всё всё всё
№12 21-01-2006 15:20:47
Re: как создавать (где взять) CSS для расширения Stylish?
SAdmn
я и сам хотел бы такое к Firefox прикрутить . Есть идея открыть ветку форума «Как превратить Firefox в Opera» для новичков которые только перешли с O pera на Firefox, там бы это пригодилось. Если получится прикрутить все те стили, напиши тут как у тебя это вышло, ладно?
№13 21-01-2006 19:21:57
Re: как создавать (где взять) CSS для расширения Stylish?
«Как превратить Firefox в Opera»
Тогда какой смысл переходить на Firefox?
SAdmn
Если хочешь, поставлю себе Stylish и покапаюсь с ним.
№14 21-01-2006 19:33:30
Re: как создавать (где взять) CSS для расширения Stylish?
«Как превратить Firefox в Opera»
Тогда какой смысл переходить на Firefox?
эта тема нужна не мне, а новичкам которые только перешли с Opera. При переходе им для начала нужна такая же функциональность как в Opera, а потом уже что-то новое, чего в опере нету.
№15 21-01-2006 19:48:55
Re: как создавать (где взять) CSS для расширения Stylish?
Да.. Чуть не забыл, расширение stylish со своей функцией не справляется:. при отключении любого стиля, у меня все загруженные табы становятся пустыми, даже без адреса.. Возможно, после переустановки уйдёт этот забавный фич.
№16 21-01-2006 23:22:22
Re: как создавать (где взять) CSS для расширения Stylish?
2. 2TLev : я пытался вставить стили из оперы, но вышеуказанное расширение говорит, что слишком много ошибок. Из этого я заключил, что формат требуемых CSS должен быть несколько другим. Потому и спросил где про это почитать можно..
то получится вполне достойная вещь.
№17 01-07-2006 15:19:08
Re: как создавать (где взять) CSS для расширения Stylish?
насчёт уже написанных стилей
http://userstyles.org/style/list
их там 541, это домашний сайт расширения.
Почему после перезагрузки страницы не применяется фильтр? это же не нормально
Отредактировано Sunrain (01-07-2006 15:21:00)
Мы мирные люди, За мир мы воююем,
Но мира не будет, Пока мы враждуем.
©
Stylish для Seamonkey
После долгого перерыва снова достаточно активно стал использовать Seamonkey (версия 2.49.4). Обнаружил, что из списка дополнений исчез Stylish. Стал прояснять вопрос, нагуглил, что аддон купили спамеры, после чего его выпилили из Firefox и Chromium, но потом его вернули назад и там, и там. Но из списка дополнений Seaonkey он пропал напрочь. Альтернативы не ищутся, онлайн-конвертер файрфоксовый Stylish конвертить отказывается.
Но мне нужны custom styles, я не хочу от них отвыкать. Перелазить ради них на мейнстримовый броузер я, ЧСХ, тоже не хочу. Да, можно шаманить с userChrome.css и userContent.css, но, насколько я понимаю, они меняют оформление вообще для всех сайтов разом, и фильтры по доменам и url туда не запихать.
Вопрос к аудитории, как помочь горю. Спасибо за внимание.
Userscript’ы и Userstyl’и для LORа
Движок лора хорош, но нет предела совершенству. Кто-то шлёт патчи в апстрим, кто-то пишет юзерскрипты, кто-то стили. Предлагаю подробнее остановиться на двух последних вариантах доработки. Давайте соберём в одной теме ссылки на все пользовательские js и css.
Прошу прикрепить тему
Чем теперь устанавливать пользовательские стили в firefox?
Stylish давно агонизировал и теперь умер полностью, не только как сайт, но и как аддон. После последнего апдейта не может найти свои собственные стили и не даёт загрузить их заново.
Кто чем пользуется на замену? Очень желательно, чтобы была возможность устанавливать глобальные стили. Есть ли какой-нибудь аддон, который может подхватить и распознать базу stylish?
Lor-Swamp
Кто ещё помнит тему Swamp (светлый Opennet-like Tango)? Их есть у меня!
Всё обработано для свежего ЛОРа, внесены дополнения (в виде цветов кнопок). Работает в теме Tango, с другими не тестировалось.
Перемещено maxcom из linux-org-ru
Еще по Firefox со Stylish
Как сделать фон вкладки, на которую навожу мышь синим?
Оформление Firefox через Stylish
http://rghost.ru/667YvSlGy
Как сделать фон панели вкладок белым и кнопки назад-вперед заменить на те, что из Australis стандартной
Нужно разместить в Мозилла-аддонах кой-чего
Последний надо чуть препарировать, чтобы он не конфликтовал со Стайлишом, т.е. не использовал общие ресурсы (это нужно для удовлетворения правил мозиллы).
Но заниматься и разбираться пока как-то лень и руки не доходят. Но ручками ставить тоже становится лень. Может кто выполнить? Пишите на почту da@dreamject.org
Shadow DOM: Скрытая угроза
Наступающий Shadow DOM позволяет создать HTML-блоки, которые будут видны на странице, но содержимое которых будет «черным ящиком», отсутствующим в дереве DOM, и у которых будут свои стили, на которые не смогут повлиять стили, заданные извне. Внимание, вопрос: не затруднит ли это использование пользовательских стилей (Stylish) и скриптов (Greasemonkey)?
firefox android black style for home page
подскажите как сделать черный стиль оформления для домашней страницы мобильного фаерфокса. stylish ее почему-то не затрагивает.
Пусть будет здесь
Вчера было скучно и я опять перекрасил лор в Stylish. Если кому-то нужно, забрать можно тут.
Для любителей выжигать глаза. 
sudopacman
Изменение включенных юзерстилей скриптом, Stylish, Firefox
Суть задачи в том, чтобы по хоткею пускался скрипт, меняющий темы на светлые/темные, все остальное (GTK+, Qt, KDE, Psi+) уже разобрал.
замена текста в письме сообщения или html страничке
как бы сабж. greasemonkey не предлагать. Нужно через stylish или другим способом.
Обзор VK Styles для Яндекс Браузера
Несмотря на то что сам Вконтакте предоставляет не так много инструментов для того, чтобы изменять вид страницы, пользователи могут подстраивать её под себя, используя расширение vk styles для яндекс браузера. С его помощью можно кардинально изменить не только фон и цвет, сменив картинку или добавив анимированные обои, но и форму блоков, а также то, как выглядят некоторые элементы. Например, можно скрыть текст, оставив только значки, закруглить блоки, добавить отображение даты и времени.
Установка
Чтобы загрузить это расширение к себе в Яндекс.Браузер, необходимо пройти по ссылке https://chrome.google.com/webstore/detail/vk-styles-themes-for-vkco/ceibjdigmfbbgcpkkdpmjokkokklodmc?hl=ru и скачать его из официального магазина Chrome. Несмотря на то что это магазин для Гугл Хрома, дополнения отсюда скачиваются и на Yandex.Browser. После скачивания иконка VK Styles будет доступна в правом верхнем углу, рядом со значком загрузки.
Интерфейс
После того как пользователь скачал расширение, он сразу же может им воспользоваться. При нажатии на значок сразу же включается стандартная тема VK Styles – тёмный интерфейс и зелёные надписи. При желании пользователь может самостоятельно настроить внешний вид Вконтакте, изменив каждый блок по своему вкусу, ведь здесь доступно большое количество разнообразных настроек. Как только пользователь дёргает какой-нибудь из ползунков, он сразу же видит результат, так что сохранять ничего не требуется. Это значительно облегчает процесс оформления страницы.
Функции
В VK Styles доступно множество разнообразных функций, включая:
Приложение предоставляет настолько широкие возможности для оформления страницы, что её можно изменить до неузнаваемости. При необходимости все изменения можно «откатить», просто выключив VK Styles, нажав на иконку в правом верхнем углу.
Изменение шрифта
Для установки шрифта необходимо нажать на соответствующий ползунок в меню расширения. После этого можно будет загрузить свой вариант, который будет потом установлен в качестве основного. Стоит выбирать осторожно, так как в некоторых шрифтах могут отсутствовать определённые буквы (например, «ё»), из-за чего некоторые слова будут отображаться некорректно.
С одним из последних обновлений в приложении появилась возможность вывести на главный экран часы с сегодняшней датой. Их также можно настраивать: изменять вид (12-часовой или 24-часовой), добавлять секунды, тень, перемещать их и так далее. Благодаря этому контролировать время использования Вконтакте намного легче.
Темы для ВК
Кроме того, в самом низу окошка дополнения можно найти кнопку «Темы для ВК». При нажатии на неё пользователь попадёт на страницу с альбомами, где он может выбрать подходящий фон для своей страницы. Удобство заключается в том, что все картинки отсортированы, благодаря чему найти подходящую становится намного легче. Установить понравившуюся картинку можно в пару кликов.
| Тема | Описание |
| Абстракция | Картинки с узорами и необычными цветами |
| Авто / мото | Современные и классические автомобили и мотоциклы на фоне красивых дорог и дикой природы |
| Аниме | Картинки с красивыми нарисованными девушками и известными аниме-персонажами |
| Животные | Настоящие и фантастические животные на фоне дикой природы |
| Цветы | Красивые цветы самых разных оттенков и |
| Кино | Картинки с персонажами и местами из известных фильмов и сериалов |
| Мультфильмы / комиксы | Картинки с персонажами мультсериалов, мультфильмов и комиксов |
Живые обои
Рядом с кнопкой «Темы для ВК» есть ссылка на страницу с живыми обоями. Она переводит пользователя на раздел с видео, которые также в пару кликов можно установить в качестве фона для своей страницы Вконтакте. Они тоже отсортированы по разделам, что многократно упрощает процесс поиска подходящей анимации или видео.
Советы
Совет №1
Желательно использовать автоматическое подстраивание остальных элементов под изменяемый, чтобы интерфейс выглядел более целостным.
Совет №2
Лучше не использовать слишком яркие цвета, особенно при длительном использовании Вконтакте, так как это может навредить зрению.
Совет №3
Это расширение можно использовать для слабовидящих, так как оно позволяет увеличить размер шрифта конкретно во Вконтакте, без использования инструмента, применяемого ко всем страницам сразу.
Ответы на основные вопросы
Каким образом можно поменять шрифт?
Есть два способа это сделать: вставить в соответствующее поле ссылку на него или ввести его название.
Как открыть меню настроек?
Чтобы открыть меню настроек, нужно нажать на кнопку с тремя ползунками в правом верхнем углу.
Можно ли сохранить сделанный дизайн?
Да, для этого нужно открыть меню приложения (три вертикальные точки)
Redesign VK Dark Theme
Инструкция по установке:
1. Установите расширение «Stylus» для своего браузера:
Google Chrome: https://vk.cc/azLcxt
Firefox: https://vk.cc/86C1Kf
Opera: https://vk.cc/azLcGd
Показать полностью.
2. Перейдите по ссылке и нажмите «Установить стиль»
Ссылка: https://vk.cc/azLcjS
=====================
Инструкция по обновлению темы:
1. Откройте менеджер стилей расширения «Stylus»
2. Найдите тему в списке стилей
3. Нажмите на иконку лупы для проверки наличия обновлений, а затем на стрелочку для его загрузки
Или же перейдите по ссылке ниже и нажмите «Переустановить стиль»
Ссылка: https://vk.cc/azLcjS
=====================
Если вы найдёте какие то баги пишите в ЛС группы
(желательно со скриншотами и ссылками на страницу).
Также вы можете оставлять свои пожелания, возможно они будут учтены в следующих версиях.
Redesign VK Dark Theme запись закреплена
NewVK-Dark-Theme v.1.1.6
=====================
ИНФОРМАЦИЯ ОБ ОБНОВЛЕНИИ:
— Тема адоптирована под обновление дизайна Вк
Показать полностью.
=====================
Инструкция по обновлению темы:
1. Откройте менеджер стилей расширения «Stylus»
2. Найдите тему в списке стилей
3. Нажмите на иконку лупы для проверки наличия обновлений, а затем на стрелочку для его загрузки
Или же перейдите по ссылке ниже и нажмите «Переустановить стиль»
Ссылка: https://vk.cc/azLcjS
=====================
Если вы найдёте какие то баги пишите в ЛС группы
(желательно со скриншотами и ссылками на страницу).
Также вы можете оставлять свои пожелания, возможно они будут учтены в следующих версиях.
Redesign VK Dark Theme запись закреплена
Redesign VK Dark Theme запись закреплена
Вконтакте на собственный день рождения решили запилить редизайн редизайна. Но, на сколько я понимаю, доступ дали не всем, как это обычно бывает при тестировании нововведений. Лично я доступа не получил, по этому пока не могу приступить к его стилизации.
Откатиться к старому дизайну можно в настройках Вк
Redesign VK Dark Theme запись закреплена
NewVK-Dark-Theme v.1.1.3
=====================
ИНФОРМАЦИЯ ОБ ОБНОВЛЕНИИ:
— Стилизован раздел Клипов
— Стилизован Магазин
Показать полностью.
— Небольшие исправления обложек
=====================
Инструкция по обновлению темы:
1. Откройте менеджер стилей расширения «Stylus»
2. Найдите тему в списке стилей
3. Нажмите на иконку лупы для проверки наличия обновлений, а затем на стрелочку для его загрузки
=====================
Если вы найдёте какие то баги пишите в ЛС группы
(желательно со скриншотами и ссылками на страницу).
Также вы можете оставлять там свои пожелания, возможно они будут учтены в следующих версиях.
Redesign VK Dark Theme запись закреплена
ATTENTION Важная информация:
В связи с отвратительной стабильностью работы userstyles.org было принято решение отказаться от обновлений стиля на этой платформе. С этого момента обновления будут заливаться в репозиторий на GitHub, установить обновление можно уже сейчас по ссылке: https://vk.cc/azLcjS
Официальное расширение «Stylish» данный метод установки не поддерживает!
После первой установке по ссылке выше обновлять стиль можно будет как раньше кликнув по соответствующей иконке в списке стилей (скриншот #2)
Redesign VK Dark Theme запись закреплена
NewVK-Dark-Theme v.1.1.1
=====================
ИНФОРМАЦИЯ ОБ ОБНОВЛЕНИИ:
— Исправлен фон всплывающих окон
— Исправлен таймлайн видео плеера
Показать полностью.
— Прочие багфиксы
=====================
Инструкция по обновлению темы:
1. Откройте опции расширения «Stylish»
2. Найдите тему в списке стилей
3. Нажмите «Проверить обновления» (Check for updates)
Или же перейдите по ссылке ниже и нажмите «Update with Stylish»
=====================
Если вы найдёте какие то баги пишите в ЛС группы
(желательно со скриншотами и ссылками на страницу).
Также вы можете оставлять там свои пожелания, возможно они будут учтены в следующих версиях.