[Suche] Divider, Separator, Trennlinie für Navigationsleiste

  • Oder auch so bitte mal testen:

    CSS
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:before,
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:after {
       content: "|" !important;
       display: flex !important;
       color: red !important;
       margin-top: -1px !important;
       margin-bottom: 4px !important;
    }
  • Es gibt auch ein Benutzerskript von Aris:

    Im Anpassen-Fenster wird dann oben eine Konfigurationsleiste mit Symbolen für Leerraum, Trennzeichen und flexiblen Leerraum eingefügt.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Meinst du das so?

    Die Idee gefällt mir ausgesprochen gut. Deutlich besser als wie bisher von mir umgesetzt mit zusätzlichem, direkt folgenden Leerraum (angesprochen als toolbarspring) und dem Nachbarselektor:

    CSS
    #sidebar-button + toolbarspring[id^="customizableui-special-spring"] {
        /* Deklarationen */
    }


    Aber Krümel extrahierend (auch zur Info GermanFreme82 ) : Statt :after und :before hier besser zwei Doppelpunkte nutzen, also ::after und ::before, denn das sind Pseudoelemente, keine Pseudoklassen. Siehe dazu CSS/Tutorials/Selektoren/Pseudoelement im SELFHTML-Wiki (rechts oben kann man dann zu Pseudoklassen weiterschalten).

    Nachtrag: Ich bin nun doch wieder zurückgegangen, das alte Aussehen gefällt mir etwas besser. Deshalb hier die vollständige Regel:

    CSS
    #sidebar-button + toolbarspring {
    border-left: 2px solid var(--lwt-accent-color) !important;
    color: var(--lwt-accent-color) !important;
    min-width: 2px !important;
    max-width: 2px !important;
    width: 2px !important;
    margin-left: 3px !important;
    margin-right: 3px !important;
    }

    Anmerkungen:

    • Der ID-Selektor für den toolbarspring, wie oben in der Kurzversion noch zu sehen, ist bei mir nicht mehr notwendig (war er aber mal).
    • Noch einmal deutlich: Rechts vom Symbol muss ein Leerraum eingefügt werden, sonst sieht man keinen Strich, denn mit der obigen Regel wird nur dieser beeinflusst. Für Striche links eines Symbols funktioniert der Code nicht, man muss dann das weitere Symbol davor ansprechen.
    • Ich hab das Symbol in die Tableiste eingefügt (ganz links). In der Navbar wären die margin-Deklarationen für den Abstand nicht notwendig.
    • Für die Farbe nutze ich die Variable für (Light-weight-)Themes. Das sieht nicht bei jedem Theme gut aus.
  • Jetzt habt ihr mich etwas verwirrt ;-).
    Ich habe in den letzten Tagen das hier verwendet und bin mit dem Ergebnis eigentlich ziemlich zufrieden.

    Es wäre natürlich jetzt noch der Hammer, wenn ich ein paar Pixel links und rechts daneben noch Freiraum hätte, aber so, das ich später (falls gewünscht) den Button auch verschieben kann und sich diese Freistellen mitbewegen würden.

    Welches von euren ganzen Scripten nun das richtig ist überblicke ich jedoch gerade nicht ganz richtig. Könntet ihr mir das bitte nochmal posten, also als endgültige letzte Variante ?

  • Jetzt habt ihr mich etwas verwirrt ;-).

    Selber! ^^

    Du hast doch gar keinen Trennstrich (mehr). Is’ aber schick.

    Kannst Du als Themeneröffner noch so nett sein und „Seperator“ zu „Separator“ korrigieren?

    Ja genau ich hab das mit dem bunten Kreis genommen und wenn man mit der Maus drüber geht, dann leuchtet es rot. Ich finde das sehr hilfreich.

    Was mit jetzt noch fehlt ist links und rechts daneben ein wenig Freiraum ;-).

  • Was mit jetzt noch fehlt ist links und rechts daneben ein wenig Freiraum

    Meinst du das so?

    Wenn ja dann teste bitte. Die Werte kannst du dir ja anpassen:

  • Hallo

    Bei dem Script von Aris wo kann ich da die Farbe ändern und die Stärke der Separatoren

    Du beziehst dich auf

    Es gibt auch ein Benutzerskript von Aris:

    oder? Die Quelle ist übrigens space_and_separator_restorer.uc.js auf GitHub. Ich hab mir das nicht bis ins letzte Detail angesehen, aber das Skript hat einen CSS-Bereich (beginnt in Zeile 105), wo Eigenschaften zu ändern oder ergänzen wären, wobei zu beachten ist, dass am Ende jeder Zeile immer ein Backlslash („\“) stehen muss.

    Weiter kann ich nicht helfen, ich bin jetzt erst mal überfordert damit, was es mit dem toolbarspacer auf sich hat. Ich nutze nur CSS, wie oben gepostet, und sehe über die Browserwerkzeuge nur toolbarsprings.

  • Die kannst du auch separat per CSS bearbeiten:

    CSS
    #customizableui-special-separator {
        appearance: none !important;
        border-left: 1px solid red !important;
        border-top: none !important;
    }

    Damit kannst du alle diese Separatoren ändern.

    Wenn du nur einzelne bearbeiten willst, mußt du mit dem Inspektor die genaue Nummer ermitteln.

    EDIT:

    Der obige Code ist falsch...

    Hier die richtige Version:

    CSS
    toolbarseparator[id^=customizableui-special-separator] {
        appearance: none !important;
        border-left: 1px solid red !important;
        border-top: none !important;
    }

    Einmal editiert, zuletzt von grisu2099 (24. November 2022 um 06:56) aus folgendem Grund: Syntax-Fehler im Code berichtigt. Danke @Speravir

  • Wo genau muss der Farbcode den hin, habe es vor, in und hinter der Klammer versucht, Fehlschlag.

    CSS
     #configuration_toolbar { \
              -moz-appearance: none !important; \
              background-color: var(--toolbar-bgcolor); \
              background-image: var(--toolbar-bgimage); \
              background-clip: padding-box; \
              color: var(--toolbar-color, inherit); \
  • Die kannst du auch separat per CSS bearbeiten:

    Schön, wenn es hier funktioniert. Ich habe aber die Erfahrung gemacht, dass das nicht immer funktioniert. Ob es an fehlender Spezifität liegt oder daran, dass das Skript eventuell nach dem CSS geladen wird oder einer Kombination aus beidem, hab ich nicht untersucht.

    #customizableui-special-separator

    Das ist dann nur ein bestimmter Trenner und nicht „alle Separatoren“. Aber ich hab bei mir beispielsweise welche mit ID customizableui-special-spring88 bzw. …89 (dabei habe ich gar nicht so viele Trenner eingebaut). Wenn man sie alle ansprechen wollte, wäre dafür als Selektor dann dieses zu wählen:

    CSS
    [id^="customizableui-special-spring"] { /* Deklarationen */ }

    beziehungsweise spezifischer wie oben am 28. Juni oder eben gleich das Element toolbarspring ohne ID. Es hängt alles davon ab, was genau man will.

    Wo genau muss der Farbcode den hin, habe es vor, in und hinter der Klammer versucht,

    Nur innerhalb der geschweiften Klammern. Wie sah denn deine Deklaration mit der Farbangabe aus?

    #configuration_toolbar

    Von der Bezeichnung der ID ausgehend erscheint mir das für die gesamte Leiste zu gelten, nicht für einen Trenner. Wenn Du es im Skript ändern willst, nicht separat wie von Grisu vorgeschlagen, probiere zuerst mit der letzten Regel

    CSS
    #main-window:not([customizing]) toolbar:not(#configuration_toolbar) toolbarspring {\
    max-width: 100% !important; \
    }\

    analog zu meinem Nachtrag im obigen Posting vom 28. Juni (nur den Teil innerhalb der Klammern). Die Farbe muss zweimal angegeben werden (oben als var(--lwt-accent-color) zu sehen), die Dicke leider viermal (2px). Unabhängig davon muss das Skript wohl mal geupdatet werden, weil -moz-appearance doch gar nicht mehr funktioniert.

  • #customizableui-special-separator gilt für alle Separatoren, die mit dem Skript erzeugt werden. Wenn du nur einen bestimmten ansprechen willst, brauchst die Nummer dahinter zusätzlich.

    customizableui-special-spring88

    Das sind flexible Abstände, für die sinngemäß das gleiche gilt: Einmal ohne die Zahl dahinter greift das für alle...

  • Wie funktioniert den das mit dem Inspektor, damit ich diese Nummern find, ich habe es versucht aber keine Nummern für die Icons gefunden.

    Das sollte dir helfen:

    reni
    1. November 2022 um 13:25

    #customizableui-special-separator gilt für alle Separatoren, die mit dem Skript erzeugt werden. Wenn du nur einen bestimmten ansprechen willst, brauchst die Nummer dahinter zusätzlich.

    Wie oben erwähnt, benutze ich das Skript nicht. Aber ich sehe das, was Du behauptest, dort auch nicht. Wenn es so wäre, wäre das Skript schlecht programmiert. Denn eine ID darf immer nur einmal pro Seite vorkommen, was hier das Browserfenster ist, und die Syntax, die Du präsentierst, steht für eine gesamte ID. Die Syntax für eine Teilübereinstimmung sehe ich im Skript und habe ich oben auch verwendet, weshalb das hier

    Das sind flexible Abstände, für die sinngemäß das gleiche gilt: Einmal ohne die Zahl dahinter greift das für alle...

    genauso falsch ist. Übrigens sind das genau die Abstände, die man ohne Skript über das Anpassen der Symbolleiste einfügen kann. Über das CSS werden sie ihrer Flexibilität beraubt. (Aaah, ich erinnere mich gerade: Das Skript ermöglicht es wieder, feste Abstände einzufügen, wie es früher standardmäßig der Fall war.)

  • Du hast Recht. Richtig muß es heißen:

    toolbarseparator[id^=customizableui-special-separator]

    Damit sind dann alle Separatoren, die mit dem Skript erzeugt werden, angesprochen.

    Ich war nicht ganz bei der Sache, als den obigen Blödsinn geschrieben habe, sorry... :sleeping:

  • Bei dem Script von Aris

    Aris hat das Skript gerade aktualisiert, und zwar genau im CSS-Teil. Damit ist auch dieses hier hinfällig:

    wobei zu beachten ist, dass am Ende jeder Zeile immer ein Backlslash („\“) stehen muss.

    Der CSS-Bereich beginnt jetzt ab Zeile 100.