1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Mira_Belle

Beiträge von Mira_Belle

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 22. Oktober 2022 um 23:16
    Zitat von Horstmann

    Welches Script benutzt Du denn dafür ?

    Ich habe dieses hier im alltäglichen Gebrauch, für die normale horizontale Lesezeichenleiste .

    Jup, genau dieses!

    Kann mir jemand etwas einfügen, damit die Leiste per default ausgeblendet ist?

    Oder geht das nicht?

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 22. Oktober 2022 um 15:34

    Ich bin mal auf Dein Endresultat gespannt.

    Nutzen werde ich sie dann wahrscheinlich nicht, da 27' und ich z.Z. die Lesezeichenleiste per Script ausblende.

    Aber wer weis, aus probieren würde ich Dein Ergebnis ja doch schon mal.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 21. Oktober 2022 um 14:07
    Zitat von 2002Andreas

    Zitat von Mira_Belle

    frei konfigurierbare Seitenleiste,

    Nein, sondern wie er geschrieben hat:

    Zitat von Horstmann

    positioniert die Lesezeichenleiste als vertikale Liste an die Seite

    Ok, Du hast recht!

    Das Script reicht es halt nur mit weiteren Funktionen an, z.B. "hovern".

    Nachtrag.

    Aber, es wäre ja möglich, das Script den Wünschen von Horstmann anzupassen.

    Und das "hovern" lässt sich ja ab und anschalten.

    Angepasst wäre es ja eine zusätzliche Seitenleiste

    und die Firefox interne Sidebar lässt sich dennoch nutzen, wenn man den will.

    Zitat von Horstmann

    Genau das; eingeblendet reduziert die (zusätzliche) Seitenleiste das Browserfenster, ausgeblendet wächst das Browserfenster wieder zu voller Breite ; ansonsten wäre diese Seitenleiste idealerweise wie eine zusätliche toolbar, nur eben vertikal .

    ...

    Hoffe, Du bekommst das hin.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 21. Oktober 2022 um 11:45

    Nun bin ich aber etwas verwirrt!

    So wie ich es verstanden habe, kopiert das Script quasi die Lesezeichen-Symbolleiste.

    Im geöffneten Zustand habe ich dann per Drag and Drop einfach aus der Adressleiste hinzugefügt.

    Aber nun verstehe ich gar nichts mehr!

    Will Horstmann einfach nur eine zusätzliche, frei konfigurierbare Seitenleiste,

    die den Fensterinhalt staucht, oder bei Einblendung überlagert?

    Fragen über Fragen. :/

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 21. Oktober 2022 um 00:20

    Also im obigen Bild hast Du die Lesezeichen-Symbolleiste eingeschaltet!

    Dies scheint transparent zu sein!

    Das Script übernimmt solche "Einstellungen"!

    Deshalb schrieb ich, jungfräulichen Profil, ohne irgend anderem Code, sei es Javascript oder auch CSS!


    PS: Moin. Was einem im Schlaf alles so einfällt!

    Das Theme könnte ja, und hat es ganz bestimmt, Einfluss auf das Erscheinungsbild der Seitenleiste haben.

    Aber auch das kann'ste per CSS im Script beeinflussen!

    Eben genau an den von mir genannten Stellen.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 20. Oktober 2022 um 22:08
    Zitat von Horstmann

    ...

    Nimm doch bitte noch einmal das originale expandsidebar.uc.js Script,

    ohne irgendwelche Veränderungen.

    Teste es bitte in einem jungfräulichen Profil, natürlich vorbereitet, damit es auch CSS und Javescript verarbeiten kann.

    Und berichte, bitte.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 20. Oktober 2022 um 17:09
    Zitat von Endor

    Hallo zusammen.
    expandsidebar.uc.js funktioniert hier gut.

    Wenn Ihr lust habe es gäbe da noch eine Alternative vom selben Autor
    und etwas aktueller:

    SidebarModoki.uc.js

    Dieser CSS Code muss dazu verwendet werden, bzw. über userchrome.css geladen werden:

    SidebarModoki.uc.js.css

    Verwende ich hier nicht.
    Vielleicht passt das ja auch.
    Mfg.
    Endor

    Alles anzeigen

    Danke Endor.

    Aber dieses Javascript ist mir einfach zu heavy!

    Da steige ich so gar nicht durch.

    Ich hatte da mal mit was gebastelt, aber ich bin mir sicher, das war nur Schrott.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 20. Oktober 2022 um 12:43
    Zitat von Horstmann

    Beängstigend ;) .

    Quatsch :!:

    Kümmere Dich nicht um den ganzen Javascript-Code, der macht, was er soll.

    Wenn Du die Leise verbreitern willst,

    in Zeile 211 unter #sidebar-box

    einfach noch z.b. min-width: 23em; & max-width: 56em; einfügen.

    Werte nach Belieben anpassen.

    Nun stehen die Lesezeichen recht verloren in der zu breiten Leiste.

    Das änderst Du, in dem Du einfach unterhalb von Zeile 209 z.B.

    CSS
    #sidebar {
        min-width: 22emt;
        max-width: 56em;
    }

    einfügst.

    Auch hier gilt, Werte nach Belieben anpassen.

    Ich hoffe, dass ich Dir helfen konnte.

    Ach!

    Bearbeitbar per drag&drop, wie wir es von der Lesezeichen-Symbolleiste gewohnt sind.

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 19. Oktober 2022 um 14:32

    :thumbup:

    Danke.

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 19. Oktober 2022 um 14:31

    Es gibt was Neues!

  • About Seiten mit CSS Codes anpassen

    • Mira_Belle
    • 19. Oktober 2022 um 13:54
    Zitat von Endor
    ...

    Für die Sidebar verwende ich hier ein Script, ...

    Bei Bedarf schiebe ich das gerne mal rüber.

    Mfg.
    Endor

    Ich hätte da Interesse!

  • Vertikale Lesezeichenleiste, Script und CSS

    • Mira_Belle
    • 19. Oktober 2022 um 13:38

    Also ich habe lange herumprobiert, ewig gebraucht, damit die "neue" Leiste bei mir passte!

    Danach noch das "verstecken" Script "installiert!

    Klappt so weit, aber wie Du schon beschrieben hast, bleibt der "Hintergrund" der Leiste "stehen"!

    Es war mir nicht möglich, das "Element" ausfindig zu machen,

    aber der Hintergrund wird durch diesen Code generiert!

    CSS
    :root:not([chromehidden~="toolbar"]) body > #browser,
    :root:not([chromehidden~="toolbar"]) body > #browser-bottombox,
    :root:not([chromehidden~="toolbar"]) #customization-container{
        margin-left: 165px !important;
      }

    Eventuell hat ja jemand anderes eine Idee, wie man diesen Teil im Javascript unter bekommt?

    Müsste dann hier sein!

    JavaScript
        function onClick(aEvent) {
            var d2 = document.getElementById('PersonalToolbar');
           
            if (d2.style.visibility == "") {
                d2.style.visibility = "collapse";
            } else if (d2.style.visibility == "visible") {
                d2.style.visibility = "collapse";
            } else if (d2.style.visibility == "collapse") {
                d2.style.visibility = "visible";
            }
          }
    Alles anzeigen

    Der vollständigkeitshalber beide Codes.

    CSS
    /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
    See the above repository for updates as well as full license text. */
    
    /* Makes bookmarks toolbar appear vertically at the left side of the window */
    
    @-moz-document url(chrome://browser/content/browser.xhtml){
    
      :root:not([inDOMFullscreen]){
        --uc-vertical-toolbar-width: 180px;
      }
    
    #navigator-toolbox-background:has(#PersonalToolbar[collapsed="true"]),
    #navigator-toolbox-background:has(#browser[collapsed="true"]) {
    margin-left: 0 !important;
    }
    
      #PersonalToolbar{
        position: fixed;
        display: flex;
        flex-direction: column;
        left: 0px !important;
        width: var(--uc-vertical-toolbar-width,0);
        padding-top: 40px !important;
        /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
        height: 100vh !important;
        max-height: 100vh !important; 
        padding-bottom: 120px !important;
      }
    
    
    
      #PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
      #PersonalToolbar #PlacesToolbarItems{
        display: flex;
        flex-direction: column;
      }
      #PersonalToolbar #PlacesToolbarItems > toolbarseparator{
        height: 7px;
        background-color: currentColor;
        background-clip: padding-box;
        border-block: 3px solid transparent !important;
      }
      #PersonalToolbar .toolbarbutton-1{ padding-block: 10px !important }
      #PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
      
    
    :root:not([chromehidden~="toolbar"]) body > #browser,
    :root:not([chromehidden~="toolbar"]) body > #browser-bottombox,
    :root:not([chromehidden~="toolbar"]) #customization-container{
        margin-left: 165px !important;
      }
    
    }
    Alles anzeigen

    und

    JavaScript
    // JavaScript Document
    //Button_PersonalToolbar.uc.js
    // Source file https://www.camp-firefox.de/forum/thema/134920-schaltfl%C3%A4che-um-lesezeichen-leiste-ein-auszublenden/?postID=1205823#post1205823
    (function ptbut() {
       
               
        if (location.href !== 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
           return;
        try {
            CustomizableUI.createWidget({
                id: 'PersonalToolbar-button',
                type: 'custom',
                defaultArea: CustomizableUI.AREA_NAVBAR,
                    onBuild: function(aDocument) {
                        var toolbaritem = aDocument.createXULElement('toolbarbutton');
                        var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                        var buttonicon = "toolbar.png"
                        var props = {
                            id: 'PersonalToolbar-button',
                            class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                            removable: true,
                            label: 'Toggle',
                            tooltiptext: 'Toggle Bookmarktoolbar',
                            style: 'list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/warning.svg")',
                        };
                       
                   
                        for(var p in props)
                            toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                       
                       
                    }
            });
            CustomizableUI.registerToolbarNode(tb);
        } catch(e) { };
    document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
       
    document.addEventListener('keydown', (event) => {
            var keyName = event.key;
            // Mac : Funktion wird ausgeführt, wenn Shift + Cmd + b gedrückt wird
            if (event.shiftKey && event.metaKey && keyName == 'b') {
               onClick(event);        
            }
        }, false
    );
        function onClick(aEvent) {
            var d2 = document.getElementById('PersonalToolbar');
           
            if (d2.style.visibility == "") {
                d2.style.visibility = "collapse";
            } else if (d2.style.visibility == "visible") {
                d2.style.visibility = "collapse";
            } else if (d2.style.visibility == "collapse") {
                d2.style.visibility = "visible";
            }
          }
    })();
    Alles anzeigen

    Was ich auch gerade festgestellt habe, die 'PersonalToolbar' überlagert bei mir zum Teil die Tableiste.

    Das hat den unschönen Effekt, dass der erste Tab nicht "angefasst" werden kann!

    Auch öffnet sich bei Rechtsklick folglich das falsche Kontextmenü.


    Wissen macht "AHHHH"!

    Ich habe die Tableiste per CSS nach unten versetzt, deshalb gibt es die Überlagerung :!:

  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 19. Oktober 2022 um 12:48

    Weiter geht's im anderen Thread!

    Vertikale Lesezeichenleiste

  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 19. Oktober 2022 um 00:38
    Zitat von Horstmann

    ... eine Oben-nach-Unten Symbolleiste für Lesezeichen ...

    Eine Sidebar?

    Für Lesezeichen? Jetzt nimmst Du mich aber auf den Arm, oder?

    ABER, wenn Du wirklich eine zusätzliche Sidebar haben willst, ....

  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 18. Oktober 2022 um 20:20
    Zitat von Dharkness

    Hm, was ist an vertikale Symbolleiste so falsch zu verstehen? :saint: ;)

    Verwechsele ich immer, genau wie links & rechts.

  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 18. Oktober 2022 um 19:53
    Zitat von Horstmann
    Zitat von Mira_Belle

    Eine einfache zusätzliche Leiste.

    Herzlichen Dank, aber diese Leiste ist horizontal, nicht vertikal . :)

    Hatte ich auch schon probiert aufgrund deines früheren Beitrags, funktioniert auch prima - Dankeschön dafür - aber ist halt leider nicht vertikal bzw. seitlich angelegt .

    Verdammt, schreib doch gleich, "von oben nach unten"!

  • Bräuchte Hilfe für die userChrome.css Anpassung

    • Mira_Belle
    • 18. Oktober 2022 um 19:51
    Zitat von 2002Andreas

    Füg das mal in deinen Code mit ein:

    CSS
    #private-browsing-indicator-with-label,
    #alltabs-button {
      display: none !important;
    }

    Soweit war ich auch gerade, dann überlegte ich mir,

    wie bekomme ich nur im Privaten Modus diese "" Leiste breiter.

  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 18. Oktober 2022 um 19:24
    Zitat von Horstmann

    Meine Hoffnung war auf eine Art heruntergekochte Basis-Version, v.a. ohne die ganzen CSS bezogenen Störer für den Button etc., ; aber das ist wohl eher was für einen neuen Thread ; oder vielleicht was das hierzu passen könnte . :/ :saint:

    Meinst Du so?

    JavaScript
    /* new_toolbar.us.js */
    
    (function() {
      if (location.href !== AppConstants.BROWSER_CHROME_URL)
        return;
    
    
      var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
      var uri = makeURI('data:text/css;charset=UTF=8,' );
      sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
      var tb = document.createXULElement('toolbar');
      tb.id = 'new-toolbar';
      tb.setAttribute('customizable', true);
      tb.setAttribute('mode', 'icons');
      var parentE = document.getElementById('nav-bar').parentNode;
      var childE = document.getElementById('nav-bar');
      parentE.insertBefore( tb , childE );
      CustomizableUI.registerArea('new-toolbar', {legacy: true});
      CustomizableUI.registerToolbarNode(tb);
    })();
    Alles anzeigen

    Eine einfache zusätzliche Leiste.

  • Bräuchte Hilfe für die userChrome.css Anpassung

    • Mira_Belle
    • 18. Oktober 2022 um 19:20

    Ersetze mal, nur zum Test

    CSS
    #TabsToolbar {
      position: absolute;
      display: block;
      bottom: 0;
      width: 100vw;
      background-clip: padding-box;
      color: var(--toolbar-color);
    }
    
    #tabbrowser-tabs {
      width: 100vw;
    }
    
    #navigator-toolbox {
      position: relative;
      padding-bottom: calc( var(--tab-min-height) + 8px );
    }
    
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
      height: 36px;
    }
    
    .titlebar-buttonbox-container {
      position: fixed;
      right: 0;
      visibility: visible;
      display: block;
    }
    
    #TabsToolbar .titlebar-buttonbox-container,
    #TabsToolbar #window-controls {
      display: none;
    }
    
    /*Tab schliessen X an allen Tabs*/
    .tab-close-button {
        display: block !important;
        }
    Alles anzeigen

    durch

    CSS
        #navigator-toolbox {
            position: relative !important;
            padding-bottom: calc( var(--tab-min-height) + 10px ) !important;
        }
    
        #TabsToolbar {
            position: absolute !important;
            display: block !important;
            bottom: 0 !important;
        }
    
        #tabbrowser-tabs {
            width: 100vw !important;
        }
    Alles anzeigen
  • Neuen beweglichen Button mit Funktion erstellen.

    • Mira_Belle
    • 18. Oktober 2022 um 08:41
    Zitat von Gabbo

    Hier mal eine Lsg. für #new-toolbar (sowie Buttons) bei einer Höhe von 22px:

    ...

    Ich danke Dir, Gabbo.

    Z.Z. nutze ich die "New Toolbar" nicht, aber habe mir Deine Lösung in "mein" Script mal integriert und werde es mal testen.

    Im Augenblick habe ich die Buttons in die Menüleiste geschoben, mir wurde der ganze "Kopp" dann doch etwas zu aufgeblasen.

Unterstütze uns!

Jährlich (2025)

105,8 %

105,8% (687,41 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon