Расширение «Styles Tuner». Настраиваем стили сайтов под себя

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

В данной статье хочу рассказать о своем расширении для Firefox “Styles Tuner”, которое позволяет настроить цвета и шрифты любого сайта так, как это будет удобно Вам.

Для примера рассмотрим сайт rocklab.ru, на котором музыканты выкладывают свои произведения, общаются и оценивают композиции. Так уж повелось, что изначально сайт был создан темным, а шрифты на нем светлые, что соответствует его рок-направленности, но зачастую бывает неудобно для пользователей. Особенно, если проводить много времени, например, на форуме.

Ниже представлен демо-ролик работы расширения (без звука):

Итак, устанавливаем расширение с сайта addons.mozilla.org, открываем редактируемый сайт и нажимаем на иконку Иконка Styles Tuner на панели браузера.

В боковой панели Firefox появляются пять иконок.

Панель управления Styles Tuner

О назначении четырех последних поговорим позднее, а пока нажимаем на первую и переходим в режим редактирования стилей сайта.

Идея расширения в том, чтобы настроить стили сайта мог любой пользователей, даже тот, кто абсолютно не знаком с HTML и CSS. Программа проходит по всему сайту и выдает в боковой панели список элементов. Одинаковые теги с одинаковым классом показываются в панели как один блок.

Панель управления Styles Tuner

Теперь, выбираем нужный нам элемент и приступаем к редактированию. Выбирать можно, как наведя на блок в боковой панели (при этом, элемент на странице будет выделен границей), так и кликнув на элемент на самой странице (при этом в боковой панели будет выделен блок управления элементом). Для отмены выделения на самой странице, нужно еще раз кликнуть на выделенный элемент.

Поскольку, фон сайта не совсем черный, а серый, начнем редактирование с цвета шрифтов, а в последнюю очередь заменим цвет фона.

Выбираем в боковой панели элемент и перетаскивая ползунок, делаем его Color черным.

Работа с Styles Tuner

Далее, изменим цвета ссылок, например, на синие:

Работа с Styles Tuner

Так же установим цвета ссылок постраничной навигации:

Работа с Styles Tuner

Ну и заключительным шагом будет установка светлого фона страницы.

Работа с Styles Tuner

Вот так, за четыре шага мы получили более удобный и читаемый контент.

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

Работа с Styles Tuner

Теперь рассмотрим назначение оставшихся четырех кнопок в верхней части боковой панели браузера.
Кнопка «Удалить изменения для данного сайта» Работа с Styles Tuner предназначена для сброса Ваших собственных настроек сайта и возвращает его изначальный внешний вид, то есть делает сайт таким, каким его задумали создатели.

Кнопка «Удалить изменения для всех сайтов» Работа с Styles Tuner удаляет все настройки для всех сайтов.

Кнопка «Настройки» Работа с Styles Tuner позволяет настроить цветовую тему самого расширения, выбрать цвет границ, которыми будут выделяться блоки на странице, а так же имеет еще одну очень важную опцию «Время хранения изменений». Для того, чтобы не засорять память браузера, ненужные настройки, конечно, нужно удалять. Вот только вручную это делать неудобно, да и не каждый помнит, на каких сайтах он делал изменения.

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

Ну и наконец, кнопка «Выйти из режима редактирования» Работа с Styles Tuner удаляет список элементов из боковой панели и перезагружает открытую страницу сайта, но оставляет открытой боковую панель.

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

Работа с Styles Tuner

В ближайших планах: добавление возможности включения и отключения фонового изображения, а так же добавление возможности управления такими свойствами, как line-height и font-style.

http://habrahabr.ru/blogs/firefox/99481/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *