Seite "Neuer Tab" anpassen

omar1979

Hallo allen..

Hab versucht mit dieser Code im Neuen Tab Seite das Icon und Firefox Schrift sowohl die Suche etwas kleiner zu machen funkt aber nicht.

Code

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

.search-wrapper .logo-and-wordmark .logo {
    background: url("chrome://branding/content/about-logo.png") no-repeat center;
    /* background-size: auto; */
    background-size: 42px;
    display: inline-block;
    height: 42px;
    width: 42px;
}
}

Alles anzeigen

Was ist falsch?

Hier noch ein Bild:

Ich das FF-Icon und Firefox Schrift samt der Suche verkleiner. Hab im "Werkzeuge für Web-Entwickler gesehen, dass dort wo ich 42px geschrieben habe, 82px ist und es mal als Test verkleinert funkt aber nicht.

Danke für die Hilfe.

Übrigens: hab das als NeuerTab.css gespeichert und mit @import ... im userContent.css geladen

Danach möchte ich noch versuchen diese:

Buttons zu verkleinern.

grisu2099

2 Sachen fallen sofort auf:

- Zeile 5 und 6: Entweder "auto" oder Größe angeben...

- Wer 2 geschweifte Klammern aufmacht, muß wieviele geschweifte Klammern wieder schließen???

Finde den Fehler...

2002Andreas

Zitat von omar1979

@-moz-document url(newtab) {

Schon das ist so nicht richtig, wenn dann:

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

omar1979

Zitat von grisu2099

wieviele geschweifte Klammern wieder schließen???

2

Danke. aber stimmt das mit dem

Zitat von omar1979

@-moz-document url(newtab)

das hier?

Funkt auch mit 1 Klammer mehr und ohne das

Zitat von omar1979

background-size: auto;

nicht.

grisu2099

Siehe den Beitrag von 2002Andreas ...

omar1979

Zitat von 2002Andreas

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

Auch gemacht ohne Erfolg.

ich muss glaub das Icon und Firefox Schrift zusammen und die Suche alleine ansprechen..

2002Andreas

CSS

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

.search-wrapper .logo-and-wordmark .wordmark {
    background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
      background-size: 134px;
      height: 32px!important;
}

.search-wrapper .logo-and-wordmark .logo {
    background: url("chrome://branding/content/about-logo.png") no-repeat center;
    background-size: auto;
    background-size: 42px;
    display: inline-block;
    height: 42px;
    width: 42px;
}

.logo-and-wordmark {
  margin-bottom: 35px !important;
  max-height: 15px !important;
}

.search-wrapper .search-handoff-button, .search-wrapper input {
  max-height: 25px!important;
}

.body-wrapper {
  margin-top: -40px !important;
}
}

Alles anzeigen

Der Text Firefox ist kein Text, sondern ein Bild.

milupo

Du hast die Werte der Eigenschaften in den Zeilen 6, 8 und 9 geändert. Also musst du auch !important hinzufügen, damit die neuen Werte auch greifen und die Standardwerte überschrieben werden.

2002Andreas

Zitat von omar1979

Firefox Schrift

Du kannst dir eine eigene erstellen:

CSS

.wordmark {
  visibility: hidden !important;
}

.logo::after {
  content: "Firefox" !important;
  font-size: 29px !important;
  padding-left: 120px !important;
  margin-top: 30px !important;
  display: block !important;
}

Alles anzeigen

omar1979

mit dieser Code siehts so aus:

Code

.outer-wrapper.ds-outer-wrapper-breakpoint-override {
    padding: 0px 0px 55px;
}
.search-wrapper .logo-and-wordmark {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

aber sobald ich das: @-moz-document url(about:newtab) { und ganz am schluss noch ein } einfüge funkt es im Stillbearbeitung nicht mehr.

2002Andreas

Zitat von omar1979

funkt es im Stillbearbeitung nicht mehr.

Da brauchst du die -moz Regel auch nicht.

CSS

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

.search-wrapper .logo-and-wordmark .wordmark {
    background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
      background-size: 134px;
      height: 32px !important;
}

.search-wrapper .logo-and-wordmark .logo {
    background: url("chrome://branding/content/about-logo.png") no-repeat center;
    background-size: auto;
    background-size: 42px !important;
    display: inline-block;
    height: 62px !important;
    width: 62px !important;
}

.logo-and-wordmark {
  margin-bottom: 35px !important;
  max-height: 15px !important;
}

.search-wrapper .search-handoff-button, .search-wrapper input {
  max-height: 25px !important;
}

.body-wrapper {
  margin-top: -40px !important;
}

.wordmark {
  visibility: hidden !important;
}

.logo::after {
  content: "Firefox" !important;
  font-size: 29px !important;
  padding-left: 80px !important;
  margin-top: 18px !important;
  display: block !important;
}
}

