Änderungen der Kachelansicht bei Startseite und neuem Tab

Skippy

Hallo!

Mit dem aktuellen Update auf die Firefox-Version 136.0 hat sich die Seite mit den Kacheln total verändert.
Für die Startseite und für neue Tabs habe ich die Variante mit den Verknüpfungen ausgewählt. Auf allen Seiten werden dann immer 4 Zeilen mit je 8 Website-Logos/Kacheln angezeigt.
Diese Kacheln sind nun viel kleiner. Viel zu klein für meinen Geschmack. Außerdem sind die Abstände zwischen den Zeilen vergrößert worden. Die Zeilen sind nun so weit auseinander, dass beim Laptop die letzte Reihe nur noch halb zu sehen ist. Am PC-Monitor ist sie zwar komplett da, aber es sieht insgesamt alles trotzdem blöd aus.
Außerdem sind auf der Seite nun oben groß das Firefox-Logo und der Namensschriftzug eingefügt worden. Das brauche ich nicht und es nimmt einfach nur Zeilenplatz weg.

Meine Fragen daher nun:
Wie bekomme ich das Logo und den Schriftzug weg?
Wie können die Kacheln wieder größer gemacht werden?
Wie kann der Zeilenabstand wieder verringert werden?

Es wäre toll, wenn jemand eine Lösung für diese Dinge hätte.
Grüße, Skippy

2002Andreas

Zitat von Skippy

Wie bekomme ich

Meinst du das so?

Wenn ja, dann teste bitte:

CSS

@-moz-document url(about:newtab), url(about:home) {

.logo-and-wordmark-wrapper {
  display: none !important;
}
  
li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
}
	
.top-site-outer .tile .icon-wrapper {  
  min-width: 100% !important;
  min-height: 100% !important;
}

.top-site-outer .title.pinned span {
  padding: 0 0px !important;
}
}

Alles anzeigen

Tigerkatze58

Hallo,

ich habe die gleichen Fragen wie Skippy.

Was mache ich mit dieser CSS? Gibt es eine Anleitung?

Danke!

2002Andreas

Zitat von Tigerkatze58

Was mache ich mit dieser CSS? Gibt es eine Anleitung?

Einzutragen in die userContent.css

Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userContent.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 userContent.css ab.
Danach mußt du den Fx 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"

Unter Windows 11 befindet sich der Eintrag "Optionen" unter dem 3 Punkte Menü.

Wo finde ich meinen Profilordner

Eine genaue Beschreibung dazu befindet sich auch unter diesem Link ab Abschnitt 2.2:

Videoanleitung für die userChrome.css und mehr

Zusätzlich muss in about:config der Eintrag:

toolkit.legacyUserProfileCustomizations.stylesheets

auf true stehen.

Tigerkatze58

Vielen Dank für die Anleitung.

Dann werde ich das mal ausprobieren.

2002Andreas

Zitat von Tigerkatze58

Dann werde ich das mal ausprobieren.

Mach es bitte ganz in Ruhe, das sieht nur so kompliziert aus

Sören Hentzschel

Zitat von Skippy

Außerdem sind auf der Seite nun oben groß das Firefox-Logo und der Namensschriftzug eingefügt worden.

Das ist schon seit vielen Jahren auf der Firefox-Startseite. Lediglich die Position wurde verändert.

Tigerkatze58

Zitat von 2002Andreas

Zitat von Tigerkatze58

Dann werde ich das mal ausprobieren.

Mach es bitte ganz in Ruhe, das sieht nur so kompliziert aus

Danke, hat alles geklappt

2002Andreas

Zitat von Tigerkatze58

Danke, hat alles geklappt

Gern geschehen

Skippy

Zitat von 2002Andreas

Zitat von Skippy

.....

Meinst du das so?

Wenn ja, dann teste bitte:

CSS

@-moz-document url(about:newtab), url(about:home) {

.logo-and-wordmark-wrapper {
  display: none !important;
}
  
li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
}
	
.top-site-outer .tile .icon-wrapper {  
  min-width: 100% !important;
  min-height: 100% !important;
}

.top-site-outer .title.pinned span {
  padding: 0 0px !important;
}
}

Alles anzeigen

Ja, genau. Das trifft genau das, was ich nun brauche.
Zuvor hatte ich im alten Code noch einen dickeren weißen Rahmen um die einzelnen Kacheln. Ein Beispielbild ist beigefügt.
Wie bekomme ich den jetzt noch drumherum?
Der alte Code sah so aus. Ich habe mit Teilen von dem gerade etwas herumexperimentiert, aber es ist nie so richtig geworden, wie es sollte. Damals sind die originalen Kacheln noch viel größer gewesen, daher in diesem Code die Verkleinerung auf 75%.

CSS

@-moz-document url(about:newtab), url(about:home) {
    
/*Größe der Symbole in den Kacheln auf Startseite*/
.top-site-outer .tile .icon-wrapper {
  border-radius: 8px !important;
  width: 75% !important;
  height: 75% !important;
  }
}

Beispiel:

2002Andreas

