Введение в настройку интерфейса Вивальди с помощью CSS

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

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

Итак, приступим прямо сейчас.

Настройка интерфейса Вивальди с помощью CSS

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

В Windows компоненты расположены в папке C: \ Users \ [Имя пользователя] \ AppData \ Local \ Vivaldi \ Application \ [Version] \ resources \ vivaldi \

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

Заметка : Я предлагаю вам скопировать папку со всеми ее файлами и подпапками в резервную копию. Это дает вам возможность восстановить его, если что-то пойдет не так.

Основной файл, который вы будете использовать в качестве ссылки, хранится в стиль / common.css . Вы можете открыть файл в любом текстовом редакторе, чтобы проверить его. Я рекомендую вам использовать редактор с подсветкой синтаксиса кода, например Блокнот ++.

Хотя вы можете редактировать этот файл напрямую, это не рекомендуется. Основная причина этого в том, что обновления Vivaldi будут поставляться с неизмененной версией common.css. Вам придется снова применять все изменения к файлу каждый раз, когда Вивальди обновляет.

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

1. Добавьте строку @import «my.css»; в начало файла common.css. Это инструкция по загрузке файла my.css.
2. Откройте файл browser.html, который вы найдете в \ resources \ vivaldi \. Добавьте строку после первой ссылки на нее таблицы стилей.

Готовим Вивальди

Хотя вы можете сразу приступить к редактированию значений, используя новый файл CSS, вам может потребоваться помощь. Вот где в игру вступают инструменты разработчика браузера. Инструменты разработчика Vivaldi по умолчанию не позволяют вам проверять CSS Chrome браузера, но вы можете включить его.

В Windows вы делаете следующее:

1. Щелкните правой кнопкой мыши значок Вивальди на панели задач, еще раз щелкните правой кнопкой мыши Вивальди в контекстном меню и выберите параметр свойств.
2. Добавьте следующие флаги в конец целевого поля. Убедитесь, что между путем и флажками есть пробел: — отладочные приложения —silent-debugger-extension-api . В моей системе это выглядит следующим образом: C: \ Users \ Martin \ AppData \ Local \ Vivaldi \ Application \ vivaldi.exe —debug-pack-apps —silent-debugger-extension-api

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

Затем вы используете эту информацию для изменения пользовательского интерфейса браузера, например, путем изменения цвета, перемещения элементов или их полного удаления из браузера.

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

Простой пример

1. Щелкните правой кнопкой мыши значок корзины в интерфейсе Vivaldi и выберите «Проверить».
2. Вивальди может не сразу привести вас в нужное место, но вы можете перемещаться по коду, чтобы найти его (Инструменты разработчика выделяют область, которую вы выбираете в пользовательском интерфейсе).
3. Со временем вы заметите, что class = «button-tabbar toggle-trash» — это то, что вы ищете.
4. Убедитесь, что линия выделена, и щелкните значок плюса в разделе «Стили», чтобы добавить новый стиль.
5. Вивальди заполняет правильную информацию, поэтому все, что вам нужно сделать, это добавить информацию о стиле.
6. Чтобы скрыть это, добавьте display: none! Important;

Изменение не является постоянным, и корзина снова появится, если вы перезапустите браузер. Чтобы сделать его постоянным, добавьте информацию о стиле в свой собственный файл CSS.

Вывод

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

Теперь ваша очередь : Вы изменили пользовательский интерфейс выбранного веб-браузера?