Как сделать свой фон на панель навигации?

KimHyunJun

Безымянный.png
В общем чтобы панель вкладок и панель навигации имели единый фон или картинку

VaLik32

Полезна информация

newaitix

Немного не понятно что вы хотите. Напишу 2 варианта. В самом низу два скрина двух разных результатов.
1 Чтоб сделать панель навигации и активную вкладку таким цветом.

.toolbar.toolbar-addressbar.toolbar-mainbar.toolbar-large,
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-noflex.toolbar-large{
background: #71EBAE !important;
color:#000 !important;
}
.tab.active {
background: #71EBAE !important;
color:#000 !important;
}
.UrlBar-UrlField.url.vivaldi-addressfield.uifocusstop{
color:#000 !important;
background:#fff !important;
}

2 Чтоб сделать панель навигации и все вкладки таким цветом.

.toolbar.toolbar-addressbar.toolbar-mainbar.toolbar-large,
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-noflex.toolbar-large{
background: #71EBAE !important;
color:#000 !important;
}
.tab-position,.tab.active {
background: #71EBAE !important;
color:#000 !important;
}
.UrlBar-UrlField.url.vivaldi-addressfield.uifocusstop{
color:#000 !important;
background:#fff !important;
}

Эти строки нужно добавить в конец файла
Файл расположен по адресу
C:\Users\ИМЯ ВАШЕГО ПОЛЬЗОВАТЕЛЯ\AppData\Local\Vivaldi\Application\НОМЕР ВАШЕЙ ВЕРСИИ VIVALDI\resources\vivaldi\style\common.css
То что выделено жирным нужно заменить на свое.
Файл открывается любым редактором, к примеру блокнотом.

newaitix

Не заметил что вы написали про картинку.
Чтоб сделать свою карт нужно добавить такой код.

#main {
    background: url(https://forum.vivaldi.net/assets/uploads/files/1580031010357-безымянный.png);
}

Вместо https://forum.vivaldi.net/assets/uploads/files/1580031010357-безымянный.png вставить свою картинку
Залейте свою картинку на хостинг картинок и вставьте прямую ссылку.

newaitix

Но это будит второй слой картинки.
А если мы хотим чтоб картинка была маналитом с самого верха и на всю панель то делаем так

.toolbar.toolbar-noflex {
background: transparent;
}
.toolbar-mainbar{
background: transparent
}
#browser.win.maximized, #browser.win.fullscreen {
background: url(https://forum.vivaldi.net/assets/uploads/files/1580031010357-безымянный.png);
}

newaitix

Перед редактированием обязательно скопируйте оригинал файла в надежное место!!! Чтоб потом откатить можно было.

KimHyunJun

Спасибо за инфу, но не получается, остается прежний стиль, который настроен в браузере(
Код вставил в конце файла, пробовал ссылку с нескольких хостингов
Есть вариант чтобы картинка с компа подтягивалась?
Вот чего хочется в принципе)

newaitix

@KimHyunJun Похоже у вас уже ломанный дизайн.
Уберите фоновое изображение

И попробуйте использовать второй вариант.

newaitix

Я вот так сделал и получил нужный результат.

.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-noflex.toolbar-large,
toolbar toolbar-addressbar toolbar-mainbar toolbar-large{
background: transparent;
}

newaitix

@KimHyunJun Но делаю я это все на 2.11.1805.3 тестовой сборке.
Может релизные сборки отличаются.

AlexSM

@newaitix said in Как сделать свой фон на панель навигации?:

Эти строки нужно добавить в конец файла

а почему не используете настройку
"Свои файлы настройки UI"?

KimHyunJun

То что нужно), видимо у меня не хочет работать, на stable версии, жаль, спасибо за помощь, буду искать в чем прикол, у меня правда в program files установлен, но не думаю что в этом дело

newaitix

@AlexSM где такое?

newaitix

@KimHyunJun Ой да вообще не проблема сейчас подкину стаблу на виртуалку попробую.

newaitix

@KimHyunJun вуаля stable версии так. Путь к стилю такой же.

.toolbar-mainbar {
    background: transparent;
}

AlexSM

@newaitix
НАСТРОЙКИ - внешний вид - Свои файлы настройки UI

newaitix

@AlexSM гыде?

AlexSM

newaitix

@AlexSM нет такого на моем скрине.
Скорее всего это удалят в следующих версиях.

AlexSM

https://forum.vivaldi.net/topic/37802/css-modifications-experimental-feature
включать тут vivaldi://experiments