Die ersten Schritte zum Ändern der Vivaldi-Browseroberfläche

Erst gestern wurde die erste Testversion von Vivaldi gezeigt , und meine Hände begannen schon zu jucken, um einige Elemente zu entfernen, die ich nicht brauchte.

Bild

Das erste, was mir nicht gefiel, war der nutzlose Home-Button, den Opera auch unter dem Namen "Home Page" (15+) hatte.

Als nächstes kommen die Schaltflächen "Return" und "Transition".

Nun, am Ende möchte ich keine zusätzliche Suchleiste auf der rechten Seite sehen.

Das erste ist ziemlich einfach. Im Ordner \ Application \ 1.0.83.38 \ resources \ vivaldi \ resources \ finden wir das Symbol des Hauses und sehen den Namen "symbol-home.png".

In den Kommentaren zum Vivaldi-Artikel wurde vorgeschlagen, dass es eine Stildatei mit dem Namen common.css gibt. Hier suchen wir nach unserer Zeile "symbol-home.png".

Die Suche gibt ein einzelnes Ergebnis zurück. Alles was wir tun müssen, ist vorher / nachher / stattdessen zu schreiben . Es stellt sich heraus: Speichern, prüfen. Jetzt ist der blöde Knopf wirklich weg. Zu den Schaltflächen "Zurück" und "Übergang": Eine schnelle Suche nach Miniaturbildern ergab die Bilder "symbol-next.png" und "symbol-rewind.png". Wir machen das gleiche Verfahren. Wir finden eine Code-Passage: Und nach "! Wichtig" fügen wir hinzu . Return-Button-Code. Vorher: Nachher: Alles funktioniert wirklich: Das Suchfeld bleibt auf der rechten Seite.

(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{background-image:url(/resources/symbol-home.png)}@media


display:nonebackground-image:url(/resources/symbol-home.png)



(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{display:none}@media




Bild






(-webkit-min-device-pixel-ratio:2){.button-addressfield.forward,.button-tabbar.forward,.button-toolbar-small.forward,.button-toolbar.forward{background-image:url(/resources/symbol-forward@2x.png)}}.button-addressfield.next,.button-tabbar.next,.button-toolbar-small.next,.button-toolbar.next{background-image:url(/resources/symbol-next.png);min-width:24px!important;max-width:24px!important}@media


;display:none





.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important}@media




.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important;display:none}@media




Bild



Die Suche nach Ressourcen ergab nur "input-search.png" und dies half mir nicht bei der Lösung des Problems, den Namen des Feldes zu finden, das ich im Code benötigte.

Dann habe ich beschlossen, etwas ungeschickt zu fahren. Mir ist aufgefallen, dass sich die Größe des Feldes beim Ändern der Fenstergröße nicht ändert, woraus ich folgerte, dass die Größe klar im Code angegeben ist. Und dann habe ich im normalen MSPaint die Feldlänge gemessen und erkannt - 175 Pixel.
Suche nach dieser Nummer und bringe mich in die richtige Zeile. Hier schreiben wir stattdessen . Wir speichern, rennen und sehen das Ergebnis, das ich verfolgt habe. Ja, das Interface ist nicht nativ, es beeinträchtigt die Leistung, aber gleichzeitig haben wir das Plus einer vollständigen Anpassbarkeit.

.searchfield{margin:4px 4px 4px 0;background:#fff;position:relative;height:26px;flex:0 1 175px;display:flex}.searchfield


display:flexdisplay:none



Bild



In diesem Artikel wollte ich nur zeigen, dass es in Vivaldi die Möglichkeit einer Feinabstimmung gibt. Aufgrund der Tatsache, dass js- und css-Dateien in offener Form vorliegen, hat der Benutzer vollen Zugriff und Kontrolle über die Benutzeroberfläche. Auf Wunsch können Sie dem Bedienfeld eigene Schaltflächen mit eigenen Symbolen und Funktionen hinzufügen. Wenn der Benutzer etwas für seinen Komfort benötigt, kann er es tun.

Ich hoffe wirklich, dass die Vivaldi-Entwickler diese Dateien in zukünftigen Versionen nicht in Containern mit der Erweiterung * .pak verstecken und ihre Prüfsummen beim Start nicht wie in Opera überprüfen, sondern diese wunderbare Gelegenheit den Benutzern überlassen.

Jetzt auch beliebt: