Tableiste Änderungen

omar1979

Zitat von 2002Andreas

Teste bitte, Farben anpassen.

👍‍ danke.

omar1979

Heeelp.. ich dreh durch

warum funken die Hover nicht bei den Icons im Tab-Leiste?

CSS

/* Neuer Tab Tableiste Icon ändern */
toolbarbutton[id="tabs-newtab-button"] {
  list-style-image: none !important;
  background-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/neutab.png") !important;
  background-repeat: no-repeat !important;
  background-color: blue;
  fill: white !important;
  background-repeat: no-repeat !important;
  background-position: 10px 2px !important;
  background-size: 20px 20px !important;
  
}
toolbarbutton[id="tabs-newtab-button"]:hover {
  /*background-color: red !important;*/
  --toolbarbutton-hover-background: red !important;
  fill: white !important;
}

Alles anzeigen

auf diese 2 Arten funkt es nicht. Habe glaub auch nur mit background: red !important;

versucht.. funkt nicht.. ich weiss garnicht mehr auf wieviel Arten ich versucht habe.

2002Andreas

Zitat von omar1979

warum funken die Hover nicht bei den Icons im Tab-Leiste?

Weil dein Code so nicht stimmt.

Du nimmst ein eigenes weißes Icon, ergo brauchst du kein fill: white mehr.

Dann musst du dein Icon auch für hover einfügen.

Zeile 5 und 8 ist doppelt.

Zeile 13 - 17 passt so auch nicht.

Teste bitte:

CSS

/* Neuer Tab Tableiste Icon ändern */
#tabs-newtab-button.toolbarbutton-1 image.toolbarbutton-icon {
  list-style-image: none !important;
  background-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/neutab.png") !important;
  background-repeat: no-repeat !important;
  background-color: blue;
  background-position: 10px 2px !important;
  background-size: 20px 20px !important;  
}

#TabsToolbar #tabs-newtab-button:hover > image {
  background-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/neutab.png") !important;
  background-repeat: no-repeat !important;
  background-color: red !important;
  background-position: 10px 2px !important;
  background-size: 20px 20px !important;  
}

Alles anzeigen

omar1979

Zitat von 2002Andreas

Teste bitte:

Danke dir.

2002Andreas

Zitat von omar1979

Danke dir.

Gern geschehen

Funktionieren denn die Button jetzt alle so wie du es gerne wolltest?

omar1979

Zitat von 2002Andreas

Funktionieren denn die Button jetzt alle so wie du es gerne wolltest?

Ja danke. Menüleiste und Tableiste sind jetzt OK.

2002Andreas

Zitat von omar1979

Menüleiste und Tableiste sind jetzt OK.

omar1979

Hallo..

ich hab hier den Hintergrundfarb, Hoverfarb, Schriftfarb geändert und wollte den Separator auch weiss färben funkt aber nicht. Wobei ausblenden funkt.

Dann will ich das Icon vor dem "Tab suchen" etwas nach Links schieben funkt auch nicht. Schrift "Tab suchen" ist so gut oberhalb der anderen.

Danke für eure Hilfe.

CSS

#allTabsMenu-searchTabs {
  appearance: none !important;
  list-style-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/suchen.png") !important;
  background-repeat: no-repeat !important;
  min-height: 16px !important;
    padding-left: 16px !important;
    background-position: 0px 10px !important;
}
#allTabsMenu-searchTabs:hover {
  background-color: #3333FF !important;
}
#allTabsMenu-allTabsView > .panel-subview-body {
  background-color: blue !important;
  color: white !important;
}
#allTabsMenu-allTabsViewTabs > .all-tabs-item:hover {
  background-color: #3333FF !important;
}
#allTabsMenu-tabsSeparator {
  color: white !important;
}

Alles anzeigen

grisu2099

Bitte teste:

CSS

#allTabsMenu-tabsSeparator {
  border-top: 1px solid white !important;
}

Hättest du mit einem Blick in die Browser-Werkzeuge übrigens auch ganz schnell finden können...

omar1979

Zitat von grisu2099

die Browser-Werkzeuge übrigens auch ganz schnell finden können...

