Каждый из нас, блуждая по просторам сети, порой сталкивается с такой проблемой: информация на сайте полезная и нужная, но вот читать очень трудно. Либо шрифт слишком мелкий, либо фон темный, а текст светлый и быстро устают глаза.
В данной статье хочу рассказать о своем расширении для Firefox “Styles Tuner”, которое позволяет настроить цвета и шрифты любого сайта так, как это будет удобно Вам.
Для примера рассмотрим сайт rocklab.ru, на котором музыканты выкладывают свои произведения, общаются и оценивают композиции. Так уж повелось, что изначально сайт был создан темным, а шрифты на нем светлые, что соответствует его рок-направленности, но зачастую бывает неудобно для пользователей. Особенно, если проводить много времени, например, на форуме.
Ниже представлен демо-ролик работы расширения (без звука):
Итак, устанавливаем расширение с сайта addons.mozilla.org, открываем редактируемый сайт и нажимаем на иконку
на панели браузера.
В боковой панели Firefox появляются пять иконок.
О назначении четырех последних поговорим позднее, а пока нажимаем на первую и переходим в режим редактирования стилей сайта.
Идея расширения в том, чтобы настроить стили сайта мог любой пользователей, даже тот, кто абсолютно не знаком с HTML и CSS. Программа проходит по всему сайту и выдает в боковой панели список элементов. Одинаковые теги с одинаковым классом показываются в панели как один блок.
Теперь, выбираем нужный нам элемент и приступаем к редактированию. Выбирать можно, как наведя на блок в боковой панели (при этом, элемент на странице будет выделен границей), так и кликнув на элемент на самой странице (при этом в боковой панели будет выделен блок управления элементом). Для отмены выделения на самой странице, нужно еще раз кликнуть на выделенный элемент.
Поскольку, фон сайта не совсем черный, а серый, начнем редактирование с цвета шрифтов, а в последнюю очередь заменим цвет фона.
Выбираем в боковой панели элемент и перетаскивая ползунок, делаем его Color черным.
Далее, изменим цвета ссылок, например, на синие:
Так же установим цвета ссылок постраничной навигации:
Ну и заключительным шагом будет установка светлого фона страницы.
Вот так, за четыре шага мы получили более удобный и читаемый контент.
Аналогично можно редактировать содержимое и всех остальных элементов сайта. Помимо изменения цветов шрифта и фона можно редактировать размер шрифта и выбирать семейство. Если Вы хотите вернуть авторские настройки для какого-либо элемента, просто кликаете на ссылку «Default».
Теперь рассмотрим назначение оставшихся четырех кнопок в верхней части боковой панели браузера.
Кнопка «Удалить изменения для данного сайта»
предназначена для сброса Ваших собственных настроек сайта и возвращает его изначальный внешний вид, то есть делает сайт таким, каким его задумали создатели.
Кнопка «Удалить изменения для всех сайтов»
удаляет все настройки для всех сайтов.
Кнопка «Настройки»
позволяет настроить цветовую тему самого расширения, выбрать цвет границ, которыми будут выделяться блоки на странице, а так же имеет еще одну очень важную опцию «Время хранения изменений». Для того, чтобы не засорять память браузера, ненужные настройки, конечно, нужно удалять. Вот только вручную это делать неудобно, да и не каждый помнит, на каких сайтах он делал изменения.
Поэтому было решено дать пользователю возможность установить количество дней после последнего посещения им сайта, для которого он делал изменения, после истечения которого, эти изменения автоматически удаляются. Например, Вы перестали заходить на google, и через 10 дней все изменения для его интерфейса стерлись.
Ну и наконец, кнопка «Выйти из режима редактирования»
удаляет список элементов из боковой панели и перезагружает открытую страницу сайта, но оставляет открытой боковую панель.
В конце можно добавить, что расширение может быть использовано и по-другому. Например, Вам или Вашему заказчику срочно понадобилось внести изменения в цвета или шрифты сайта. Вы можете попробовать несколько различных вариантов для того или иного элемента, а затем, нажав кнопку CSS, получить новые стили, которые затем можно использовать в исходном коде проекта.
В ближайших планах: добавление возможности включения и отключения фонового изображения, а так же добавление возможности управления такими свойствами, как line-height и font-style.
В данной статье хочу рассказать о своем расширении для Firefox “Styles Tuner”, которое позволяет настроить цвета и шрифты любого сайта так, как это будет удобно Вам.
Для примера рассмотрим сайт rocklab.ru, на котором музыканты выкладывают свои произведения, общаются и оценивают композиции. Так уж повелось, что изначально сайт был создан темным, а шрифты на нем светлые, что соответствует его рок-направленности, но зачастую бывает неудобно для пользователей. Особенно, если проводить много времени, например, на форуме.
Ниже представлен демо-ролик работы расширения (без звука):
Итак, устанавливаем расширение с сайта addons.mozilla.org, открываем редактируемый сайт и нажимаем на иконку
на панели браузера.В боковой панели Firefox появляются пять иконок.
О назначении четырех последних поговорим позднее, а пока нажимаем на первую и переходим в режим редактирования стилей сайта.
Идея расширения в том, чтобы настроить стили сайта мог любой пользователей, даже тот, кто абсолютно не знаком с HTML и CSS. Программа проходит по всему сайту и выдает в боковой панели список элементов. Одинаковые теги с одинаковым классом показываются в панели как один блок.
Теперь, выбираем нужный нам элемент и приступаем к редактированию. Выбирать можно, как наведя на блок в боковой панели (при этом, элемент на странице будет выделен границей), так и кликнув на элемент на самой странице (при этом в боковой панели будет выделен блок управления элементом). Для отмены выделения на самой странице, нужно еще раз кликнуть на выделенный элемент.
Поскольку, фон сайта не совсем черный, а серый, начнем редактирование с цвета шрифтов, а в последнюю очередь заменим цвет фона.
Выбираем в боковой панели элемент и перетаскивая ползунок, делаем его Color черным.
Далее, изменим цвета ссылок, например, на синие:
Так же установим цвета ссылок постраничной навигации:
Ну и заключительным шагом будет установка светлого фона страницы.
Вот так, за четыре шага мы получили более удобный и читаемый контент.
Аналогично можно редактировать содержимое и всех остальных элементов сайта. Помимо изменения цветов шрифта и фона можно редактировать размер шрифта и выбирать семейство. Если Вы хотите вернуть авторские настройки для какого-либо элемента, просто кликаете на ссылку «Default».
Теперь рассмотрим назначение оставшихся четырех кнопок в верхней части боковой панели браузера.
Кнопка «Удалить изменения для данного сайта»
предназначена для сброса Ваших собственных настроек сайта и возвращает его изначальный внешний вид, то есть делает сайт таким, каким его задумали создатели.Кнопка «Удалить изменения для всех сайтов»
удаляет все настройки для всех сайтов.Кнопка «Настройки»
позволяет настроить цветовую тему самого расширения, выбрать цвет границ, которыми будут выделяться блоки на странице, а так же имеет еще одну очень важную опцию «Время хранения изменений». Для того, чтобы не засорять память браузера, ненужные настройки, конечно, нужно удалять. Вот только вручную это делать неудобно, да и не каждый помнит, на каких сайтах он делал изменения.Поэтому было решено дать пользователю возможность установить количество дней после последнего посещения им сайта, для которого он делал изменения, после истечения которого, эти изменения автоматически удаляются. Например, Вы перестали заходить на google, и через 10 дней все изменения для его интерфейса стерлись.
Ну и наконец, кнопка «Выйти из режима редактирования»
удаляет список элементов из боковой панели и перезагружает открытую страницу сайта, но оставляет открытой боковую панель.В конце можно добавить, что расширение может быть использовано и по-другому. Например, Вам или Вашему заказчику срочно понадобилось внести изменения в цвета или шрифты сайта. Вы можете попробовать несколько различных вариантов для того или иного элемента, а затем, нажав кнопку CSS, получить новые стили, которые затем можно использовать в исходном коде проекта.
В ближайших планах: добавление возможности включения и отключения фонового изображения, а так же добавление возможности управления такими свойствами, как line-height и font-style.
