UserStyles für Firefox

von Keine Kommentare

Heute an dieser Stelle einige userChrome und userContent Snippets für Firefox. Dieser CSS-Code kümmert sich um die Seite Neuer Tab, die Adress- und Scrollleiste. Ich nutze diesen Code schon seit längerem und möchte ihn nicht mehr missen.

Neuer Tab

Firefox geänderte Seite Neuer Tab
Firefox geänderte Seite Neuer Tab

Passt die Seite Neuer Tab den Bedürfnissen an. So ist es zum Beispiel möglich der Seite ein Hintergrundbild zu verpassen, oder die Größe der Kacheln zu ändern.

/*
 Seite New Tab anpassen
 reddit.com/r/FirefoxCSS/comments/b1jsal/how_to_edit_newtab_page_in_usercontentcss/
 */

/* andere Hintergrundfarbe */
@-moz-document url(about:blank), url(about:newtab), url(about:home) {
  html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
    background: #FFFFFF !important;
  }
}

/* Hintergrundbild => im Ordner 'chrome' speichern */
@-moz-document url(about:newtab), url(about:home) {   
  .outer-wrapper {
    background-image: url(image.jpg) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }
}  
  
/* Größe, Lage und Layout der Tiles */
@-moz-document url(about:newtab), url(about:home) {
  .top-site-outer .tile {
    width: 156px !important;
    height: 96px !important;
  }
  
  .top-sites-list {
    margin: auto !important;
  } 
}

/* kein Text unter den Tiles */
@-moz-document url(about:newtab), url(about:home) {
  .collapsible-section .section-title span, .top-site-outer .title span {
    display: none !important;
  }
  
  main {
    width: 1146px !important;
    padding-bottom: 0px !important;
  }
}  
  
/* kein Scrolling */
@-moz-document url(about:newtab), url(about:home) {
  body {
    overflow-y: hidden !important; 
  }
}
  
 /* keine Scrollleiste */
@-moz-document url(about:newtab), url(about:home) {  
  :root{
    scrollbar-width: none !important;
  }
}

Farbige Adressleiste

Firefox farbige Adressleiste
Firefox farbige Adressleiste

Färbt die Adressleiste je nach aufgerufener Seite farbig ein. Bei verschlüsselter Übertragung ist die Adressleiste grün bei unverschlüsselter rot.

/*
 * färbt die Adressleiste ein
 */
 
#urlbar {
  position: relative;
  z-index: 1;
}

#identity-box::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  background: var(--toolbar-bgcolor); /* geändert; ursprünglich: white */
  opacity: 0.2;
  transition: background 250ms linear; /* ergänzt, Zeitspanne vergrößert */
}

#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity::after {
  background: #ff0039; /* Firefox Red 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.chromeUI::after {
  background: #0a84ff; /* Firefox Blue 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.extensionPage::after {
  background: #45a1ff; /* Firefox Blue 40 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity::after {
  background: #058b00; /* Firefox Green 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain::after {
  background: #12bc00; /* Firefox Green 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked::after {
  background: #30e60b; /* Firefox Green 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent::after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked::after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden::after {
  background: #ffe900; /* Firefox Yellow 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.weakCipher::after {
  background: #a47f00; /* Firefox Yellow 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent::after {
  background: #d70022;  /* Firefox Red 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms::after {
  background: #a4000f;  /* Firefox Red 70 */
}

#urlbar[pageproxystate='valid'][focused="true"] #identity-box::after {
  background: var(--toolbar-bgcolor);
}

Scrollleiste

Firefox schmale Scrollleiste
Firefox schmale Scrollleiste

Erzeugt eine schmale Scrollleiste in Firefox

/*
 dünne Scrollleiste auf Webseiten
 reddit.com/r/firefox/comments/b27y9i/i_have_been_trying_to_remove_scrollbars_from/
 */

* {
  scrollbar-width: thin;
}

Wichtig: userContent.css und userChrome.css verändern das Aussehen. Während die Datei userContent.css das Aussehen von Webseiten verändert, verändert userChrome.css das Aussehen von Firefox. Die Dateien gehören in den Ordner chrome des Profils und müssen dort erzeugt werden. Um nun an den Profilordner zu kommen muss man via „Burgermenü“ => „Fragezeichen“ den Menüpunkt „Informationen zur Fehlerbehebung“ öffnen. Der Profilordner wird im Windows-Explorer geöffnet, wenn ihr den Button „Ordner anzeigen“ in der Zeile „Profilordner“ nutzt. Legt dort einen neuen Ordner mit dem Namen chrome an. In diesem neu angelegten Ordner müsst ihr dann Textdateien mit der Bezeichnung userChrome.css und userContent.css erzeugen. Das ist eigentlich schon alles. Ihr müsst die so erzeugten Dateien nur noch mit einem ordentlichen Texteditor öffnen und mit den passenden Codeschnipsel füllen. Die Codezeilen werden nach einem Browser-Neustart wirksam.

Mozilla ändert ab Firefox 69, um die Startzeit des Browsers zu verkürzen, den Umgang mit den Dateien userChrome.css und userContent.css Beide beachtet der Browser ab dieser Version in der Standard­einstellung nicht. Um die Dateien zu nutzen muss man ab Firefox 69 vorher per „about:config“ den Schalter „toolkit.legacyUserProfileCustomizations.stylesheets“ auf „true“ stellen.

Schlagwörter