NeuerTab Seite Problem

omar1979

Für die Neuer-Tab-Seite benütze ich folgendes Script.

CSS

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

body {
    /*background-image: url('file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/exc.png') !important;*/
	background-repeat: no-repeat !important;
	background-size: 80px 470px /*1365px 570px*/ !important;
	background-position: left !important;
}
.outer-wrapper.ds-outer-wrapper-breakpoint-override {
  margin-top: -75px;
  margin-left: 5px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 5px !important;
  /*margin-top: -75px;
  padding-left: 150px !important;
  padding-right: 125px !important;
  padding-bottom: 5px !important;*/
}
.search-wrapper .logo-and-wordmark .logo {
  display: none !important;
}
.logo-and-wordmark {
  display: none !important;
}
.search-wrapper .search-handoff-button, .search-wrapper input {
  display: none !important;
}
.search-wrapper {
  margin-left: -110px !important;
}
.body-wrapper {
  margin-top: -30px !important;
}
.wordmark {
  visibility: hidden !important;
}
main {
  width: 100% !important;
}
li.top-site-outer {
  border: 2px dotted blue !important;
  /* width: 90px !important;
  height: 50px !important; */
  margin-right: 4px !important;
}
div.tile, div.tile div.screenshot {
  width: 50px !important;
  height: 50px !important;
  margin-top: -17px !important;
  margin-bottom: -7px !important;
}
.top-site-outer .title span,
.top-site-outer .title.pinned span {
  color: blue !important;
  width: 90px !important;						 
  height: 20px !important;
  margin-bottom: -10px !important;
  margin-left: -10px !important;
}




					 
.icon.icon-settings {
  background-color: red !important;
  color: white !important;
  margin-top: 5px !important;
  padding-left: 20px !important; 
}
.icon.icon-settings:hover {
  background-color: blue !important;
}

								 
}

Alles anzeigen

und jetzt sieht es leider so aus, sind nurnoch 8 auf 1er Zeile.

Was ist da nun passiert?

2002Andreas

Zitat von omar1979

Was ist da nun passiert?

Teste bitte mal. Statt Zeile 38 - 40 jetzt:

CSS

.layout-variant-b .top-sites-list {
    grid-template-columns: repeat(12, 1fr)!important;
  }

Den Wert 12 musst/kannst du dir anpassen.

omar1979

Zitat von 2002Andreas

Den Wert 12 musst/kannst du dir anpassen.

Danke, sieht jetzt so aus nachdem ich 12 auf 10 gesetzt habe.

Im Vollbildmodus.

Wie kann ich jetzt die Leere Links und Rechts verringern, damit noch mehr anzeigen lassen kann?

2002Andreas

Zitat von omar1979

Wie kann ich jetzt die Leere Links und Rechts verringern

Einfach mal mit den Abständen in Zeile 11 rumspielen

CSS

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

body {
    /*background-image: url('file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/exc.png') !important;*/
	background-repeat: no-repeat !important;
	background-size: 80px 470px /*1365px 570px*/ !important;
	background-position: left !important;
}
.outer-wrapper.ds-outer-wrapper-breakpoint-override {
  margin-top: -75px;
  margin-left: -550px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 5px !important;
  /*margin-top: -75px;
  padding-left: 150px !important;
  padding-right: 125px !important;
  padding-bottom: 5px !important;*/
}
.search-wrapper .logo-and-wordmark .logo {
  display: none !important;
}
.logo-and-wordmark {
  display: none !important;
}
.search-wrapper .search-handoff-button, .search-wrapper input {
  display: none !important;
}
.search-wrapper {
  margin-left: -110px !important;
}
.body-wrapper {
  margin-top: -30px !important;
}
.wordmark {
  visibility: hidden !important;
}

li.top-site-outer {
  border: 2px dotted blue !important;
  /* width: 90px !important;
  height: 50px !important; */
  margin-right: 4px !important;
}
div.tile, div.tile div.screenshot {
  width: 50px !important;
  height: 50px !important;
  margin-top: -17px !important;
  margin-bottom: -7px !important;
}
.top-site-outer .title span,
.top-site-outer .title.pinned span {
  color: blue !important;
  width: 90px !important;						 
  height: 20px !important;
  margin-bottom: -10px !important;
  margin-left: -10px !important;
}




					 
.icon.icon-settings {
  background-color: red !important;
  color: white !important;
  margin-top: 5px !important;
  padding-left: 20px !important; 
}
.icon.icon-settings:hover {
  background-color: blue !important;
}

.layout-variant-b .top-sites-list {
    grid-template-columns: repeat(15, 1fr)!important;
  }						 
}

Alles anzeigen

omar1979

Zitat von 2002Andreas

Einfach mal mit den Abständen in Zeile 11 rumspielen

Danke.

Und wie kann ich die Anzahl der Zeilen vermehren?

ich habe zur Zeit 4 Zeilen.

2002Andreas

