Firefox View

2002Andreas

Zitat von FuchsFan

wirkt ja übergreifend auch auf andere Menüs.

In diesem Fall das Problem mit den eigenen Icons die bei hover nicht angezeigt werden, wenn man den Hintergrund ändert

FuchsFan

Zitat von 2002Andreas

In diesem Fall das Problem mit den eigenen Icons die bei hover nicht angezeigt werden, wenn man den Hintergrund ändert

Genau so ist es. Ich habe schon versucht hieraus etwas abzuleiten, aber ohne Erfolg.

Code

:host {
 --page-nav-button-border-radius: var(--button-border-radius);
 --page-nav-button-text-color: var(--button-text-color-ghost);
 --page-nav-button-text-color-hover: var(--button-text-color-ghost-hover);
 --page-nav-button-text-color-active: var(--button-text-color-ghost-active);
 --page-nav-button-background-color: var(--button-background-color-ghost);
 --page-nav-button-background-color-hover: var(--button-background-color-ghost-hover);
 --page-nav-button-background-color-active: var(--button-background-color-ghost-active);
 --page-nav-button-background-color-selected: color-mix(in srgb, currentColor 8%, transparent);
 --page-nav-button-padding: var(--space-small) var(--space-medium);
 --page-nav-button-border-color-hover: var(--button-border-color-ghost-hover);
 --page-nav-button-border-color-active: var(--button-border-color-ghost-active);
 --page-nav-button-indicator-color: var(--color-accent-primary);
 --page-nav-button-indicator-width: var(--dimension-4);
 border-radius: var(--border-radius-small);
}

Alles anzeigen

FuchsFan

Dieses wäre noch eine Variante.

CSS

/* Firefox View */

