Die Benutzeroberfläche von Vivaldi mit Stylesheet verändern

— Posted inBrowser, Browsers, Design, Software, Stylesheet, Vivaldi — 2 min read

Nachdem man ab Vivaldi 3.1 die Menüs nach eigenen Wünschen in den Einstellungen verstellen kann, will ich hier die Möglichkeit vorstellen, wie man ganz einfach über eigene erstellte Stylesheets die Benutzeroberfläche verändern kann.

Zum Beispiel können Schrift, die Farben der Benutzeroberfläche bzw. Teile davon angepasst werden, genauso wie Lesezeichen oder die Navigation der Startseite.
Einzige Voraussetzung sind Kenntnisse über Cascading Style Sheets (CSS)[1] [2] [3].

Wie findet man die Sachen die man verändern will?

Als erstes sollte der der spezielle Debugger aktiviert werden, damit man die UI von Vivaldi untersuchen kann.

Dies geschieht über den Aufruf von chrome://flags/#debug-packed-apps und der Aktivierung (Enable) von „Debugging for packed apps“, anschließend wird Vivaldi neu gestartet.

Bei Rechtsklick irgendwo in Vivaldi erscheint ein Kontextmenü mit der Option „Untersuchen“, damit wird der Debugger gestartet. Im Debugger wird links oben auf das Pfeil-Symbol geklickt womit man das gewünschte Element untersuchen kann.

Das Ergebnis des Stylesheets wird in eine leere Textdatei unter einen beliebigen Namen mit der Endung .css abgespeichert (z.B.: Vivaldi-Style.css).

Wohin mit der Datei?

Anfangs musste man die Angaben über die common.css im Programmverzeichnis von Vivaldi schreiben, der Nachteil war, dass bei einem Update die Angaben wieder weg waren.

Eine viel bessere Möglichkeit hat sich erst später ergeben:

Zuerst wird vivaldi://experiments aufgerufen und [×] Allow for using CSS modifications aktiviert
Dann in den Vivaldi-Einstellungen → Darstellung gehen und runter zu Benutzerdefinierte Änderungen der Benutzeroberfläche.

Dort befindet sich eine Option um einen Ordner für benutzerdefinierte Vivaldi-Stylesheets auszuwählen. Wählt den Ordner aus wo sich das erstellte Stylesheet befinden soll und kopiert die *.css-Datei in diesen hinein. Anschließend startet Vivaldi neu.

Will man später einen anderen Ort für die CSS-Dateien haben, die Option für die Ordnerauswahl ist aber nicht mehr sichtbar (geschieht spätestens nach dem ersten Vivaldi-Neustart), muss wegen eines Bugs Allow for using CSS modifications deaktiviert, wieder aktiviert und dann die Einstellungsseite erneut geöffnet werden.

Ein Beispiel für ein solches Stylesheet:

/* Schmälere Navigation auf der Startseite */
.startpage .startpage-navigation {min-height: auto !important;}

/* Hover-Effekt bei der Navigation auf der Startseite */
.startpage nav .startpage-navigation-group button.active:hover {border-color: var(--colorHighlightBg) !important;}
.startpage nav .startpage-navigation-group button:hover {border-color: #f00 !important;}

Comment