Vertikale Lesezeichenleiste, Script und CSS

  • Firefox-Version
    105.0.1
    Betriebssystem
    macOS 10.13.6

    Im ewigen Kampf um die optimale Darstellung der Lesezeichenleiste, bin ich kürzlich auf eine weitere mögliche Lösung gestossen .

    Diese CSS positioniert die Lesezeichenleiste als vertikale Liste an die Seite , und funktioniert nach anfänglichen Tests auch prima .

    Es gibt nur einen Haken - im Gegensatz zur normalen, horizontalen Lesezeichenleiste, die beim Ausblenden aus dem Browserfenster verschwindet und den Webseiteninhalt freigibt - bleibt bei dieser Variante eine Lücke, bzw. eine Art Platzhalter zurück .

    Der Browserinhalt bzw. der Webseiteninhalt passen sich nicht darauf an, dass die Lesezeichenleiste eigenlich nicht mehr da ist - im Gegensatz zum genannten Verhalten der Standard Lesezeichenleiste .

    Ich hatte die Frage auch schon auf Reddit gestellt, und der Author der CSS hat sich netterweise dazu mit einem Lösungsvorschlag geäussert, nur funktioniert die Geschichte auch damit noch nicht .

    Hättet Ihr dazu eine Idee ?

    Anbei die Screenshots zum Thema; ich hoffe das macht Sinn .


    PS: Idealerweise würde das Ganze auch mit dem Script zum Verstecken der Lesezeichenleiste funtionieren - das ich übrigens absolut liebe . :)


    Einmal editiert, zuletzt von Horstmann (1. Oktober 2022 um 12:51)

  • Nicht drängeln Leute, bitte, hier kommt jeder dran ! ;)

    Vielleicht war meine ursprüngliche Erklärung der Angelegenheit wieder mal etwas unverständlich ; es geht hier um einen CSS Code, der die Lesezeichenleiste als vertikale Liste an die Seite plaziert, wie oben schon erwähnt .

    Im Prinzip hätte ich gern dass diese Leiste genauso wie die Sidebars Leiste agiert : ist die Sidebar offen, wird der Browserinhalt/ die gerade offene Webseite um die Breite der offenen Sidebar reduziert.

    Schliesst man die Sidebar, expandiert der Browserinhalt/Webseiteninhalt zurück auf die volle Browserbreite .

    Mit dem vertikalen Lesezeichenleisten CSS funtioniert das auch nach einer Modifikation, aber nur bedingt .

    Hier ist der CSS Code für die vertikale Lesezeichenleiste; in der Form ist sie permant sichtbar; auch nach Verstecken der Lesezeichenleiste bleibt eine Lücke am Browserrand zurück, wie in der ersten Post beschrieben und bebildert :

    Um eine Anpassung des Browserinhalts bei geschlossener Lesezeichenleiste zu ermöglichen, hat der wohlbekannte Mr. Other Guy netterweise auf meine Frage dazu mit einem (experimentellen) Lösungsvorschlag geantwortet :

    CSS
    #navigator-toolbox-background:has(#PersonalToolbar[collapsed="true"]) + #browser {
    margin-left: 0 !important;
    }

    Das funtioniert tatsächlich ; hat nur einen Haken - ich muss jedesmal das Fenster Symbolleiste anpassen öffnen , bevor der Effekt in Kraft tritt .

    Also Webseite ist offen , Vertikale Lesezeichenleiste offen , Webseiteninhalt komprimiert um die Breite der Lesezeichenleiste .

    Dann 'schliesse` ich die Lesezeichenleiste - über Rechtsklickmenü oder Tastaturkürzel auf Lesezeichensymbolleiste -> Nie anzeigen - der Inhalt, die Lesezeichen an sich, verschwinden dann, aber die Leiste selber bleibt, der Webseiteninhalt bleibt komprimiert ( s Screenshots in erster Post ).

    Seltsam ist jetzt, dass wenn ich nun Symbolleiste anpassen aktiviere - was dann ja ein neues Tab mit eben den Anpassungsfunktionen öffnet - und dann ohne irgendwas zu machen einfach nur auf meine alte Tab zurückgehe - dann hat sich die Leiste komplett geschlossen , und der Webseiteninhalt ist auf voller Breite sichtbar .

    Umgekehrt genauso, beim Öffne einer geschlossenen Lesezeichenleiste passt sich der Webseiteninhalt in der Breite an - aber immer nur nach dem Umweg über Symbolleiste anpassen öffnen ....


    Getestet in vielen Varianten, inkl. einem Profil ohne weitere CSS oder Script Modifikationen .

    Ideen willkkommen !   :)

  • 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!

    Der vollständigkeitshalber beide Codes.

    und

    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 :!:

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (19. Oktober 2022 um 13:43) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • Vielen Dank, Mira, besser erklärt und zusammengefasst als ich es geschafft habe ! :)

    Und um alles an einer Stelle zu haben, hier auch noch ein Skript von Aris , Original hier .

    Damit erhält man eine zusätzliche vertikale Toolbar, die aber nur schwer zu bändigen ist - für mich jedenfalls .

    Meine Vermutung ist dass um Zeile 180 herum die Anpassung der Browser-Fensterbreite geregelt wird .

    Wie Mira aber schon dargestellt hat, ideal wäre wenn man "einfach nur" (...) im vorhandenen Button_PersonalToolbar

    Skript diese Anpassung mit einpflegen könnte .

    In der Höhe funktioniert es ja auch, wenn die Leseteichenleiste wie üblich horizontal ist .


    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 :!:

    Den Spass hatte ich auch schon ;) .

    Es sollte klappen die Leiste nach unten zu schieben um die Höhe der Tabs Leiste :

    CSS
    #PersonalToolbar {
    margin-top: 24px !important;
    }

    Oder die Reihenfolge der Leisten festzulegen , zB auf die Art , abhängig von Deiner Konfiguration :

    Ich teste das Ganze momentan mit einem Einzeiler Profil, hatte die Überschneidungen aber auch am Anfang mit der Tableiste unten .

    2 Mal editiert, zuletzt von Horstmann (19. Oktober 2022 um 14:04) aus folgendem Grund: Ein Beitrag von Horstmann mit diesem Beitrag zusammengefügt.

  • 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.

    Mit <3lichem Gruß

    Mira

  • Hehehe, das Script macht den Hintergund der normalen Firefox Sidebar transparent, und verhindert dass sich der Browserinhalt in der Breite anpasst, bei geöffneter normaler Sidebar . ;)

    Noch dazu geht die Sidebar nach kurzer Zeit automatisch zu, auch nicht optimal .

    Im Symbolleiste anpassen Fenster - oder überhaupt irgendwo - taucht die zusätzliche Sidebar nicht auf , also drag&drop geht nicht ; das Skript zerschiesst einfach nur die reguläre Firefox Sidebar . 8)

    Das Ganze ausprobiert im Testprofil ohne andere Scripts, und mit CSS Dateien deaktiviert (userChrome.css umbenannt) ; meine anderen Scripts, wenn benutzt, funktionieren .

    Ich benutze generell zur Verwendung von Scripten die Dateien von Endor, die hier verlinkt werden, seit Mitte diesen Jahres .

    Irgendwo hakt es da wohl; bei Dir scheint das Script ja zu klappen, bei mir macht es 10 Schritte in die genau falsche Richtung . ;)

    Meine FF Version ist die aktuelle 106, auf macOS .

    Hier noch ein Screenshot :


    Einmal editiert, zuletzt von Horstmann (20. Oktober 2022 um 15:32)

  • 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

    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/124.0.1
    OS: Windows 10 pro 64 bit und Windows 10 Home 64 bit
    Meine Scripte Sammlung: https://github.com/Endor8/userChrome.js
    Kein Support per PN. Fragen bitte im Forum stellen!

    Einmal editiert, zuletzt von Endor (20. Oktober 2022 um 15:54)

  • 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.

    Mit <3lichem Gruß

    Mira

  • Kann gut sein dass ich etwas falsch mache hier , aber dieses Script erzeugt bei mir nur eine Sidebar mit ein paar kleinen Modifikationen, und einigen Bugs .

    Der Inhalt lässt sich nicht verändern über Symbolleiste anpassen, weil die Leiste da nicht auftaucht, also gibt's auch keine austauschbaren Basis-Inhalte .

    Es ist einfach eine stinknormale Sidebar mit extra Knöpfen, etwas misslungenem Styling und eben ein paar Bugs ....

    Wie die Standard Sidebar ist sie vertikal, hat Sidebar Lesezeichen drin, und passt hier auch den Browserinhalt beim Schliessen/Öffnen in der Breite an .

    Aber es ist eine klassische Sidebar, und eine klassische Sidebar ist ja eben nicht das Ziel , sondern eine vertikale Lesezeichen-Symbolleiste .

  • 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.

    Habe ich widerholt versucht, Script hatte ich mehrmals neu kopiert, nie verändert, und in verschiedenen Profilen ; das Ergebnis ist immer das Gleiche wie im obigen Beitrag beschrieben .

  • 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.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (21. Oktober 2022 um 08:03)

  • 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. :/

    Mit <3lichem Gruß

    Mira

  • kopiert das Script quasi die Lesezeichen-Symbolleiste.

    Sieh dir doch die Screenshots einfach alle in Ruhe mal an.

    Das ist nichts anderes als die Lesezeichensidebar, und nicht nur die Symbolleiste.


    frei konfigurierbare Seitenleiste,

    Nein, sondern wie er geschrieben hat:

    positioniert die Lesezeichenleiste als vertikale Liste an die Seite

    Mit freundlichem Gruß
    Andreas
    Mein Laptop    Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (21. Oktober 2022 um 12:01) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

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

    die den Fensterinhalt staucht, oder bei Einblendung überlagert?

    Fragen über Fragen. :/

    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 .

    Also in diesem einen Verhalten genau wie die Sidebar - aber eben keine Sidebar, weil die mir generell im Aufbau und der Funktionsweise nicht gefällt .

    Möglich dass die Sidebarskripts von oben eine entsprechende Modifikation erlauben, aber ich hatte die bisher nicht sauber zum laufen gebracht, wie gesagt .

    Aber lange Rede kurzer Sinn - mit zarten Modifikationen am Skript von Aris und am vertikalen Bookmarks CSS von Mr. Otherguy bin ich nah dran ; es scheint soweit schon prima zu klappen, ich muss nur noch den ganzen Stylingkrams aus dem Skript überschreiben oder editieren .

    Wenn doch bloss die Skripte Schreiber das ganze Stylegedöns in eine separate CSS Datei packen würden, wir Anfänger hätten's so viel einfacher ... ;)

    Sobald ich was Spruchreifes habe poste ich den Code - und vielen Dank nochmals für Eure Mühe ! :)