Alles anzeigen

omar1979

Zitat von 2002Andreas

Da brauchst du die -moz Regel auch nicht.

Ok danke.. Werde morgen mal mit den Codes von dir mir was daraus machen.

Danke auch den Anderen..

grisu2099

Bitte schön. Bis zur nächsten Baustelle...

2002Andreas

Zitat von grisu2099

Bis zur nächsten Baustelle

Ich hoffe er schließt diesen Bauabschnitt erst ab vorher.

Dann muss ja auch erst noch der TÜV wieder ran und so.

milupo

Zitat von 2002Andreas

Dann muss ja auch erst noch der TÜV wieder ran und so.

Der arme TÜV.

2002Andreas

Zitat von omar1979

Buttons zu verkleinern.

Meinst du das so?

Wenn ja, teste bitte:

CSS

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

main {
  width: 100% !important;
  }
  
li.top-site-outer {
  padding: 5px 20px 0 !important;
  }

div.tile, div.tile div.screenshot {
  width: 40px !important;
  height: 40px !important;
  }
 
.top-site-outer .title span,
.top-site-outer .title.pinned span {
    width: 90px !important;
}
}

Alles anzeigen

grisu2099

Zitat von 2002Andreas

Ich hoffe er schließt diesen Bauabschnitt erst ab vorher.

Das ich davon ausgehe, muß ich doch nicht mehr extra betonen, oder?

omar1979

Hallo wieder..

Meine "Neuer Tab"-Seite sieht jetzt so aus:

mit dieser Code:

CSS

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

.outer-wrapper.ds-outer-wrapper-breakpoint-override {
  margin-top: -20px;
  padding-left: 150px !important;
  padding-right: 125px !important;
  padding-bottom: 5px !important;
}
.search-wrapper .logo-and-wordmark .logo {
  background: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/Fuchs4.png") no-repeat center !important;
  background-size: auto;
  background-size: 32px !important;
  display: inline-block;
  height: 72px !important;
  width: 112px !important;
  margin-left: -85px
}
.logo-and-wordmark {
  margin-bottom: 30px !important;
  max-height: 15px !important;
}
.search-wrapper .search-handoff-button, .search-wrapper input {
  max-height: 40px !important;
  background-color: red !important;
  font-family: arial black !important;
  color: blue !important;
  border: 3px dashed blue !important;
}
.search-wrapper {
  margin-left: -110px !important;
}
.body-wrapper {
  margin-top: -30px !important;
}
.wordmark {
  visibility: hidden !important;
}
.logo::after {
  content: "FirefoxNeuerTab" !important;
  color: blue !important;
  font-weight: 700 !important;
  font-size: 29px !important;
  padding-left: 80px !important;
  margin-top: 16px !important;
  display: block !important;
}
main {
  width: 100% !important;
}  
li.top-site-outer {
  padding: 20px 20px 0 !important;
  border: 2px dotted blue !important;
}
div.tile, div.tile div.screenshot {
  width: 40px !important;
  height: 40px !important;
}
.top-site-outer .title span,
.top-site-outer .title.pinned span {
  color: blue !important;
  width: 90px !important;
  height: 20px !important;
  margin-left: -10px !important;
}
.icon.icon-settings {
  background-color: red !important;
  color: white !important;
  margin-top: 20px !important;
  padding-left: 20px !important; 
}
.icon.icon-settings:hover {
  background-color: blue !important;
}
}

Alles anzeigen

Nun meine erste Frage: Kann man bei diesem Teil der Code:

