UI Zoom aus der Statusleiste in die Adressleiste platzieren



  • Wie die Kopfzeile sagt, hätte ich gerne die Zoom-Funktion in der Adressleiste, nicht in der Statusleiste. Diese kann man zwar mittels Tastenkombi

    Strg Umschalt S
    

    schnell ein und ausblenden, dennoch würde ich dies gerne ändern.
    Hat jemand eine Idee, weiß einen Tweak oder eine Möglichkeit der Einstellung in

    vivaldi://flags
    

    Danke im Voraus.



  • @zypper
    normalerweise lassen sich ja Elemente mit SHIFT+LMB an entsprechende Stellen ziehen. Wenn das (wie in diesem Fall) nicht geht, wirst du es nur mit einem CSS Mod hinbekommen.
    +/- auf dem Nummernpad ist keine Alternative?



  • @derDay said in UI Zoom aus der Statusleiste in die Adressleiste platzieren:

    @zypper
    +/- auf dem Nummernpad ist keine Alternative?

    Nicht wirklich.

    But: you made may day 🙂
    Somit habe ich wenigstens Screenshot und Sync in der oberen Leiste, was schon was her macht.
    Mir geht es um den Platz, beim Notenbuch habe ich nur ein 17" Screen, das ist nicht gerade üppig 😞 Daher ist bei mir die untere Leiste ausgeblendet.
    Wie du sagtest, geht es mit +-, allerdings habe ich hierbei keine Größenanzeige (wie die Seite gerade angezeigt wird; da ich meist nur auf 90% verkleinere), muss ich dann eben mit Strg 0 auf Vorgabe (100) gehen, dann mit Strg - auf meine 90% ...
    Etwas umständlich, geht aber auch. Lieber wäre mir die Größenanzeige in der Adressleiste 😉

    Trotzdem herzlichen Dank, so kann ich auch damit leben.



  • @zypper said :

    But: you made may day

    das freut mich doch. Ein weiterer Tipp: das Multiplikations x auf dem Nummerpad stellt ebenfalls auf 100% zurück, geht vllt schneller als STRG+0
    Und dass du den Standardwebseitenzoom auf 90% einstellen kannst (und bei Bedarf einfach hochschraubst), weißt du sicher auch?



  • Du kannst die Statusleiste auch oben anzeigen lassen:

    2020-10-27 18_10_50-Einstellungen.png

    https://forum.vivaldi.net/topic/38827/statusbar-on-top

    Vielleicht wär das ja für dich.



  • @derDay

    Natürlich nicht may day lol sondern my day 😉

    Derzeit bin ich am suchen, betr. Notebooktastaturen und Zeichen, die Seite hat viele Infos für Dummis
    https://www.dauweb.de/nummernblock/

    Und dass du den Standardwebseitenzoom auf 90% einstellen kannst

    Ja, habe ich auch schon ausprobiert, nicht so mein Dingen.
    Das Multiplikations x funzt ja auch nur mit Strg, ist halt gleich daneben.

    Werde das alles weiter testen.
    Bis dahin nochmals ein Danke.



  • @stardepp

    Danke für deinen Vorschlag, das hatte ich mal probiert, hat mich ganz kirre gemacht 💀
    Derzeit belasse ich das mal so wie oben beschrieben. Vllt. findet sich ja noch die Lösung, um die Größeneinstellung in der Adressleiste anzuzeigen.



  • @zypper Dafür gibt es schon eine Lösung: https://forum.vivaldi.net/topic/44724/zoom-controls-in-address-bar-with-slide-out-animation?_=1603822940647
    Ich selbst habe einen Mod verfasst, der die Statusleiste als Dropdown in der Adressleiste anzeigt, sozusagen wie eine Erweiterung: https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar

    Wie ersichtlich gibt es viele Nutzer die nach alternativen Lösungen suchen und die dann auch verwirklichen.



  • @luetage

    https://forum.vivaldi.net/topic/10549/modding-vivaldi

    Vivaldi 2,6 und höher

    • Öffne vivaldi://experimente
      Aktivieren Sie "Verwendung von CSS-Modifikationen erlauben".
      "Darstellung'" in Einstellungen öffnen
      Wählen Sie den Ordner, den Sie verwenden möchten
      Platzieren Sie Ihre CSS-Dateien darin
      Vivaldi neu starten, um die Funktionen zu sehen

    Habe ich alles getan, auch die .css in den Ordner Style kopiert (dieser Ordner existierte zuvor nicht ...), habe den neu angelegt, in Vivaldi.

    Wahrscheinlich ist mir dort irgendwo ein Fehler unterlaufen, denn der Erfolg ist nach einem Neustart nicht sichtbar 😢



  • @zypper Ja, das ist falsch. Wenn du das Experiment verwendest, ist es nicht notwendig die custom.css Datei in das Programm zu kopieren. Stattdessen sicherst du die css Datei in irgend einem beliebigen Ordner in deinem System und linkst diesen Ordner in den Einstellungen (vivaldi://settings/appearance/). Jede css Datei, die in diesem Ordner gespeichert wird, wird dann von Vivaldi nach jedem Neustart erneut eingelesen.



  • @luetage

    C:\Users\USERNAME\AppData\Roaming\Vivaldi\User Data\Style
    

    Bin nicht sicher ob der Ordnername korrekt ist (Style)? und der Pfad der richtige ist ...



  • @zypper Sichere die Datei außerhalb von Vivaldi, zum Beispiel dort wo du deine Dokumente speicherst. Die Einstellungen erlauben es dir den Pfad manuell anzusteuern, ohne Eingabe.



  • @luetage

    Die .css ist unter meinen Dokumenten gespeichert. Mit der Funktion vivaldi://settings/appearance/ kann ich einen Ordner ansteuern, aber keine Datei wie die .css



  • @zypper Wie schon oben erwähnt, liest Vivaldi alle css Dateien die in dem Zielordner gespeichert werden ein. Das Ziel ist der Ordner, nicht die Datei.



  • @luetage

    Habe ich getan, den Ordner Style eingelesen, in diesem befindet sich die .css
    Allerdings funktioniert es nicht, es wird nichts angezeigt nach dem Neustart.



  • @zypper Was heißt nichts?



  • @luetage

    Ich kann weder Symbole noch Funktionen sehen oder nutzen, die ich nicht schon vorher in der Adressleiste hatte; es ist auch nicht verändert, es sind dort keine Popup-Menues, die nicht schon vorher dort nutzbar waren.

    Was soll die .css bewirken, bzw. hätte sie verändern sollen?
    In meinem gesamten Vivaldi-Profil kann ich weder den Ordner STYLE sehen, noch die .css
    Weder im Profil noch im Ordner Default.
    Irgend etwas passt hier nicht, mit der Beschreibung.



  • @zypper Probier ein simples css snippet:

    .toolbar-mainbar {color: red !important}

    Kopier das in deine CSS Datei und nichts anderes. Das macht die Vordergrund Farbe der Elemente in der Addressleiste rot. Einfach nur so mal als Test, damit du weißt, ob die Datei lädt.



  • @luetage

    Du Schelm 🙂
    Also, das hatte funktioniert, die Symbole waren in rot, in der Adressleiste.
    Habe das nun wieder rückgängig gemacht, Neustart. Nun alles wie zuvor.

    Hier mal der Inhalt meiner .css
    Vielleicht liegt da das Problem ...

    // Status Bar Dropdown
    // https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar
    // Replaces the status bar with a button in the address bar, which loads the status bar as
    // overlay. Also introduces a button in the bar to toggle the status-info (link address)
    // and a biscuit button for showing the Vivaldi version (biscuit mode needs to be enabled for this).
    
    {
        function statusToggle() {
            const statusContainer = document.getElementById('statusContainer');
            const statusBar = document.querySelector('.toolbar-statusbar');
            if (statusContainer.style.display === 'block') {
                statusContainer.style.display = 'none';
                statusBar.classList.remove('zeig');
            }
            else {
                statusBar.classList.add('zeig');
                statusContainer.style.display = 'block';
            }
        }
    
        function statusInfoLogic() {
            const statusInfoToggle = document.getElementById('statusInfoToggle');
            const statusInfo = document.querySelector('.StatusInfo');
            if (statusInfoToggle.classList.contains('zeig')) {
                statusInfoToggle.classList.remove('zeig');
                statusInfo.removeAttribute('id');
            }
            else {
                statusInfoToggle.classList.add('zeig');
                statusInfo.id = 'zeig';
            }
        }
        
        
    
        function statusStyle() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = 'statusDropdown';
            style.innerHTML = `#browser.address-off #statusButton {display: none;}#statusToggle svg {width: 14px;height: 14px;}#statusContainer {position: absolute;z-index: 1;max-width: 100vw;right: 0;top: 34px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);}.toolbar-statusbar {display: none;border-top: none;border-bottom: 1px solid var(--colorBorder);}.toolbar-statusbar.zeig {display: flex;}.toolbar-statusbar .button-popup.button-popup-above {bottom: unset;top: 22px;}.toolbar-statusbar .button-popup.button-popup-above:before, .toolbar-statusbar .button-popup.button-popup-above:after {opacity: 0;}.biscuit-setting-version {display: none !important;}#biscuitButton button svg, #statusInfoToggle button svg {width: 14px;height: 14px;}#statusInfoToggle.zeig button svg {fill: var(--colorHighlightBg);}.StatusInfo {display: none;}#zeig.StatusInfo.StatusInfo--Visible {display: inline-block;}`;
            document.getElementsByTagName('head')[0].appendChild(style);
        }
    
        function statusMod() {
            const statusBar = document.querySelector('.toolbar-statusbar');
            const statusInfo = document.querySelector('.StatusInfo');
            statusInfo.id = 'zeig';
            if (document.querySelector('.biscuit-string')) {
                const version = document.querySelector('.biscuit-string').innerText;
                const divB = document.createElement('div');
                divB.classList.add('button-toolbar');
                divB.id = 'biscuitButton';
                divB.setAttribute('title', version + '\nClick to copy version string');
                divB.innerHTML = '<button draggable="false" tabindex="-1"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 12 24 C 17.26 24 20.18 24 22.09 22.09 C 24 20.18 24 17.29 24 12 C 24 6.71 24 3.82 22.09 1.91 C 20.18 0 17.26 0 12 0 C 6.74 0 3.82 0 1.9 1.94 C -0.02 3.88 0 6.77 0 12 C 0 17.23 0 20.21 1.9 22.12 C 3.8 24.03 6.74 24 12 24 Z  M 18.9 8.6 Q 16.11 13.42 13.34 18.24 C 13.042 18.82 12.461 19.199 11.81 19.24 C 11.088 19.323 10.388 18.954 10.05 18.31 Q 8.3 15.31 6.56 12.31 L 4.46 8.58 C 4.12 8.017 4.103 7.315 4.415 6.736 C 4.727 6.157 5.322 5.786 5.98 5.76 C 6.704 5.709 7.386 6.105 7.7 6.76 L 9.25 9.4 C 9.63 10.05 9.99 10.7 10.37 11.34 C 10.868 12.24 11.802 12.813 12.83 12.85 C 14.416 12.94 15.797 11.778 15.98 10.2 C 15.988 10.097 15.988 9.993 15.98 9.89 C 15.981 9.408 15.871 8.933 15.66 8.5 C 15.298 7.843 15.364 7.033 15.827 6.443 C 16.29 5.853 17.061 5.597 17.785 5.792 C 18.509 5.988 19.047 6.597 19.15 7.34 C 19.207 7.776 19.12 8.219 18.9 8.6 Z "></path></svg></button>';
                statusBar.insertBefore(divB, statusInfo);
                document.getElementById('biscuitButton').addEventListener('click', function() {
                    navigator.clipboard.writeText(version);
                })
            }
            const divL = document.createElement('divL');
            divL.classList.add('button-toolbar');
            divL.id = 'statusInfoToggle';
            divL.classList.add('zeig');
            divL.setAttribute('title', 'Toggle status info');
            divL.innerHTML = '<button draggable="false" tabindex="-1"><svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/></svg></button>';
            statusBar.insertBefore(divL, statusInfo);
            document.getElementById('statusInfoToggle').addEventListener('click', statusInfoLogic);
        }
    
        function statusDropdown() {
            if (!document.getElementById('statusDropdown')) {
                statusStyle();
            }
            const adr = document.querySelector('.UrlBar');
            const btn = document.createElement('div');
            btn.id = 'statusButton';
            btn.classList.add('button-toolbar');
            btn.setAttribute('title', 'Toggle status bar');
            btn.innerHTML = '<button id="statusToggle" tabindex="-1"><svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"></path></button>';
            adr.insertBefore(btn, document.querySelector('.toolbar-extensions'));
            const cont = document.createElement('div');
            cont.id = 'statusContainer';
            cont.style.display = 'none';
            adr.appendChild(cont);
            document.getElementById('statusToggle').addEventListener('click', statusToggle);
        }
    
        var appendChild = Element.prototype.appendChild;
        Element.prototype.appendChild = function () {
            if (arguments[0].tagName === 'BUTTON') {
                setTimeout(function() {
                    if (this.classList.contains('profile-popup')) {
                        const statusButton = document.getElementById('statusButton');
                        if (statusButton) {
                            document.querySelector('.UrlBar').insertBefore(this, statusButton);
                        }
                    }
                }.bind(this, arguments[0]))
            }
            if (arguments[0].tagName === 'DIV') {
                setTimeout(function() {
                    if (this.classList.contains('toolbar-statusbar')) {
                        const statusContainer = document.getElementById('statusContainer');
                        if (!statusContainer) {
                            statusDropdown();
                        }
                        if (statusContainer && !document.getElementById('statusInfoToggle')) {
                            statusContainer.appendChild(document.querySelector('.toolbar-statusbar'));
                            statusMod();
                        }
                    }
                }.bind(this, arguments[0]))
            }
            return appendChild.apply(this, arguments);
        }
    
        var removeChild = Element.prototype.removeChild;
        Element.prototype.removeChild = function () {
            if (arguments[0].tagName === 'DIV' && arguments[0].classList.contains('toolbar-statusbar')) {
                document.getElementById('statusButton').remove();
                document.getElementById('statusContainer').remove();
            }
            else {
                return removeChild.apply(this, arguments);
            }
        }
    }
    
    
    
    


  • @zypper Ja, da liegt der Wurm begraben. Mein Mod benötigt eine .js Datei, also Javascript. Das kann man noch nicht nativ in den Vivaldi Einstellungen laden. Dazu musst du den Mod in eine .js Datei kopieren, zum Beispiel custom.js und die Datei muss direkt in das Program kopiert werden, nämlich in den “Resources” Ordner. Darin befindet sich auch eine Datei, die browser.html heißt. In selbiger musst du eine Modifkation vornehmen damit deine custom.js Datei beim Browserstart geladen wird. Mein browser.html sieht so aus (meine Mod Datei heiß uimod.js), sichtbar ganz unten. Du musst die komplette Zeile einfügen und dann speichern:

    <!DOCTYPE html>
    <html>
      <head>
        <!-- Keep the styling in sync with ./window.html -->
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
        <style>
          body {
            background-color: #d2d2d2;
            background-image: url('resources/vivaldi-splash-icon.svg');
            background-size: 16%;
            background-position: center;
            background-repeat: no-repeat;
          }
          @media (prefers-color-scheme: dark) {
            body {
              background-color: #2d2d2d;
            }
          }
        </style>
      </head>
      <body>
        <div id="app" />
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
        <script src="uimod.js"></script>
      </body>
    </html>
    
    

    Oben in der Datei siehst du übrigens den Eintrag womit Vivaldi deine externe css Datei lädt ⇒ <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />. Nur so als Info.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.