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

GermanFreme82

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.

2002Andreas

Zitat von GermanFreme82

ein senkrechter Strich

Meinst du das so?

CSS

#bookmarks-menu-button:after,
#downloads-button: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;
}

GermanFreme82

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 ?

2002Andreas

Zitat von GermanFreme82

neben den Button zu machen, den ich im Bild rot angemalt habe ?

Von welcher Erweiterung ist denn der Button

GermanFreme82

Der kommt von der Erweiterung hier => https://addons.mozilla.org/de/firefox/add…closetabbutton/

2002Andreas

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;
}

clio

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.

GermanFreme82

Zitat von 2002Andreas

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.

2002Andreas

Zitat von GermanFreme82

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;   
}

GermanFreme82

Zitat von 2002Andreas

Zitat von GermanFreme82

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ß ?

2002Andreas

Zitat von GermanFreme82

wo ich das reinschreiben muß ?

In die userChrome.css

GermanFreme82

Zitat von 2002Andreas

Zitat von GermanFreme82

wo ich das reinschreiben muß ?

In die userChrome.css

aaah jetzt klappt es schau ...

Kannst du mir bitte noch sagen, wie man nun einen Strich davor und dahinter bekommt ?
Wenn das auch geht, dann kann ich die Erweiterung "Divider" wegwerfen.

2002Andreas

Zitat von GermanFreme82

aaah jetzt klappt es schau ...

GermanFreme82

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

2002Andreas

Zitat von GermanFreme82

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;
}

GermanFreme82

Zitat von 2002Andreas

Zitat von GermanFreme82

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

2002Andreas

Zitat von GermanFreme82

Schau mal bitte ...

Hast du evtl. noch einen der anderen Codes aktiv?

GermanFreme82

Zitat von 2002Andreas

Zitat von GermanFreme82

Schau mal bitte ...

Hast du evtl. noch einen der anderen Codes aktiv?

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

CSS

/*----------------------------------------*/
/* Megabar (Url-Bar) die Ecken abgerundet */
/*----------------------------------------*/


/* Adressleiste / Erhöhung wird verhindert */
#urlbar-background {
background: #f8f8ff ! important; /* Hintergrund */
border: 1px solid #5badff !important;
border-radius: 50px !important; }
#urlbar[breakout][breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important; }
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding-block: 0 !important;
padding-inline: 0 !important; }
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important; }
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}


/* Suchleiste Ecken abrunden */
#searchbar {
background: #f8f8ff ! important; /* Hintergrund */
border-radius: 50px !important;
border: 1px solid #5badff !important;
}


/* -------------------------------------*/
/* Kontext-Menü / Einträge ausgeblendet */
/* -------------------------------------*/
#context-viewinfo,
#textnotes_gaborjuhaszprojects_com-menuitem-_textnotes,
#_lympha-menuitem-_lympha-ctx-btn {
display: none !important;
}
#context_pinTab,
#context_moveTabOptions,
#context_reopenInContainer,
#context_sendTabToDevice,
#context-sendlinktodevice,
#context-inspect-a11y,
#context-openlink,
#context-openlinkprivate,
#context-bookmarklink,
#context-inspect,
#context-openlinkinusercontext-menu,
#context-viewpartialsource-selection,
#context-sep-sendlinktodevice,
#inspect-separator,
#context-sendpagetodevice,
#context-viewbgimage,
#context-selectall,
#context-viewsource,
#context-sep-sendpagetodevice,
#context-sep-viewbgimage,
#contentAreaContextMenu > menuseparator:nth-child(93),
#context-sendimage,
#context-setDesktopBackground {
display: none !important;
}
#context_duplicateTab {
-moz-box-ordinal-group: 0 !important;
}
#context-openlinkintab {
-moz-box-ordinal-group: 0 !important;
}
#context-copylink {
-moz-box-ordinal-group: 0 !important;
}
#copyplaintext_eros_man-menuitem-_copyPlainText {
-moz-box-ordinal-group: 0 !important;
}


#context-copy {
-moz-box-ordinal-group: 0 !important;
}
#_5dd73bb9-e728-4d1e-990b-c77d8e03670f_-menuitem-_search_engine_menu {
-moz-box-ordinal-group: 20 !important;
}
#context-print-selection,
#textnotes_gaborjuhaszprojects_com-menuitem-_textnotes-selection {
display: none !important;
}
menuitem[label="Ein Schlüsselwort für diese Suche hinzufügen…"] {
display: none !important;
}


/*-------------------------------------------------------*/
/* Trennstrich + Hintergrund für TAB geschlossen Button */
/*-----------------------------------------------------*/


#_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;
}


/*--------------------------------------------*/
/* Ordnersymbole für Symbolleiste und Sidebar */
/*--------------------------------------------*/


@-moz-document url-prefix(chrome://browser/content/browser.xhtml),
url("chrome://browser/content/places/places.xhtml") {
.bookmark-item[container="true"]{
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=") !important;
}
}


@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
treechildren::-moz-tree-image(container) {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII=") !important;
}
}

Alles anzeigen

2002Andreas

Zitat von GermanFreme82

Das ist alles aus meiner CSS Datei.

Funktioniert hier damit einwandfrei

GermanFreme82

Zitat von 2002Andreas

Zitat von GermanFreme82

Das ist alles aus meiner CSS Datei.

Funktioniert hier damit einwandfrei

Hmm merkwürdig.
Ich melde mich dann die Tage nochmal zurück, denn aktuell hab ich jetzt leider keine Zeit mehr.
Vielen Dank erstmal 💖👍‍