CSS

.logo::after {
  content: "FirefoxNeuerTab" !important;
  color: blue !important;
  font-weight: 700 !important;
  font-size: 29px !important;
  padding-left: 80px !important;
  margin-top: 16px !important;
  display: block !important;
}

Nicht so machen, dass der Content: "Firefox Neuer Tab" also getrennt geschrieben angezeigt wird?

Wenn ich es getrennt schreibe, sieht es so aus:

Ich hab auch versucht dort eine PNG-Datei einzufügen, aber auch erfolglos.

PNG:

Nun bitte ich um Hilfe.

Besten Dank im Voraus.

2002Andreas

Zitat von omar1979

dass der Content: "Firefox Neuer Tab" also getrennt geschrieben angezeigt wird?

Bastele mal an diesem Teil von deinem Code:

CSS

 .logo::after  {
  content: "Firefox NeuerTab" !important;
  color: blue !important;
  font-weight: 700 !important;
  font-size: 29px !important;
  padding-left: 80px !important;
  margin-top: 16px !important;
  display: block !important;
}

und an diesem:

CSS

.search-wrapper .logo-and-wordmark .logo {
  background: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/Fuchs4.png")") no-repeat center !important;
  background-size: auto;
  background-size: 32px !important;
  display: inline-block;
  height: 72px !important;
  width: 812px !important;
  margin-left: 0 !important;
  padding-left: 370px !important;
}

omar1979

Zitat von 2002Andreas

Bastele mal an diesem Teil von deinem Code:

Dankeschön. Jetzt bin ich definitiv fertig mit dieser Baustelle.

Und hier ein Bild davon:

Hier noch die Code, falls es jemanden interessiert.

CSS

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

.outer-wrapper.ds-outer-wrapper-breakpoint-override {
  margin-top: -20px;
  padding-left: 150px !important;
  padding-right: 125px !important;
  padding-bottom: 5px !important;
}
.search-wrapper .logo-and-wordmark .logo {
  background: url("file:///C:/Users/askas/AppData/Roaming/Mozilla/Firefox/Profiles/use9514s.default-release/chrome/favicons/Fuchs4.png") no-repeat center !important;
  background-size: auto;
  background-size: 32px !important;
  display: inline-block;
  height: 72px !important;
  width: 812px !important;
  margin-left: -105px !important;
  padding-left: 350px !important;
}
.logo-and-wordmark {
  margin-bottom: 30px !important;
  max-height: 15px !important;
}
.search-wrapper .search-handoff-button, .search-wrapper input {
  max-height: 52px !important;
  background-color: red !important;
  font-family: arial black !important;
  color: blue !important;
  border: 3px dashed blue !important;
}
.search-wrapper {
  margin-left: -110px !important;
}
.body-wrapper {
  margin-top: -30px !important;
}
.wordmark {
  visibility: hidden !important;
}
.logo::after {
  content: "Firefox Neuer Tab" !important;
  color: blue !important;
  font-weight: 700 !important;
  font-size: 29px !important;
  padding-left: 80px !important;
  margin-top: 16px !important;
  display: block !important;
}
main {
  width: 100% !important;
}  
li.top-site-outer {
  padding: 20px 20px 0 !important;
  border: 2px dotted blue !important;
}
div.tile, div.tile div.screenshot {
  width: 40px !important;
  height: 40px !important;
}
.top-site-outer .title span,
.top-site-outer .title.pinned span {
  color: blue !important;
  width: 90px !important;
  height: 20px !important;
  margin-left: -10px !important;
}
.icon.icon-settings {
  background-color: red !important;
  color: white !important;
  margin-top: 20px !important;
  padding-left: 20px !important; 
}
.icon.icon-settings:hover {
  background-color: blue !important;
}
}

Alles anzeigen

Seite "Neuer Tab" anpassen

Ähnliche Themen

Wichtige Seiten, Kacheln

Es lassen sich keine Seiten öffnen / neuer Tab sporadisch/temporär

neue Seite neuer Tab

Cursor soll bei neuer Seite nicht in Adressleiste springen

Kein neuer Tab Feld sichtbar

Seite lädt nicht