Zitat von omar1979

Und wie kann ich die Anzahl der Zeilen vermehren?

In about:config den Wert:

browser.newtabpage.activity-stream.topSitesRows

ändern.

omar1979

Zitat von 2002Andreas

In about:config den Wert:
browser.newtabpage.activity-stream.topSitesRows
ändern.

Dankeschön.

2002Andreas

Zitat von omar1979

Dankeschön.

gerne wie immer

omar1979

Hallo wieder..

habe jetzt schon seit einiger Zeit wieder das problem, dass mein css nicht mehr funkt.

ich will eigentlich nicht nur 8 vorschaubilder auf der zeile sondern mehr.

habe 6 zeilen. was ist wieder los mit meiner css?

und hier wieder die css-datei:

CSS

@-moz-document url(about:newtab), url(about:home) {
/*
body {
    background-image: url('file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/exc.png') !important; 
	background-repeat: no-repeat !important;
	background-size: 80px 470px !important;
	background-position: left !important;
}
*/
body {
	background-color: #000000 !important;
}
.outer-wrapper.ds-outer-wrapper-breakpoint-override {
  margin-top: -130px;
  margin-left: -200px;
  margin-right: 100px;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 5px !important;
  /*margin-top: -75px;
  padding-left: 150px !important;
  padding-right: 125px !important;
  padding-bottom: 5px !important;*/
}
.search-wrapper .logo-and-wordmark .logo {
  display: none !important;
}
.logo-and-wordmark {
  display: none !important;
}
.search-wrapper .search-handoff-button, .search-wrapper input {
  display: none !important;
}
.search-wrapper {
  margin-left: -130px !important;
}
.body-wrapper {
  margin-top: 20px !important;
}
.wordmark {
  visibility: hidden !important;
}

.layout-variant-b .top-sites-list {
    grid-template-columns: repeat(14, 1fr)!important;
  }
li.top-site-outer {
  background-color: #c0c0c0 !important;
  border: 5px dotted yellow !important; 
  width: 94px !important;
  height: 100px !important;
  margin-right: 10px !important;
}
li.top-site-outer:hover {
  background-color: blue !important;
  border: 5px dotted yellow !important;
  width: 94px !important;
  height: 100px !important;
  margin-right: 10px !important;
}
.top-site-outer .context-menu-button {
  background-image: url("file:///C:/Users/Ramo/AppData/Roaming/Mozilla/Firefox/Profiles/c612nnc8.default-release/chrome/Icons/Punkt_1.png") !important;
  margin-top: -33px !important;
/*
  background-image: url("chrome://global/skin/icons/more.svg"); 
*/
}
div.tile, div.tile div.screenshot {
  width: 50px !important;
  height: 50px !important;
  margin-top: -17px !important;
  margin-bottom: -7px !important;
}
.top-site-outer .title span,
.top-site-outer .title.pinned span {
  color: white !important;
  width: 90px !important;						 
  height: 20px !important;
  margin-bottom: -10px !important;
  margin-left: -10px !important;
}
.icon.icon-pin-small {
  color: red !important;
  margin-top: -4px !important;
  margin-left: -15px !important;
  /*margin-right:1px !important;*/
}
					 
.icon.icon-settings {
  background-color: red !important;
  color: white !important;
  margin-top: 5px !important;
  padding-left: 20px !important; 
}
.icon.icon-settings:hover {
  background-color: blue !important;
}
}

Alles anzeigen

2002Andreas

Zitat von omar1979

nicht nur 8 vorschaubilder auf der zeile sondern mehr.

Teste bitte.

Das zusätzlich in den Code einfügen:

CSS

.top-sites-list {
   grid-template-columns: repeat(14, 1fr)!important;
}

Und dann Zeile 15: margin-left: -200px;

für dich anpassen.

Im Test hier habe ich margin-left: 60px genutzt

omar1979

dann hat sich wohl das geändert und ist nurnoch .top-sites-list. danke 2002Andreas

.layout-variant-b .top-sites-list {
grid-template-columns: repeat(14, 1fr)!important;
}

2002Andreas

Zitat von omar1979

danke

gerne doch

Sören Hentzschel

Ich habe zwar nicht geprüft, wann es was für Änderungen gab. Aber grundsätzlich sind Konstrukte tendenziell etwas fragil, wenn der Selektor schon von einer „Variante” spricht. Denn Varianten stehen häufig in Zusammenhang mit A/B-Experimenten und solche haben das Ziel, von mehreren Umsetzungen auf eine Umsetzung zu kommen. Da sind Änderungen nach einiger Zeit dann besonders wahrscheinlich. Sprich, man hat eine Variante A und eine Variante B, dann schaut man, welche Variante besser genutzt wird, und dann streicht man die Varianten und macht den „Gewinner” zur Lösung für alle.

omar1979

Zitat von Sören Hentzschel

zur Lösung für alle.

Danke für die Info.