FF ab 57: Anpaßbares Retro-Design für die userChrome.css

  • So manch einer weint ja dem Classiv Theme Restorer nach (mir ging es auch so!). Deshalb habe ich ein leicht anpaßbares Retro-Design für die userChrome.css geschrieben. Die Farbwerte und einige Andere sind ziemlich am Anfang in Variablen festgelegt, also braucht man fürs Erste nur dort zu ändern um ein völlig anderes Aussehen zu erreichen. Ich denke das kann jeder, auch mit wenig oder ohne CSS-Erfahrung.

    Wer Lust hat, kann es ja mal ausprobieren. Da ich selbst ziemlich vergeßlich bin, habe ich mit Kommentaren nicht gespart, so daß es an sich selbsterklärend ist. Es ist natürlich noch reichlich ausbaufähig.

    [attachment=1]firefox-retro-design.png[/attachment]
    [attachment=0]firefox-retro-design-2.png[/attachment]

    Mein Dank geht an alle die mir bisher geholfen haben, besonders an Sören und an den immer freundlichen und nicht aus der Ruhe zu bringenden Andreas.

    PS: Neue Version mit der CSS-Konfiguration der neuen Toolbar mit Statusleiste und Korrekturwertberechnung zur Textausrichtung (für das Script "A-Statusleiste.uc.js"). Wer das nicht braucht kann es rauslöschen und ein paar kleine Anpassungen.

    Gruß Harry


  • Wie bekommst du diese (welche) Schrift in die Leisten? Die finde ich sehr schön und würde es gern auch so gestalten..


    Über die Eigenschaft font-family. Brauchst halt auch eine Verknüpfung zur entsprechenden Schriftart.
    Und text-shadow für die Schatten. :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Hier ein text-shadow-Generator: https://css3gen.com/text-shadow/

    Den generierten CSS-Code (am Ende jedoch mit !important; am Ende) in den entsprechenden Abschnitt mit hinein. Bei meinem Muster z.B. hier:


    Gruß Harry

    PS: Bei den Lesezeichen steht da aber extra "text-shadow: none !important;" drin, das muß dann ggf. raus.

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Wie bekommst du diese (welche) Schrift in die Leisten?

    OK... bliebe noch die Frage nach der Schrift aus Screenshot im Post 4... :)
    Wie ich diesem Thread lesen konnte, wäre dann ein Eintrag in die userContent.css am Zielführendsten ... :)

    CSS
    :not(.icon) {
      font-family: Schriftart !important; }


    Die Icons könnten auch miterfasst werden, wenn die gewünschte Schrift dies unterstützt.

  • So wie text-shadow kannst Du auch noch eine Zeile font-family dazu einfügen.

    CSS
    font-family: 'Hugo Spezial', Arial, sans-serif !important;


    Du kannst mehrere (Ausweich) Schriften angeben, es wird der Reihe nach gesucht ob diese auch installiert sind. Bei Leerzeichen im Namen in Hochkommata setzen.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • Wie ich diesem Thread lesen konnte, wäre dann ein Eintrag in die userContent.css am Zielführendsten ... :)


    Du willst die Schriftart doch im Browser nutzen oder verstehe ich da was falsch?
    Dann muss deine Anweisung nämlich in die userChrome.css :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • wie jetzt?
    für in Webseiten anwenden den Code in die userContent.css
    und im Browser nutzen in die userChrome.css..
    fehlt leider immer noch der Name der verwendeten Schrift oder soll Hugo Spezial korrekt sein?

  • Wir wissen doch nicht was für Schriftarten Du auf Deinem Rechner installiert hast. Such Dir da eine passende aus. Ich habe hier unter Linux vermutlich andere...

    'Hugo Spezial' war nur ein Beispiel fafür, daß Namen mit Leerzeichen in Hochkommata gehören. Ich glaube Gänsefüßchen gehen auch...

    Wenn die angegebene Schrift wirklich da ist braucht Du auch keine Ausweichschriften angeben, dann reicht ein Schriftname.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Yep, geh' einfach mal in deinen Schrift-Ordner. Gewöhnlich unter C:\Windows\fonts
    Dort kann man sich eine Vorschau per Doppelklick anzeigen lassen. Ist zumindest hier so.
    Dort findet man auch den Schriftnamen, den man für die CSS braucht.
    Und nimm dann eine ttf-Schrift, alles andere ist nur bedingt geeignet.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Die userChrome.css für das Retro-Design (Beitrag 1) ist inzwischen um die Konfiguration der "A-Statusleiste.uc.js" erweitert. Hier noch ein Austauschteil für ein freundliches Grau-Design, nur damit man sieht was sehr einfach machbar ist (den Block "Blau metallic" gegen diesen austauschen):


    [attachment=0]Screenshot_20171128_125303.png[/attachment]

    Gruß Harry

  • Die Standardschrift, die im Firefox eingestellt ist, wirkt doch nur auf die Webseiten. Und der kleine Haken heißt, daß die Webseiten diese Schrift ändern können. Ich denke Du wirst die Schrift der Firefox-Bedienung nur mit CSS-Code in der userChrome.css oder mit der Standardschrift Deines Betriebssystems (Windows) beeinflussen können.

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE