Kacheln auf Bildschirm verändern plötzlich ihr Aussehen

Zitat von rekem

Wo kann ich

Per CSS Code in der userContent.css geht das mit diesem Code:

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

Zitat von 2002Andreas

Zitat von rekem

Wo kann ich

Per CSS Code in der userContent.css geht das mit diesem Code:

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

ich kenne mich mit CSS nicht aus , kann mir das jemand erklären bitte

Zitat von cska133

ich kenne mich mit CSS nicht aus

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"

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.

DANKE! klingt nicht kompliziert.

Falls etwas schief gehen sollte oder man entscheidet sich anders, dann die Datei userContent.css einfach löschen , richtig?

Man liest oft über Personalisierungsänderung über die Datei userContent.css. Bedeutet das dass wenn man diese Datei einmal hat , dann werden solche Änderungen in diese Datei - über den Codes - weitergespeichert, d.h. Code nach Code hinzugefügt? Oder erstellt man immer wieder neue .css Datei?

Zitat von 2002Andreas

Zusätzlich muss in about:config der Eintrag:

toolkit.legacyUserProfileCustomizations.stylesheets

auf true stehen.

Ohne diese Änderung würde der Code in der userContent.css Datei gar keine Auswirkung zeigen, verstehe ich das richtig?

Zitat von cska133

Falls etwas schief gehen sollte oder man entscheidet sich anders, dann die Datei userContent.css einfach löschen , richtig?

Richtig, oder in irgendwas anderes umbenennen. Du benötigst halt nach Änderungen (oder einem Löschen der Datei) einen Neustart von Firefox, weil Änderungen ausschließlich zum Programmstart von Firefox eingelesen und dann im Speicher behalten werden.

Zitat von cska133

Man liest oft über Personalisierungsänderung über die Datei userContent.css. Bedeutet das dass wenn man diese Datei einmal hat , dann werden solche Änderungen in diese Datei - über den Codes - weitergespeichert, d.h. Code nach Code hinzugefügt? Oder erstellt man immer wieder neue .css Datei?

Wenn du weitere Änderungen für Content-Seiten hast, gehören die alle in diese Datei, ja. Änderungen an der Firefox-Oberfläche hingegen würden in eine Datei mit dem Namen userChrome.css kommen. Bei vielen Änderungen könntest du diese theoretisch auch in beliebig viele andere Dateien auslagern und diese Dateien dann in die userContent.css respektive userChrome.css importieren. Aber über sowas braucht man sich keine Gedanken zu machen, solange es nicht wirklich viel wird.

Zitat von cska133

Ohne diese Änderung würde der Code in der userContent.css Datei gar keine Auswirkung zeigen, verstehe ich das richtig?

Korrekt. Auch hier wieder: Ein Neustart von Firefox ist erforderlich, damit die Änderung wirksam wird.

ok, danke.

Den Code oben, wird er bewirken, dass die Kacheln "voller" werden, oder auch dass sie kleiner werden? Ich erinnere mich, dass sie früher kleiner waren, so dass in einer Reihe mehrere gepasst haben

Zitat von cska133

so dass in einer Reihe mehrere gepasst haben

Dann brauchst du 2 Codes.

Einen, der mehr Kacheln nebeneinander setzt, und einen, der die Kacheln wieder kompl. ausfüllt.

Das sieht dann so aus:

Jetzt sind es 11 Kacheln statt 8.

Und das wäre der Code dazu:

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

Evtl. musst du in Zeile 6 den Wert für dich noch etwas verändern.

Zitat von 2002Andreas

Jetzt sind es 11 Kacheln statt 8.

Oder so mit 15 Kacheln:

/*Mehr Kacheln nebeneinander*/
.collapsible-section .section-body {
    width: 160% !important;
    margin-left: -290px !important;
  }

.outer-wrapper.newtab-experience .top-site-outer {
    width: 100px!important;
    padding-block: 2px 10px!important;  
  }
    
/*Inhalte wieder die ganze Breite vom Feld*/
.top-site-outer .tile .icon-wrapper {
    border-radius: 8px !important;
    width: 100% !important;
    height: 100% !important;
   }

Ich würde gerne eine weitere Möglichkeit einfügen: das Favicon der Seite ist defekt:

https://stabikat.staatsbibliothek-berlin.de/

Ich bekomme in Firefox als auch beim Lesezeichen nichts angezeigt. Könnte sich sowas auch auf die Kachel auswirken?

