Änderungen der Kachelansicht bei Startseite und neuem Tab

Drachen

Zitat von Sören Hentzschel

Der von mir bereitgestellte Code funktioniert bei mir einwandfrei und bietet genau diese Flexibilität, je nach Fensterbreite eine passende Anzahl an Verknüpfungen anzuzeigen.

Hatte ich getestet, siehe #36; irgendwas war dort wohl noch vom alten Code zuviel drin. Ich weiß nur nicht, welcher Teil ... daher neuer Anlauf und erneut alles Alte raus.

Wenn ich NUR deinen Code nehme
(plus der 80% Icon-Größe innerhalb der Kachel, aber ohne diesen Part ändert sich am restlichen Ergebnis auch nichts; hab ich natürlich ebenfalls getestet)

CSS

/* userContent.css */

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

    .body-wrapper {
        width: 1800px !important;
    }

    .ds-layout-topsites {
        display: block !important;
        width: 100% !important;
    }

    .top-sites-list {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        width: 100% !important;
    }

    /* Inhalt/Bild der Kacheln etwas größer */
    .top-site-outer .tile .icon-wrapper {
        min-width: 80% !important;
        min-height: 80% !important;
    }

}

Alles anzeigen

... dann kriege ich weiterhin 8 Kacheln je Zeile, nur bei schmalem Fester gibt trotz verringerter Kachelanzahl je Zeile einen horizontalen Scrollbalken (sieht man im Bild leider nicht, etwas länger als die halbe Fensterbreite):

Irgendwo ist der Wurm drin.

Hingegen breites Fenster weiterhin 8 Kacheln je Zeile:

Irgendwo hab ich noch 'nen Fehler drin :-/

Skippy

Zitat von 2002Andreas

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

Hallo!

Ich habe mal wieder ein Problemchen mit den Kacheln …

Seite dem Update auf die 155.0 werden die Grafiken in ihnen wieder viel kleiner angezeigt und der weiße Rand ist nun auch wieder doppelt so breit wie vorher.
In den Zeilen 16 und 20 habe ich schon mit anderen Werten/Zahlen herumprobiert, aber das hat nicht geholfen. Nie hatte sich danach etwas geändert. Ich habe nach den Änderungen auch den FF mal neu gestartet sowie auch einen Neustart des Laptops durchgeführt.

Welche wären die korrekten Änderungen im Code?

2002Andreas

Zitat von Skippy

Welche wären die korrekten Änderungen im Code?

Teste bitte mal:

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: 20px !important;  
}

.top-site-outer .tile .icon-wrapper {  
  min-width: 70px !important;
  min-height: 70px !important;
}
  
.top-site-outer .rich-icon {
  border: none !important;
}

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

Alles anzeigen

Skippy

Super, vielen Dank!
Es hat sofort bestens funktioniert.

Danke für die schnelle Hilfe. 👍️

2002Andreas

Zitat von Skippy

Es hat sofort bestens funktioniert.

Freut mich, war gern geschehen

Skippy

Hier bin ich doch noch mal mit neuen Fragen …

1) Wo muss ich den Wert ändern, wenn ich den weißen Rahmen um die Kacheln doch etwas schmaler haben möchte? Meine verschiedenen Versuche haben eben nicht geklappt.

2) Seit heute wird auf einmal das Firefox-Logo und der Schriftzug oben über den Kacheln angezeigt. Wie bekomme ich das weg?

3) Am Desktop-PC habe ich die Kachelgröße gestern auch geändert, da hat es gut funktionert. Nur sind die seitlichen Abstände zwischen den Kacheln jetzt viel größer als vorher.
Wie kann man die Größe der Abstände seitlich neben den Kacheln ändern und auch die Abstände zwischen den Kachel-Reihen?

2002Andreas

Zitat von Skippy

Wie bekomme ich das weg?

In den Einstellungen hier unten den Haken entfernen:

Zitat von Skippy

Abstände seitlich neben den Kacheln ändern

In Zeile 10 den Wert mal ändern und testen:

Zitat von Skippy

wenn ich den weißen Rahmen

Auch bitte testen:

CSS

.nova-enabled .top-site-outer .tile {
  background: none !important;
  box-shadow: none !important;
  }

oder auch:

CSS

.top-site-outer .tile {
   --newtab-background-card: none !important;
   box-shadow: none !important;
}

Skippy

Irgendwie komme ich bei fast allem nicht so richtig weiter. Habe alles durchprobiert, aber nie hat sich was geändert. Seltsam.
Hab jetzt gerade nicht mehr Zeit und kann erst in zwei Stunden weiter probieren.

In den FF-Einstellungen habe ich die Stelle unten gar nicht, wo ich das Logo deaktivieren kann. Alles andere ist da, aber der Schieberegler und der Text daneben fehlen.
Ich habe aber gesehen, dass ich im Code dieses stehen habe:

.logo-and-wordmark-wrapper {
display: none !important;
}

Sollte das nicht schon das Logo und den Text blocken?

2002Andreas

Zitat von Skippy

Sollte das nicht schon das Logo und den Text blocken?

Ja.

Zitat von Skippy

bei fast allem nicht so richtig weiter.

Ich habe zwecks Test mal den Hintergrund gelb eingefärbt, dann sieht das hier so aus:

Mit diesem Code:

CSS

@-moz-document url(about:newtab), url(about:home) {
 body {
    background-color: yellow !important;
  }
  
.top-site-outer .tile {
  background: none !important;
  box-shadow: none !important;
  }

.logo-and-wordmark-wrapper {
  display: none !important;
}

li.top-site-outer {
  margin-top: -10px !important;
  margin-bottom: 0px !important;
  margin-left: 5px !important;  
}

.top-site-outer .tile .icon-wrapper {  
  min-width: 70px !important;
  min-height: 70px !important;
}
  
.top-site-outer .rich-icon {
  border: none !important;
}

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

Alles anzeigen

Zeile 2 - 4 ist für den Hintergrund, musst du dann wieder entfernen.

Skippy

Sooo, weiter geht's.
Wie ich gesehen habe, gab es schon wieder ein neues FF-Update. Vor ein paar Minuten habe ich auf die 155.0.1 geupdated und danach wurde ein Teil von dem, was ich nun wollte, auf einmal auch so angezeigt. Okay, dann eben so ...

Auf meiner Kachelseite sind 4 Zeilen mit je 8 Kacheln. Jetzt muss ich nur noch probieren, die Kacheln in den Zeilen ein wenig enger zusammen zu schieben.

.DeJaVu

Das Update hat dahingehend nichts verändert.

Firefox

www.firefox.com

2002Andreas

Zitat von Skippy

ein wenig enger zusammen zu schieben.

Die Werte in Zeile 16 - 18 anpassen wie du es möchtest.

Skippy

Es ist jetzt alles bestens. Auf dem Laptop und dem PC-Monitor wird nun alles so angezeigt, wie ich es gewünscht hatte.
Super! Nochmals danke.

2002Andreas

Zitat von Skippy

Super! Nochmals danke.

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