Zebra in der Bookmarks Sidebar

    Firefox-Version
    116.0.3
    Betriebssystem
    Windows 11

    Hallo zusammen,

    ich habe die Suche bemüht, bin aber nicht fündig geworden. Ich hätte beim meinem FF gerne ein paar Anpassungen und werde ein paar Nachrichten erstellen. Fangen wir mal an. Ist es im aktuellen FF möglich in der hier dauerhaft geöffneten Bookmarks Sidebar (auf der linken Seite) ein Zebra zu erstellen wie ich es vom Thunderbird gewohnt bin? Ich häng da mal einen Screenshot zum besseren Verständnis an.

    Optisch ansprechend wäre es für mich auch wenn man (wie ebenfalls bei Thunderbird) zwischen allen Einträgen eine Trennlinie einfügen könnte.

    Ich bedanke mich schon mal für zielführende Antworten. :)

  • Zur hilfreichsten Antwort springen

    Hallo Andreas,

    ich habe im OP einen (Thunderbird) Screenshot eingefügt wie ich das Zebra gerne hätte.

    Mir ist durchaus klar dass ich mit "add Separator" eine Trennlinie einfügen kann. Jedoch wird dadurch sehr viel Platz verschwendet. Im oben angefügten Screenshot kann man auch sehr gut erkennen wie ich mir das mit den Trennlinien vorstelle.

    Zitat von Nikolaus2001at
    ...

    Ganz ehrlich, ich kann mir z.Z. auch nicht vorstellen, was genau Du umsetzen möchtest.

    Aber Du kannst doch bestimmt mit Paint umgehen und eine Vorlage hast Du doch auch schon!

    Bastel doch mal mit Deinem Screenshot von der Seitenleiste eine "Vorlage" wie Du Dir das vorstellt,

    wie es hinterher aussehen soll.

    Eventuell fällt dann bei uns der berühmte Groschen. ;)

    Mit <3lichem Gruß

    Mira

    Er meint sehr wahrscheinlich, wie man in seinem ersten Screenshot sehen kann, das einem schwarz hinterlegtem Eintrag ein weisser (heller) Trennsteg folgt. Quasi wie ein Zebrastreifen.

    HP Chromebook 15a-nb0225ng, i3N-305, 8 GB LPDDR5-4800 MHz RAM (integriert), 256GB UFS, - chromeOS 126 (Stable Channel) - Linux Debian Bookworm: Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

    • Hilfreichste Antwort
    Zitat von Nikolaus2001at

    so ungefähr soll es aussehen


    Zitat von Nikolaus2001at

    Die Farben stelle ich mir dann selbst zusammen.

    Einzutragen in die userChrome.css

    Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userChrome.css
    Du mußt dir im Profilordner einen neuen Ordner chrome erstellen und in diesem dann eine Textdatei ( mit einem Editor ) in die du den Code kopierst, bzw. einträgst.

    Dann schließt du die Datei und speicherst sie als userChrome.css ab.
    Danach mußt du den Firefox neu starten.

    PS:
    Du musst dir dazu die versteckten Dateiendungen anzeigen lassen.

    Um das einzustellen klickt man im Windows 10 Explorer (wenn man einen Ordner offen hat) erst oben links auf Ansicht..dann rechts oben auf

    "Optionen" > "Ordner und Suchoptionen ändern" > "Ansicht"

    und entfernt das Häkchen bei "Erweiterungen bei bekannten Dateitypen ausblenden"

    Wo finde ich meinen Profilordner

    Eine genaue Beschreibung dazu befindet sich auch unter diesem Link:

    Videoanleitung für die userChrome.css und mehr

    Zusätzlich muss in about:config der Eintrag:

    toolkit.legacyUserProfileCustomizations.stylesheets

    auf true stehen.

    Ok, nachdem ich jetzt eine Weile herumgebastelt habe bin ich schon wieder mit meinem Latein am Ende. Die rote Trennlinie zwischen den einzelnen Einträgen gefällt mir, auch wenn sie in der finalen Version eine andere Farbe bekommt.

    Was ich jedoch nicht brauche ist der Rahmen um den "search bookmarks" Eintrag und der rote Scrollbalken.

    Wie sollte der Eintrag in der userChrome.css aussehen wenn nur die Trennlinien erwünscht sind.


    Edit: Danke, ich hab's alleine hinbekommen. :)

    Zitat von Mira_Belle

    Bitte poste doch mal Deinen CSS-Code dazu.

    /* Zebra in der Bookmarks Sidebar */

    /* Trennlinie in der Bookmarks Sidebar */

    treechildren::-moz-tree-cell(even) {

    background: #2b2b2d !important;

    border-bottom: 1px solid #00bbff !important;

    }

    treechildren::-moz-tree-cell(odd) {

    background: #696969 !important;

    border-bottom: 1px solid #00bbff !important;

    }

    Dazu habe ich noch unten stehenden Code kopiert. Jetzt sieht es so aus wie gewollt. :)


    /* Blau in der Sidebar bei selektiert */

    .sidebar-placesTree treechildren::-moz-tree-row(selected) {

    background-color: #00bbff !important;

    }

    /* Orange in der Sidebar bei hover */

    .sidebar-placesTree treechildren::-moz-tree-row(hover) {

    background-color: #db6a50 !important;

    }

    Zitat von 2002Andreas

    Oder auch so über die ganze Breite:

    ...

    Das ist gut, nur ...

    wenn ich z.B. für .sidebar-placesTreechildren::-moz-tree-cell(selected) z.B. Schwarz vorgebe,

    dann sind zwei ganz dünne Linien über und unter dem Feld genau in diesem "blöden" Türkies noch sichtbar.

    Kann man das "Türkies" nicht direkt ansprechen über root?

    Die gepunkteten Rahmen habe ich ja auch gefunden.

    --default-focusring:

    Ach und noch eine Kleinigkeit, der Selektor für die Symbole,

    den bräuchte ich dann auch noch irgendwie.

    So, dann ist aber auch mal gut, und wir kümmern uns wieder um Nikolaus2001at.

    Mit <3lichem Gruß

    Mira