Добавить в корзинуПозвонить
Найти в Дзене
SOFT BLOG ▾

StyleMaster - изменяет стили на любых сайтах

Написал и разместил в репозитории браузера оперы, браузерное расширение StyleMaster. Скачать https://addons.opera.com/ru/extensions/details/stylemaster/ Работает на браузерах Яндекса и Оперы. На гугл хроме тоже работает, но нужно уметь установить, если интересно расскажу, хотя в интернете масса инструкций. Не забываем про телегу softblg. Там много интересного, хотя сейчас темп снизился сильно, времени катастрофически не хватает. О приложении StyleMaster — это простое и удобное расширение для настройки внешнего вида веб-сайтов. Оно позволяет добавлять собственные CSS-правила, которые автоматически применяются при посещении указанных сайтов. Это идеальный инструмент для тех, кто хочет персонализировать внешний вид страниц, скрыть ненужные элементы или улучшить удобство работы с веб-ресурсами. Допустим, вы хотите изменить фон и текстовый цвет на YouTube: После сохранения расширение автоматически применит эти изменения на всех страницах YouTube. Важно! Вложенность имеет большое значение
Оглавление

Написал и разместил в репозитории браузера оперы, браузерное расширение StyleMaster.

Скачать https://addons.opera.com/ru/extensions/details/stylemaster/

Работает на браузерах Яндекса и Оперы. На гугл хроме тоже работает, но нужно уметь установить, если интересно расскажу, хотя в интернете масса инструкций.

Не забываем про телегу softblg. Там много интересного, хотя сейчас темп снизился сильно, времени катастрофически не хватает.

О приложении

StyleMaster

StyleMaster — это простое и удобное расширение для настройки внешнего вида веб-сайтов. Оно позволяет добавлять собственные CSS-правила, которые автоматически применяются при посещении указанных сайтов. Это идеальный инструмент для тех, кто хочет персонализировать внешний вид страниц, скрыть ненужные элементы или улучшить удобство работы с веб-ресурсами.

Главное окно расширения, по клику на иконку
Главное окно расширения, по клику на иконку

Что умеет StyleMaster?

  • Применение CSS-правил к определённым сайтам. Укажите URL сайта и добавьте собственные стили. Например, измените цвет текста, фон страницы или спрячьте рекламу.
  • Поддержка всех страниц на указанном домене. Достаточно указать основной домен сайта, чтобы правила применялись ко всем его страницам.
  • Экспорт и импорт настроек. Сохраняйте ваши стили в файл и загружайте их на другом устройстве.
  • Автоматическое применение стилей. Все указанные правила применяются сразу при загрузке страницы.
Сохраняйте стили, делитесь с друзьями
Сохраняйте стили, делитесь с друзьями

Для кого пригодится?

  1. Дизайнеров и разработчиков. Чтобы быстро протестировать изменения дизайна прямо в браузере.
  2. Пользователей с особыми предпочтениями. Если вас не устраивает стандартный вид сайта — измените его под себя. Например, сделайте текст крупнее или удалите лишние блоки.
  3. Тех, кто заботится о комфорте чтения. Улучшите читаемость сайтов: настройте контраст, цвета или шрифты.

Как пользоваться CustomCSS?

  1. Установка стилей: Откройте настройки расширения.
    В поле URL укажите адрес сайта (например, www.youtube.com).

    В поле CSS добавьте правила. Например:
    body {
    background-color: black;
    color: white;
    }
    Нажмите
    Сохранить, и стили начнут применяться.
  2. Экспорт и импорт: Чтобы сохранить текущие настройки, нажмите кнопку Экспорт натроек, и они будут скачаны в файл css_settings.json.
    Для загрузки настроек нажмите
    Импорт настроек и выберите файл css_settings.json.
Нажмите F12 для того, чтобы открыть исходный код нужной страницы
Нажмите F12 для того, чтобы открыть исходный код нужной страницы

Где смотреть исходный код страницы?

  1. Используйте инструменты разработчика браузера (DevTools): Нажмите F12 или Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).
    Перейдите на вкладку
    Elements, где вы увидите HTML-код страницы.
    На вкладке
    Styles справа отображаются текущие CSS-правила для выбранного элемента.
  2. Редактирование в реальном времени: Выберите любой элемент на странице (щелчок правой кнопкой → Inspect).
    В разделе
    Styles добавьте или измените CSS-правила.
    После проверки изменений скопируйте свои стили и добавьте их в
    StyleMaster.

Как использовать исходный код страницы в StyleMaster?

  1. Найдите элементы, которые вы хотите изменить, в инспекторе браузера.
  2. Определите их селекторы (например, .header, #main-content, p.article).
  3. Напишите CSS-правила и сохраните их в расширении:.
    header {
    display: none; /* Убирает шапку сайта */
    }
    p {
    font-size: 18px; /* Увеличивает размер шрифта текста */
    }
  4. Перезагрузите страницу, чтобы увидеть изменения.

Пример использования

Допустим, вы хотите изменить фон и текстовый цвет на YouTube:

  • URL: www.youtube.com
  • CSS:body {
    background-color: #121212;
    color: #ffffff;
    }
    #contenteditable-textarea {
    color: #ffffff;
    }

После сохранения расширение автоматически применит эти изменения на всех страницах YouTube.

Важно! Вложенность имеет большое значение. К примеру есть блоки
<div id="1"><div id="2"></div></div>
Для блока <div id="2"></div> указаны стили css:
#2 {color: #000;}
Чтобы ваши стили добавленные в расширении для этого блока сработали, необходимо указать вложенность:
#1 #2 {color: #ССС;}

Заключение

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

-4