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

  • Firefox-Version
    101.0.1
    Betriebssystem
    Win10

    Hallo liebes Fuchsteam !

    Ich suche nach einer Art Abtrennung für meine Symbole in der Navigationsleiste.

    Mir ist bekannt, das ich "flexibler Leerraum" dafür benutzen kann, aber der Abtrenner ist mir zu zu groß.
    Außerdem weiß ich das man den "flexibler Leerraum" Button auch per Script ändern kann, aber das hilft mir nicht weiter,
    da ich (soweit ich weiß) nur ALLE "flexibler Leerraum" Buttons damit ändern kann und nicht nur einen.
    Ich nutze bereits mehrfach den "flexibler Leerraum" Button an anderer Stelle, daher nützt mir eine Änderung von allen dieser Buttons
    leider gar nichts.

    Zur Not benutze ich aktuell "divider" ,aber das ist nur 1 Abtrenner und ich benötige mindestens 2 davon.

    Divider => https://addons.mozilla.org/de/firefox/add…_content=search

    Ich möchte mit Hilfe eine Abtrennung einen einzelnen Button in der Navigationsleiste sichtbar von den anderen hervorheben.
    Demnach wäre eine räumliche Abtrennung für mich die erste logische Option.

    Zur Veranschaulichung hier mal die Navileiste und was ich abtrennen/hervorheben möchte (Hinweis selbst hineingemalt)



    Mir würde auch eine Hintergrundfarbe, oder eine andere Art Lösung reichen, um den Button hervorzuheben, oder deutlich von den anderen daneben zu trennen.
    Auf dem Bild sehr ihr außerdem auch schon den "Divider" rechts daneben (ein senkrechter Strich), von den ich gerne 2 hätte (Notlösung).

    Ich hoffe das es irgendwelche pfiffigen Leute unter euch gibt,die mir bei dieser Sache weiterhelfen könnten.

  • Ja genau sowas meine ich 😅.
    Ich benötige den Trennstrich aber nur an einer bestimmten Stelle und nicht bei jedem Button 😉.

    Wäre es möglich den Strich auch nur neben den Button zu machen, den ich im Bild rot angemalt habe ?

  • Teste bitte mal:

    CSS
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:after {
       content: "|" !important;
       display: flex !important;
       color: red !important;
       border-right: 2px solid red !important;
       min-width: 2.5px !important;
       max-width: 2.5px !important;
    }
  • Zitat

    da ich (soweit ich weiß) nur ALLE "flexibler Leerraum" Buttons damit ändern kann und nicht nur einen.

    Schon richtig, aber wenn man z.B. die Breite auf zwei oder drei Pixel setzt, kann man damit gut jonglieren. Man setzt dann halt soviele Leerräume wie man braucht. Damit ist man dann wirklich flexibel.

  • Teste bitte mal:

    CSS
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:after {
       content: "|" !important;
       display: flex !important;
       color: red !important;
       border-right: 2px solid red !important;
       min-width: 2.5px !important;
       max-width: 2.5px !important;
    }

    Probier ich gleich mal aus, einen Moment bitte.

  • einen Moment bitte.

    Und so mit einem Hintergrund:

    CSS
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action .toolbarbutton-badge-stack {
      background: #dddddd !important;
    }
    
    #_4853d046-c5a3-436b-bc36-220fd935ee1d_-browser-action:hover .toolbarbutton-badge-stack {
     background-color: #eeeeee !important;   
    }

    Ich stell mich grad an wie der erste Mensch 😅 ...
    Kannst du mir bitte sagen wo ich das reinschreiben muß ?

  • 😅 du warst schneller als ich mit meiner Antwort.

    Ich würde dennoch sehr gerne einen Trennstrich davor und dahinter setzen.
    Wärst du bitte so nett und könntest mir dabei auch helfen ?

    Am besten wäre unabhängig nur für dieser Erweiterung, damit ich den Button auch später noch woanders hinschieben (links, oder rechts) kann, falls nötig, sich die Trennstriche aber trotzdem mit verschieben.

  • einen Trennstrich davor und dahinter setzen.

    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;
       border-right: 2px solid red !important;
       min-width: 2.5px !important;
       max-width: 2.5px !important;
    }
  • einen Trennstrich davor und dahinter setzen.

    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;
       border-right: 2px solid red !important;
       min-width: 2.5px !important;
       max-width: 2.5px !important;
    }

    Hmmm merkwürdig ...
    Ich fummeln jetzt schon eine Weile umher, aber irgendwie sieht es bei mir so auf dem Bildschirm aus, als wenn da ein Strich im Strich wäre. Auf deinem Bild ist ein ganz klarer roter Strich zusehen.

    Schau mal bitte ...

  • Schau mal bitte ...

    Hast du evtl. noch einen der anderen Codes aktiv?

    Das ist alles aus meiner CSS Datei.
    -----------------------------------------------------