Zitat von Skippy

eine dickeren weißen Rahmen um die einzelnen Kacheln.

Zeile 14 + 15 ändern auf 75% ergibt:

Skippy

Dann sind die farbigen Inhalte der Kacheln ja aber wieder kleiner.
Geht es vielleicht irgendwie, dass diese auf 100% bleiben können und dann kommt zusätzlich noch ein Rahmen drum?
Oder die farbigen Kacheln werden etwa auf 90% verkleinert und um diese lässt sich noch ein Rahmen basten, so dass alles zusammen dann vielleicht eine Größe von 105 oder 110% hat?

2002Andreas

Zitat von Skippy

zusätzlich noch ein Rahmen drum?

Teste wieder:

CSS

@-moz-document url(about:newtab), url(about:home) {

.logo-and-wordmark-wrapper {
  display: none !important;
}
  
li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;  
}
	
.top-site-outer .tile .icon-wrapper {  
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 8px !important;
}
  
.top-site-outer .rich-icon {
  border: 5px solid white !important;
  border-radius: 8px !important;
}

.top-site-outer .title.pinned span {  
  padding: 0 0px !important;
  }
}

Alles anzeigen

Skippy

Super, jetzt passt alles.
Den Wert in Zeile 16 habe ich von 8 noch auf 15 erhöht und jetzt sieht wieder alles schick aus.

Tausend Dank für deine Hilfe!

2002Andreas

Zitat von Skippy

Tausend Dank für deine Hilfe!

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

KurtK.

Zitat von 2002Andreas

Zitat von Tigerkatze58

Was mache ich mit dieser CSS? Gibt es eine Anleitung?

Einzutragen in die userContent.css
Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userContent.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 userContent.css ab.
Danach mußt du den Fx neu starten.
...

Hallo Andreas, vielen Dank für die Anleitung.

Ich habs genau so gemacht, aber leider hat sich nichts geändert. Ich hatte bereits eine usercontent.css mit folgendem Inhalt:

CSS

@-moz-document url(about:newtab), url(about:home) {
    
/*Inhalte wieder die ganze Breite vom Feld*/
.top-site-outer .tile .icon-wrapper {
  border-radius: 8px !important;
  width: 100% !important;
  height: 100% !important;
}
}

Daran habe ich zunächst einmal Deinen obigen Code hinten dran gehangen. Leider ohne dass sich etwas geändert hat. Dann habe ich Deinen code alleine in die usercontent.css eingespeichert:

CSS

@-moz-document url(about:newtab), url(about:home) {

.logo-and-wordmark-wrapper {
  display: none !important;
}
  
li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
}
	
.top-site-outer .tile .icon-wrapper {  
  min-width: 100% !important;
  min-height: 100% !important;
}

.top-site-outer .title.pinned span {
  padding: 0 0px !important;
}
}

Alles anzeigen

Auch so bleibt alles beim alten.

Der Eintrag in der about:config war bereits auf True. (toolkit.legacyUserProfileCustomizations.stylesheets)

Hast Du eine Idee, warum meine icons klein bleiben?

Viele Grüße!

2002Andreas

Zitat von KurtK.

warum meine icons klein bleiben?

So sieht das mit dem ersten Code hier aus:

Und so mit dem zweiten:

Beide funktioniern also einwandfrei.

Zitat von KurtK.

Ich hatte bereits eine usercontent.css

Die Datei heißt:

userContent.css

also mit einem großen C.

Sieht das bei dir im Ordner chrome auch so aus?

michael_fox

Entschuldigt bitte, aber die Änderungen der userContent.css sind in diesem Fall absolut unsinnig.

Öffnet einfach die Konfiguration über about:config ,sucht den Eintrag

browser.newtabpage.activity-stream.newtabLayouts.variant-b

und ändert diesen von true auf false

damit ist der Firefox-Schriftzug weg und die Icons haben wieder die gewohnte Größe.

Sören Hentzschel

Hallo,

Zitat von michael_fox

sind in diesem Fall absolut unsinnig.

Eine solche Formulierung ist unnötig abwertend gegenüber den Helfern dieses Forums.

Zitat von michael_fox

damit ist der Firefox-Schriftzug weg

Nein, ist er nicht, sondern einfach nur wieder wie vorher positioniert.

Zitat von michael_fox

Öffnet einfach die Konfiguration über about:config ,sucht den Eintrag
browser.newtabpage.activity-stream.newtabLayouts.variant-b
und ändert diesen von true auf false

Man kann es vielleicht schon am Namen dieses Schalters erkennen, aber diese Option ist nicht dafür gedacht, dauerhaft vorhanden zu bleiben. Es wurden mehrere Varianten mit jeweils einem Teil der Nutzer getestet und was man nun in Firefox sieht, ist das „Gewinner“-Layout. Das heißt, die anderen Varianten werden wahrscheinlich aus Firefox verschwinden.

2002Andreas

Zitat von michael_fox

damit ist der Firefox-Schriftzug weg

Warum hast du das nicht vorher mal selber getestet?

Skippy 5. März 2025 um 16:52