Введение

Постараюсь осветить тут основные моменты которые требуются для того чтобы изменить внешний вид браузера Вивальди под себя.

Интферфейс Вивальди как веб-сайт. Его "страницей" является "browser.html" - это HTML-страница с использованием CSS и JavaScript.

Сама "веб-страница" браузера, которая находится в файле "browser.html" практически пуста. Все элементы добавляются с помощью JavaScript-файла "bundle.js" уже после запуска браузера.

Пути по которым лежат нужные нам файлы для ОС Windows: "...\Vivaldi\Application\*номер версии*\resources\vivaldi\", для MacOS: "/Applications/Vivaldi.app/Contents/Versions/$last version$/Vivaldi Framework.framework/Resources/vivaldi/".

Начинаем

Внешний вид браузера описан в файле "...\Vivaldi\Application\*номер версии*\resources\vivaldi\style\common.css". Но его не стоит редактировать так как он весьма большой и таким образом не получиться переносить внесённые вами правки в новые версии браузера. Стоит сохдать свой CSS-файл с произвольным именем, куда уже прописать все нужные вам стили (правки).

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

Вариант 1:

  1. Запустить Vivaldi и на открытом SpeedDial нажать F12
  2. Нажать на эту иконку с курсором
  3. После чего можно выделять мышкой элементы интерфейса браузера и просмотреть исходный код элемента, теперь можно на лету менять стили оформления.
  4. Нужные css правила копируем в отдельный .css файл. Например custom.css
  5. Подключаем его в "...\Vivaldi\Application\*номер версии*\resources\vivaldi\browser.html". Прописав "<link rel="stylesheet" href="custom.css"/>" после "<link rel="stylesheet" href="style/common.css" />"
  6. Перезапустить браузерр или просто нажать CTRL+N и увидить все изменения в новом запущенном окне Vivaldi

Вариант 2:

  1. Запустить Vivaldi с ключами "--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end"
  2. После чего на любом элементе можно будет нажать правой кнопкой и просмотреть исходный код элемента, теперь можно на лету менять стили оформления.
  3. Нужные css правила копируем в отдельный .css файл. Например custom.css
  4. Подключаем его в "...\Vivaldi\Application\*номер версии*\resources\vivaldi\browser.html". Прописав "<link rel="stylesheet" href="custom.css"/>" после "<link rel="stylesheet" href="style/common.css" />"
  5. Перезапустить браузер или просто нажать CTRL+N и увидить все изменения в новом запущенном окне Vivaldi

Вариант 3:

  1. Включить флаги vivaldi://flags/#debug-packed-apps и vivaldi://flags/#silent-debugger-extension-api

Вариант 4:

    обновлено 1 декабря 2021

  1. На странице vivaldi://inspect/#apps нажать "Inspect" прямо под надписью "Vivaldi".
  2. В открывшихся окне нажать на эту иконку с курсором

Внедряем изменения

добавлено 2 декабря 2021

Vivaldi 2.5 и младше версии:

Открываем "browser.html из папки "...\Vivaldi\Application\...\resources\vivaldi" (так где троеточие у вас будет какой-то номер, это версия браузера установленного у вас) и после строчки

< link rel="stylesheet" href="style/custom.css" / >

добавляем строчку

< link rel="stylesheet" href="mycss.css" / > /* вместо "mycss" можно использовать произвольное название, это название вашего файла с CSS-стилями*/

Vivaldi 2.6 и более свежии версии

  1. Открываем vivaldi://experiments
  2. Включаем "Allow for using CSS modifications"
  3. Открываем "Насатройки" > "Внешний вид
  4. Указываем папку в разделе "Свои файлы настройки UI
  5. Кдадём свой CSS-файл в эту папк
  6. Перезагружаем браузер и смотрим результа
В написание статьи использовались советы пользователей: An_dz , anephew , coleslaw , sedative29rus и Christoph142
Подсвечивание сгруппированных вкладок : Сейчас я использую стандартный скин Вивальди, серого светлого цвета. Меня в нём не устраивает то что сгруппированию вкладку не видно почти среди остальных и я захотел её выделить. Этим я сегодня и займусь и попутно сделаю туториал как я это делаю.....

FoxWMulder - Site administrator