Danke. Hab ich ja die Bezeichnung ist im Code zuunterst. Aber ich hab nur mit Color und fill benützt

grisu2099

Für das Icon:

CSS

#allTabsMenu-searchTabs {
  appearance: none !important;
  list-style-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/suchen.png") !important;
  background-repeat: no-repeat !important;
  min-height: 16px !important;
    padding-left: 6px !important;
    background-position: 0px 10px !important;
}

Evtl. bei padding-left mit dem Wert noch basteln.

Zitat von omar1979

Aber ich hab nur mit Color und fill benützt

...und da war der Fehler. Separatoren müssen mit border angesprochen werden...

omar1979

Zitat von grisu2099

Separatoren müssen mit border angesprochen werden...

Danke.

Zitat von grisu2099

Evtl. bei padding-left mit dem Wert noch basteln.

Funkt nicht. Hatte ich schon getestet. Das Icon ist wie wenn es an dem Schrift "Tab suchen" geklemmt. Es bewegt sich mit.

grisu2099

Du willst also nur das Icon nach links haben?

Dann teste:

CSS

#allTabsMenu-searchTabs {
  appearance: none !important;
  list-style-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/suchen.png") !important;
  background-repeat: no-repeat !important;
  min-height: 16px !important;
    padding-left: 6px !important;
    background-position: 0px 10px !important;
}
#allTabsMenu-searchTabs > label:nth-child(2) {
margin-left: 10px !important;
}

Alles anzeigen

omar1979

Zitat von grisu2099

Dann teste:

Danke.

grisu2099

Gerne. Jetzt weißt du ja, wonach du suchen mußt...

omar1979

Hallo allen..

Wenn man zu viel Tabs offen hat, dann sieht man ja rechts und links von den Tabs jeweils ein Pfeil nach Links und eins nach Rechts. Mit dieser Code ins CSSshadow hat es mal geklappt.

CSS

/* TabLeiste Pfeile (nach Links und nach Rechts) ändern */
#tabbrowser-arrowscrollbox::part(scrollbutton-up) {
  list-style-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/Icons/arrow-left.png") !important;
  transform: scale(0.9, 0.9) !important;
  background-color: blue;
  margin-top: -6px !important;  
  margin-bottom: -1px !important;
  padding-top: 2px; 
  padding-bottom: 1px
}
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
  list-style-image: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/Icons/arrow-left.png") !important;
  transform: scale(0.9, 0.9) !important;
  background-color: blue;
  margin-top: -6px !important;  
  margin-bottom: -1px !important;
  padding-top: 2px; 
  padding-bottom: 1px
}
#tabbrowser-arrowscrollbox::part(scrollbutton-up):hover, 
#tabbrowser-arrowscrollbox::part(scrollbutton-down):hover {
  background-color: red !important;
}

Alles anzeigen

Aber jetzt funktioniert es nicht mehr.

Hat es was geändert? Wenn ich es mit Browser-Werkzeuge Stillbearbeitung teste, funkt die Code aber sonst nicht.

2002Andreas

Zitat von omar1979

Hat es was geändert?

Du hast das neue Script installiert?

Beitrag

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie @aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und @2002Andreas , @Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!

Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

Bei diesen Elementen…

BrokenHeart

18. Juni 2021 um 09:36

omar1979

Zitat von 2002Andreas

Du hast das neue Script installiert?

Da war ich nicht da und hab es nicht gesehen. Danke 2002Andreas aber es hat ja mehrere scripts welcher von denen wohl zu meins passt.

2002Andreas

Zitat von omar1979

welcher von denen wohl zu meins passt.

Nur das für shadow Einträge wie z.B. ::part

userChromeShadow.uc.js

omar1979

Zitat von 2002Andreas

userChromeShadow.uc.js

Besten Danke 2002Andreas jetzt funkts wieder.

Tableiste Änderungen

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Ähnliche Themen

Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Abstand zwischen Booksmarks verkleinern (Lesezeichen-Symbolleiste)

Separator zwischen Tableiste und Url-Leiste entfernen

Code Anpassung für Firefox 89

Kann mehrere Tabs nebeneinander nicht mehr öffnen!