@-moz-document url-prefix("about:firefoxview") {

/* Inaktive Buttons */
:root {
   --button-background-color-ghost: #e0e0e0 !important;
}

/* Firefox View Buttons */
moz-page-nav-button {
   --page-nav-button-border-radius: 0 60px 60px 0 !important;
   /* Farben */
   --page-nav-button-background-color-selected: red !important;
   --page-nav-button-background-color-hover: #77b5fe !important;
   --page-nav-button-background-color-active: greenyellow !important;
   /* Textfarbe */
   --page-nav-button-text-color: black !important;
   --page-nav-button-text-color-hover: #480607 !important;
   --page-nav-button-text-color-active: blue !important;
   border: 2px solid grey !important;
   border-radius: 60px  !important;
   background-color: #e0e0e0 !important;
}

/* Textfarbe im aktiven Button */  
button[selected] {
   color: yellow !important;  
}
  
  /* blauer Rand links im aktiven Button ausgeblendet */
    @media not (prefers-contrast) {
       button::before {
       content: "";
       display: none !important;
    }
    }
	
	/* Original-Icon ausblenden */
	.page-nav-icon {
       display: none !important; 
    }

  moz-page-nav-button[data-l10n-id="firefoxview-overview-nav"] {
    background-image: url("../Icons/1213.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-opentabs-nav"] {
    background-image: url("../Icons/009.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-recently-closed-nav"] {
    background-image: url("../Icons/0013.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-synced-tabs-nav"] {
    background-image: url("../Icons/0059.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-history-nav"] {
    background-image: url("../Icons/chronik.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
}

Alles anzeigen

2002Andreas

Zitat von FuchsFan

Dieses wäre noch eine Variante.

Auch nicht schlecht

Dann hat edvoldi ja Auswahl.

FuchsFan

Zitat von 2002Andreas

Auch nicht schlecht

2002Andreas

Die OT-Beiträge habe ich mal verschoben, sind jetzt hier zu finden:

Beitrag

Off-Topic aus: Firefox View

[…]

Genau, gleich legt mein Schiff ab

edvoldi

9. Juni 2026 um 18:34

grisu2099

Ich hab da nochmal gebastelt...

So sieht das dann in den Preferences aus. Das gleiche Prinzip funktioniert auch bei about:Addons und bei FirefoxView. Es muß nur das "title"-Argument des jeweiligen Buttons geändert/angepaßt werden. Eigene Icons, Hoverfarbe (auch für den selektierten Button!) und andere Farbe für den selektierten Button sind damit möglich

CSS

	:root {
		--background-color-canvas: rgb(40,40,42) !important;				/* Hintergrundfarbe für die ganze Seite */
		--button-background-color-hover: rgb(255,99,71) !important;			/* Hoverfarbe für die Navi-Buttons links */
	}

			/** Allgemeines **/
	#categories {
		border-right: 2px ridge rgb(0,128,0) !important;
		width: 346px !important;
		padding: 30px 0 0 !important;
		margin: 0 0 0 15px !important;
	}
		/* Überschrift links in Navigation */
	.page-nav-heading-wrapper {
		border-bottom: none !important;
		gap: 0 !important;
		height: 48px !important;
		padding: 0 10px 20px !important;
		margin: 0 !important;
		& > .logo {
			height: 54px !important;
			width: 48px !important;
			background: url("file:///E:/ICONS/Nightly-Logo.svg") no-repeat center -6px !important;
			background-size: 48px !important;
			margin: -3px 0 0 -2px !important;
		}
	}
	#page-nav-heading {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 15px !important;
		background-color: rgb(144,238,144) !important;
		color: #000000 !important;
		font-size: 20px !important;
		font-weight: 600 !important;
		text-align: center !important;
		line-height: 38px !important;
		height: 40px !important;
		padding: 0 50px !important;
		margin: 4px auto 0px 29px !important;
	}
	
		/* Die Buttons */
	.page-nav-icon {
		display: none !important;
	}
	nav {
		--page-nav-button-gap: 10px !important;
	}
	button[role="tab"] {
		--page-nav-button-background-color: rgb(222,184,135) !important;
		--page-nav-button-background-color-selected: rgb(144,238,144) !important;
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background-position: 10px 7px !important;
		background-repeat: no-repeat !important;
		color: #000000 !important;
		font-weight: bold !important;
		max-width: 335px !important;
		padding: 5px 0 5px 36px !important;
		margin: 0 !important;
		&:hover {
			--page-nav-button-background-color: rgb(255,99,71) !important;
			--page-nav-button-background-color-selected: rgb(255,99,71) !important;
		}
		&::before {
			display: none !important;
		}
	}
	button[role="tab"][title="Konto und Synchronisation"] {
		background-image: url("file:///E:/ICONS/FF/Sync.png") !important;
	}
	button[role="tab"][title="Startseite"] {
		background-image: url("file:///E:/ICONS/FF/Home.png") !important;
	}
	button[role="tab"][title="Suche"] {
		background-image: url("file:///E:/ICONS/FF/search.png") !important;
	}
	button[role="tab"][title="Datenschutz & Sicherheit"] {
		background-image: url("file:///E:/ICONS/FF/padlock.png") !important;
	}
	button[role="tab"][title="Passwörter und Autovervollständigung"] {
		background-image: url("file:///E:/ICONS/FF/Passwort.png") !important;
	}
	button[role="tab"][title="Erscheinungsbild"] {
		background-image: url("file:///E:/ICONS/FF/Palette.png") !important;
	}
	button[role="tab"][title="Downloads"] {
		background-image: url("file:///E:/ICONS/FF/download3.png") !important;
	}
	button[role="tab"][title="Tabs und Surfen"] {
		background-image: url("file:///E:/ICONS/FF/tab-blau.png") !important;
	}
	button[role="tab"][title="Barrierefreiheit"] {
		background-image: url("file:///E:/ICONS/FF/Barrierefreiheit.png") !important;
	}
	button[role="tab"][title="Sprachen"] {
		background-image: url("file:///E:/ICONS/FF/Sprachen.png") !important;
	}
	button[role="tab"][title="KI-Einstellungen"] {
		background-image: url("file:///E:/ICONS/FF/KI16.png") !important;
	}
	button[role="tab"][title="Berechtigungen und Daten"] {
		background-image: url(chrome://browser/skin/permissions.svg) !important;
		-moz-context-properties: fill !important;
		fill: rgb(65,105,225) !important;
	}
	button[role="tab"][title="Firefox Labs"] {
		background-image: url("file:///E:/ICONS/FF/Experimente.png") !important;
	}
	button[role="tab"][title="Über Nightly"] {
		background-image: url("file:///E:/ICONS/FF/Nightly.png") !important;
	}
	#addonsButton {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background: rgb(95,158,160) url("file:///E:/ICONS/FF/Addons.png")  no-repeat 10px 7px !important;
		color: #000000 !important;
		font-weight: bold !important;
		padding: 0 0 0 36px !important;
		margin: 0 !important;
	}
	#helpButton {
		border: 2px ridge rgb(211,211,211) !important;
		border-radius: 10px !important;
		background: rgb(95,158,160) url("file:///E:/ICONS/FF/Nightly.png")  no-repeat 10px 7px !important;
		color: #000000 !important;
		font-weight: bold !important;
		padding: 0 0 0 36px !important;
		margin: 0 !important;
	}
	.moz-page-nav-link {
		font-weight: bold !important;
		padding: 3px 0 !important;
	}
	#addonsButton:hover,
	#helpButton:hover {
		background-color: rgb(255,99,71) !important;
	}
		/* Trennlinie */
	.nav-separator,
	nav > hr {
		border-top: 2px ridge rgb(0,150,0) !important;
		width: 336px !important;
		height: 0px !important;
		margin: 5px 0 !important;
	}
	nav > hr {
		margin: 0 0 10px !important;
	}

Alles anzeigen

Sören Hentzschel

Zitat von grisu2099

Das gleiche Prinzip funktioniert auch bei about:Addons und bei FirefoxView.

… sowie about:policies und Stand heute noch nicht, aber in Zukunft about:debugging.

Wobei es nur mit dem Code aus deinem Beitrag bei mir nicht so wie in deinem Screenshot aussieht, weder in Firefox 152 noch in Firefox Nightly. Ich denke, da fehlt etwas …

grisu2099

Gut zu wissen - so weit war ich noch nicht...

grisu2099

Zitat von Sören Hentzschel

Wobei es nur mit dem Code aus deinem Beitrag bei mir ganz anders als in deinem Screenshot aussieht …

Hast du einen Screenshot - damit ich weiß, was da an Code noch fehlt. Ich hatte das aus meinem Komplett-Code für about:preferences rauskopiert...

Ergänzung: Dieser Code ist für die Nightly gebastelt - evtl. erklärt das auch Abweichungen...

Sören Hentzschel

Klar. So sieht es mit deaktiviertem Nova-Design aus:

So sieht es mit aktiviertem Nova-Design aus:

Icons habe ich für die Screenshots jetzt keine hinterlegt, da sind also die Standard-Icons zu sehen. Die Bilder zeigen Firefox Nightly.

2002Andreas

Auch hier ohne Icons im Nightly:

grisu2099

Zitat von 2002Andreas

Auch hier ohne Icons im Nightly

Logisch, da muß natürlich der Pfad angepaßt werden...

Aber immerhin sieht es ansonsten so aus wie bei mir. Keine Ahnung, was da bei Sören anders ist.

Mittlerweile auch in der 152.0.1 bei about:preferences getestet: Funktioniert auch dort...

edvoldi

Hallo grisu2099,
danke für diese Variante.
Ich habe sie unter about:preferences getestet.

CSS

/***   AGENT_SHEET   *********************/
/***   Geändert von EDV-Oldie   **********/
/***   Letzte Änderung am 22.06.2026   ***/
/***   https://www.camp-firefox.de/forum/thema/130540-about-seiten-mit-css-codes-anpassen/   */

@-moz-document	url-prefix(about:preferences) { 

	hbox {
    background-color: darkgray !important;
    }
	#categories {
	width: 16vw !important;
	}

	#search-container,
	.main-content {
    background-color: silver !important;
    }


/* Die Buttons */
	.page-nav-icon {
		display: none !important;
	}
	nav {
		--page-nav-button-gap: 10px !important;
	}
	button[role="tab"] {
		--page-nav-button-background-color: gainsboro !important;
		--page-nav-button-background-color-selected: green !important;
		border-radius: 60px !important;
		border: 1px solid white !important;
		background-position: 10px 7px !important;
		background-repeat: no-repeat !important;
		color: black !important;
		padding: 5px 0 5px 36px !important;
		margin: 0 !important;
		&:hover {
			--page-nav-button-background-color: rgb(255,99,71) !important;
			--page-nav-button-background-color-selected: yellow !important;
		}
		&::before {
			display: none !important;
		}
	}
	button[role="tab"][title="Konto und Synchronisation"] {
		background-image: url("../../../Icons/sync_gold.png")  !important;
	}
	button[role="tab"][title="Startseite"] {
		background-image: url("../../../Icons/homepage.png") !important;
	}
	button[role="tab"][title="Suche"] {
		background-image: url("../../../Icons/suchen.png") !important;
	}
	button[role="tab"][title="Datenschutz & Sicherheit"] {
		background-image: url("../../../Icons/private_2.png") !important;
	}
	button[role="tab"][title="Passwörter und Autovervollständigung"] {
		background-image: url("../../../Icons/enigmail_16.png") !important;
	}
	button[role="tab"][title="Erscheinungsbild"] {
		background-image: url("../../../Icons/config_bild.png") !important;
	}
	button[role="tab"][title="Downloads"] {
		background-image: url("../../../Icons/up_down_1.png") !important;
	}
	button[role="tab"][title="Tabs und Surfen"] {
		background-image: url("../../../Icons/tabnew_1.png") !important;
	}
	button[role="tab"][title="Barrierefreiheit"] {
		background-image: url("../../../Icons/Bild60.png") !important;
	}
	button[role="tab"][title="Sprachen"] {
		background-image: url("../../../Icons/wörterbücher.png") !important;
	}
	button[role="tab"][title="KI-Einstellungen"] {
		background-image: url("../../../Icons/ki.png") !important;
	}
	button[role="tab"][title="Berechtigungen und Daten"] {
		background-image: url("../../../Icons/datenschutz.png") !important;
	}
	button[role="tab"][title="Firefox Labs"] {
		background-image: url("../../../Icons/browser-inhaltswerkzeuge.png") !important;
	}
	button[role="tab"][title="Über Nightly"] {
		background-image: url("../../../Icons/firefox_nightly.png") !important;
	}
	button[role="tab"][title="Mehr von Mozilla"] {
		background-image: url("../../../Icons/protected.png") !important;
	}
	
   #addonsButton {
    border-radius: 60px !important;
	border: 1px solid white !important;
	padding-left: 25px !important;
    background: gainsboro url("../../../Icons/addons.png") no-repeat !important;
    background-position: 5px 5px !important;
	}
	#addonsButton:hover {
    border-radius: 60px !important;
	border: 1px solid white !important;
    background: skyblue url("../../../Icons/addons.png") no-repeat !important;
    background-position: 5px 5px !important;
	}


    #helpButton {
    border-radius: 60px !important;
	border: 1px solid white !important;
	padding-left: 25px !important;
    background: gainsboro url("../../../Icons/hilfe.png") no-repeat !important;
    background-position: 5px 5px !important;
	}
	#helpButton:hover {
	border-radius: 60px !important;
	border: 1px solid white !important;
    background: skyblue url("../../../Icons/hilfe.png") no-repeat !important;
    background-position: 5px 5px !important;
	}
	
	
	.moz-page-nav-link {
		padding: 3px 2px !important;
	}

		/* Trennlinie */
	.nav-separator,
	nav > hr {
		border-top: 2px ridge rgb(0,150,0) !important;
		width: 336px !important;
		height: 0px !important;
		margin: 5px 0 !important;
	}
	nav > hr {
		margin: 0 0 10px !important;
	}

Alles anzeigen

Mir gelingst es aber nicht eine Hover Farbe für die nicht aktive Button zu ändern.
Es wird bei mir immer ein Grauton angezeigt!
Gruß EDV-Oldie

grisu2099

Zitat von edvoldi

Mir gelingst es aber nicht eine Hover Farbe für die nicht aktive Button zu ändern.

Weil du die Zeilen 1-4 aus meinem Code weggelassen hast...

Zeile 2 ist nicht so wichtig, aber die anderen.

Firefox View

Off-Topic aus: Firefox View

Ähnliche Themen

Firefoxview Button Strich rechts daneben entfernen

Firefox 149.0beta9 Schriftfarbe der Tab im Split-View-Modus ändern

Natives Split View im Firefox

Titelleiste color nicht alle Buttons gleiche Farbe