- Firefox-Version
- Firefox 117 >
- Betriebssystem
- Windows 10
Ich habe hier mal diverse Codes erstellt, die die Tabs und diverse Icons in der Tableiste optisch verändern.
Evtl. kann der eine oder andere daraus ja etwas gebrauchen.
Über jedem Code steht ein Hinweis wofür er ist.
Alles was nicht erwünscht ist, einfach löschen oder auskommentieren.
Farben können beliebig verändert werden.
Die Werte können/müssen evtl. auch individuell noch etwas angepasst werden.
Hinweis!
Bitte nicht den kompletten Code verwenden, da sich einige Einträge überschneiden bezüglich abgerundet oder eckig.
Einzutragen sind die Codes 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.
Beispiel abgerundete Tabs mittig in der Tableiste:
Eckige Tabs mittig in der Tableiste:
Abgerundete Tabs links bündig (Standard)
Eckige Tabs links bündig (Standard)
CSS
/*Höhe und Abstand der Tableiste*/
#TabsToolbar {
height: 29px !important;
padding-top: 3px !important;
}
/*Tab Inhalt Abstände*/
:root {
--proton-tab-radius: 0px !important;
--proton-tab-block-margin: 0px !important;
--inline-tab-padding: 10px !important;
}
/*Tableiste - leeres Feld vor dem ersten Tab entfernen*/
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
/*Höhe der Tabs*/
.tabbrowser-tab {
min-height: 25px !important;
max-height: 25px !important;
box-shadow: none !important;
}
/*Tabs in Tableiste mittig*/
scrollbox[smoothscroll="true"] > slot {
display: contents !important;
}
scrollbox[smoothscroll="true"] {
justify-content: center !important ;
}
/*Tabtext zentriert*/
.tab-label-container {
height: unset !important;
margin-inline-end: 7px;
display: grid !important;
justify-items: safe center !important;
justify-content: safe center !important;
}
/*Tabinhalt auf ganze Tabbreite*/
.tab-label-container {
margin: auto !important;
}
/*Tab schließen Button verschoben*/
.tab-close-button {
flex-shrink: 0 !important;
margin-right: -6px !important;
}
/*Tab schließen Button HG bei hover rot und das X weiß*/
.tab-close-button[fadein]:hover {
fill: white !important;
background: red !important;
}
/*Tab schließen Button immer auf allen Tabs anzeigen*/
#TabsToolbar #tabbrowser-tabs .tab-close-button {
display: flex !important;
}
/*Tab schließen Button immer anzeigen, nicht aber auf angepinnten Tabs*/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
display: flex !important;
}
/*Tabtext beim Laden blau und fett*/
.tabbrowser-tab[busy] .tab-label {
color: blue !important;
font-weight: bold !important;
}
/*Abgerundete Tabs*/
.tab-background {
border-radius: 80px !important;
}
/*Abgerundeter Schließen Button*/
.tab-close-button {
border-radius: 80px !important;
}
/*Eckige Tabs ohne HG Schatten*/
.tab-background {
box-shadow: none !important;
border-radius: 0px !important;
}
/*Alle Tabs ausgewählt HG grün*/
#main-window .tab-background[multiselected] {
background: green !important;
}
/*Alle Tabs ausgewählt Schrift gelb und fett auf Ursprungstab*/
#main-window .tabbrowser-tab[visuallyselected][multiselected] {
color: yellow !important;
font-weight: bold !important;
}
/*Alle Tabs ausgewählt hover Schrift rot und fett auf Ursprungstab*/
#main-window .tabbrowser-tab[visuallyselected]:hover[multiselected] {
color: red !important;
font-weight: bold !important;
}
/*Aktiver Tab HG orange*/
.tabbrowser-tab[visuallyselected] .tab-background {
background: orange !important;
}
/*Aktiver Tab hover HG grün*/
.tabbrowser-tab[visuallyselected]:hover > .tab-stack > .tab-background {
background: green !important;
}
/*Aktiver Tab hover Schrift weiß*/
.tabbrowser-tab[visuallyselected]:hover {
color: white !important;
}
/*Aktiver Tab Schatten außen rot*/
#TabsToolbar .tabbrowser-tab[visuallyselected] > .tab-stack > .tab-background {
box-shadow: 0 0 10px red !important;
}
/*Aktiver Tab Schatten innen rot*/
#TabsToolbar .tabbrowser-tab[visuallyselected] > .tab-stack > .tab-background {
box-shadow: inset 0 0 8px red !important;
}
/*Inaktiver Tab HG hellgrau*/
.tabbrowser-tab:not([visuallyselected]) > .tab-stack > .tab-background {
background: lightgrey !important;
}
/*Inaktiver Tab Schrift schwarz = Standard*/
.tabbrowser-tab:not([visuallyselected]) {
color: black !important;
}
/*Inaktiver Tab hover HG blau*/
.tabbrowser-tab:not([visuallyselected]):hover > .tab-stack > .tab-background {
background: blue !important;
}
/*Inaktiver Tab hover Schrift weiß*/
.tabbrowser-tab:not([visuallyselected]):hover {
color: white !important;
}
/*Inaktiver Tabtext kleiner*/
.tabbrowser-tab:not([selected]) .tab-label {
font-size: 90% !important;
}
/*Das X am Ende des Tabtext nach rechts verschoben*/
.tab-label-container[textoverflow]:not([pinned]) {
mask-image: unset !important;
margin-right: 7px !important;
}
/* Angepinter HG hellgrün*/
.tabbrowser-tab .tab-content[pinned] {
background: lightgreen !important;
}
/* Angepinter hover HG gelb */
.tabbrowser-tab .tab-content[pinned]:hover {
background: yellow !important;
}
/*Abstand vom ersten Tab zum letzten angepinnten Tab schmaler*/
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 1px !important;
}
/*Tabbreite schmaler*/
.tabbrowser-tab:not([pinned]) {
min-width: 155px !important;
flex-grow: 0 !important;
}
/*Tab Abstand nebeneinander*/
.tabbrowser-tab {
padding-inline: .9px !important;
}
/*Damit wird der Tabtext nicht blasser, wenn kein Fokus auf dem Fx ist*/
.tab-label {
opacity: 1 !important;
}
/*Tabtext wird am Ende nicht ausgeblendet*/
.tabbrowser-tab .tab-label-container {
mask-image: none !important;
}
/*Schatten um aktiven Tab entfernt*/
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
box-shadow: none !important;
}
/*Neuer Tab Button Größe ändern*/
#TabsToolbar #tabs-newtab-button {
min-height: 23px !important;
max-height: 23px !important;
margin-top: 4px !important;
}
/*Neuer Tab Button verschieben*/
#TabsToolbar #tabs-newtab-button {
margin-top: -15px !important;
margin-bottom: -15px !important;
margin-left: 0px !important;
}
/*Eckiger Neuer Tab Button rot, das X weiß*/
#TabsToolbar #tabs-newtab-button {
background: red !important;
fill: white !important;
}
/*Eckiger Neuer Tab Button das X bei hover weiß, der HG blau*/
#TabsToolbar #tabs-newtab-button:hover,
#TabsToolbar #tabs-newtab-button:hover > image {
background: blue !important;
}
/*Runder Neuer Tab Button rot, das X weiß*/
#TabsToolbar #tabs-newtab-button > image {
background: red !important;
fill: white !important;
border-radius: 80px !important;
}
/*Runder Neuer Tab Button das X bei hover weiß, der HG blau*/
#TabsToolbar #tabs-newtab-button:hover > image {
background: blue !important;
}
/*Neuer Tabbutton hover HG blau, funktioniert nur, ohne eigenen HG für den Button*/
#TabsToolbar #tabs-newtab-button {
--toolbarbutton-hover-background: rgb(2, 80, 187) !important;
}
/*2te Zeile im Tab bei Ton ausgeblendet, alternativ in about:config*/
label.tab-icon-sound-label {
display: none !important;
}
/*Lautsprechersymbol auf Tab größer und grün*/
.tab-icon-overlay {
fill: green !important;
transform: scale(1.7) !important;
}
/*Hintergrund der Buttons in der Tableiste bei Überlauf und hover rot*/
#TabsToolbar {
--toolbarbutton-hover-background: red !important;
}
/*Scrollbutton vor/zurück Icon weiß HG rot*/
toolbarbutton#scrollbutton-up image.toolbarbutton-icon,
toolbarbutton#scrollbutton-down image.toolbarbutton-icon {
background: red !important;
fill: white !important;
}
/*Alle Tabs auflisten Icon weiß bei hover*/
#alltabs-button:hover {
fill: white !important;
}
/*Button für Neuer Tab weiß bei hover*/
#tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover {
fill: white !important;
}
/*Abstand der Icons im Überlauf*/
#TabsToolbar {
--toolbarbutton-inner-padding: 1px!important;
}
/*Abstand Neuer Tab Button im Überlauf*/
#new-tab-button, #alltabs-button {
padding-bottom: 1px!important;
}