(unabhängig von dem, dass die Kacheln kleiner geworden sind)

Zitat von .DeJaVu

Könnte sich sowas auch auf die Kachel auswirken?

Ich bin mir nicht sicher, ob ich dich richtig verstanden habe.

Wenn nicht, dann sorry, uns vergiss bitte diesen Beitrag von mir.

Du kannst dir ja ein eigenes Icon auf der Seite Neuer Tab einstellen.

Sieht dann so aus:

li.top-site-outer:nth-child(28) > div:nth-child(1) > a:nth-child(1) {
background: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABbCAIAAACEdv4HAAAACXBIWXMAAAsTAAALEwEAmpwYAAADyElEQVR4nO2cMUwaURiAn20XLHSAwfN6aTvcAZOcERIHaUonGxIntYNxoCStbWqrQ01sdWmjJqZJbUwjmiYa0066qBGZJA1NStJrPDsJdyMgDrBw9NYOlxgCB3LcPSB575vIu8f735f3eLz3P0KH6/4LgBjXWt2BFoCd0QA7owF2RgPsjAY3VEv5H1+a3A9IhLbCoc3DskIUxxk7owF2RgPsjAbYGQ2wMxpgZzTAzmiAndEAO6MBdkYD7IwG2BkNsDMaYGc0wM5ogJ3RQP13BlqRinJCSGWyuXQ2X1ruYRkHQ5lvmgyJYhS6nJNiei/yizsREmJKtUIIAACAm2WeB/x9LKMnloE04iwV5W870f2jeCabq6c+xwvB1ysrC88eDPQ0EM5wtDkrtt93jguSrDXS/NJ27PCj1nfBQINzUkxPvVvPZHN9LCNJcrX5DAAYG/b5vC6SsJKEzYhOGowG5+MY/3523M0yB5H42ma4Rs2EmPL02hXhg0h87yh++cjBUE6acvfau7usDXdaJxqcJwL+pJh+HFyqMcIKHC9wvGAxmxw0xfFC2SPlhc/r+jA73pIlXcP3c2grPBpcvFL4koIklwmXEo2dPhqdP7/IV6sAj7qcpaI8PbdR+YM6nRQkeX5x29g26+HquS0V5eCrlfqHVxMcL5xf5Jv82b5inM8v8vCEFRICxMZVqeUsFeWpt+tQhQEAZ5Dbr6Tq3DZkSvexjJOmLGaTu9deWp4QUtGfp8oKZzE3e+lWd9Yv7GaZmcmRgvSvtDCTzZGEzWLuHBvxjY34puc2orFTJ001HKUx1J2XV3d1jjDHC6PBxbJCkrB1E1YAgIdlJgJ+N8twJ8nmnz3UnfdLdk76cbPM0GC/z+sqm8ZOmvJ5XQYGqhNjzs/VIAmbsl1VfdpNWN+8HIbaAVUgOjto6uvnqRpLVKtOILByQxaz6dPC0+avyfUAy3ki4G/PgySA5zw02A+pZf1AcXbQVHvOagUozu0sDNDMb0NxrpEqaAdgjfNBxMidnLHAcl7bDEtFzfng5gDLOZPNLa/uQmpcJxD3nspBZWZyuN3uq+Cu2/tH8dEnS3/abEm7Ttz1QA1QkOT9SJzjhVuWznt3uqDGqkTJtJcVwj1LlsUmCZvP2/NwwAU7TyAVZe5E+M0no7G/lU87WvJ/Q8oVh7vX7qQpkrDZ6ds6G0yK6Uw2dyamEmJKuQmvUbk1zpWQhI0krACA0myhxWy6zJadianSy9BMNpc5z4GG9j/t4txM8H4bDbAzGmBnNMDOaICd0QA7o8F/q55J1LtMVpYAAAAASUVORK5CYII=") no-repeat !important;
background-position: 2px -4px !important;
}

li.top-site-outer:nth-child(28) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1) {
 visibility: hidden !important;
}

In Zeile 1 musst du den Wert 28 für dich dann anpassen.

Das ist jetzt aber ein Bild, dass du dir erstellt hast? Ich wollte eher darauf hinaus, dass die Kacheln was anderes anzeigen, wenn sich auf der Seite was geändert hat oder fehlerhaft ist. Da ich das Favicon vorher nicht kannte, es ist auf 24x24 dimensioniert, dass Firefox mit den "neuen" Kacheln das Favicon anders anzeigt als vorher. Das Bild von ihm oben sieht wie ein aufgeblasenes, dadurch unscharfes, 16x16 aus.

Die Webseite gibt sogar einen Fehler aus, wenn man das Favicon direkt laden möchte.

Funktioniert: https://stabikat.staatsbibliothek-berlin.de/images/logo_sbb.png

Funktioniert nicht: https://stabikat.staatsbibliothek-berlin.de/favicon.ico

Fehler     
Ein - nicht näher zu bezeichnender - Fehler ist aufgetreten.     

We regret the inconvenience this may cause you.
Context: favicon.ico 

Die Wayback-Machine sagt, im Oktober 2020 war das Favicon schon defekt, irgendwo zwischen Jan'2020 und Oktober muss das passiert sein, weil:

https://web.archive.org/web/2020011403…pix/favicon.ico

ein 16x16 icon präsentiert, was ich nach dem obigen Bild schon vermutet hatte.

Da bleibt dann nur dein Vorschlag für das CSS übrig, um das zu beheben.

Zitat von .DeJaVu

Das ist jetzt aber ein Bild, dass du dir erstellt hast?

Ja, ausgeschnitten auf der Seite oben links.

Zitat von .DeJaVu

dass die Kacheln was anderes anzeigen, wenn sich auf der Seite was geändert hat oder fehlerhaft ist.

Sieht hier dann so aus ohne eigenes Bild.

Es wird der erste Buchstabe vom Titel benutzt.

Ok, das ist gut, wusste ich nicht, danke. Dann hat er ja jetzt zwei Möglichkeiten, einmal CSS oder das Lesezeichen löschen und neu setzen, falls letzteres das bestehende Favicon mit löschen sollte.

vielen Dank für den zusätzlichen Code um die Anzahl Kacheln in einer Reihe zu vergrößern, muß testen wenn ich wieder am PC bin.

Frage ist jetzt: wir haben 2 CSS Codes, wie integriert man sie in einer CSS Datei???

Zitat von cska133

Frage ist jetzt: wir haben 2 CSS Codes, wie integriert man sie in einer CSS Datei???

Hast du nicht beide Codes schon in der userContent.css? Siehe Beiträge #8 bzw. #9.

die Code sehe ich, in #2 und #8.

Die Frage ich wie soll der Inhalt der Datei aussehen? Den Text der beiden Codes nacheinander kopieren? Die Zeilen des Codes weiterführen, also wenn der 1 Code mit Zeile 9 endet, dann beginnt der 2. Code mit Zeile 10 oder wie?

Ich weiß dass solche Sachen strenge Regeln haben, sonst klappt es nicht.

Wäre schön wenn jemand die beiden Codes in #2 und #8 hier zusammen postet. Danke

Zitat von cska133

die beiden Codes in #2 und #8 hier zusammen postet. Danke

Hast du dir die beiden Codes mal ganz genau angesehen?

Dann würdest du feststellen, dass Code 2 bereits in Code 8 enthalten ist.

Beide Codes haben sogar eine Überschrift wofür sie sind.

Zitat von cska133

Die Frage ich wie soll der Inhalt der Datei aussehen? Den Text der beiden Codes nacheinander kopieren? Die Zeilen des Codes weiterführen, also wenn der 1 Code mit Zeile 9 endet, dann beginnt der 2. Code mit Zeile 10 oder wie?

Codes werden immer untereinander geschrieben. Das siehst du doch in den Beiträgen #8 und #9, wo du Codes für zwei unterschiedliche Zwecke hast. Wofür sie sind, steht zwischen /* und */. Was zwischen diesen Zeichen steht, ist ein Kommentar, der nur dazu dient, dass der Benutzer auch nach Wochen noch weiß, wozu die jeweiligen Codes dienen. Was zwischen diesen Zeichen steht, wird durch Firefox nicht ausgeführt. Es empfiehlt sich immer, Kommentare zu verwenden, insbesondere wenn du mal Codes übernimmst bzw. einträgst, die keine Kommentare enthalten. Der Kommentartext muss aber immer zwischen /* und */ stehen.

ah, sorry, hatte nicht gesehen dass die späteren Codes den ersten beinhalten. Cool, danke.

Also nur damit irgendwann weitere Codes hinzufüge.... ausgehend aus dem Code in #8, wenn ich also den nächsten Code eintrage, dann soll Zeile 16 leer bleiben und der nächste Code beginnt ab Zeile 17. Also immer eine leere Zeile zwischen den Codes, richtig?