Firefox 4 transparent mit Stylish

Ich bin ja mittlerweile vom Firefox als Browser abgekommen und ins Chrome-Lager gewechselt, da letzterer dem Firefox 3.x doch schon einiges an Usability und Geschwindigkeit voraus hatte. Firefox 4 geisterte ja schon seit Wochen herum und wollte so einiges aufholen, doch Beta-Browser sind nichts für mich. Nun ist Firefox 4 final und zugegebenermaßen einen Blick wert.

Da sich hier im Glassblog der Artikel zur Transparenz im Firefox 3.x großer Beliebtheit erfreut, werfe ich heute einen der ersten Blicke auf die entsprechenden Möglichkeiten der neuen Version. Und muss sagen, dass man recht schnell und einfach wieder zu einem ansprechenden Ergebnis kommt.

Für Bastler bietet die neue Version des Browsers wiederum Coding-Spaß, da man mit Änderungen des CSS-Codes in der userChrome.css-Datei des FF-Profils vieles ändern kann. Wer das nicht mag und schneller zu einem Ergebnis kommen möchte, dem reichen sicher auch wenige Klicks in Verbindung mit der Erweiterung „Stylish“.

Zum Installieren der Erweiterung klickt ihr auf den Firefox-Button oben links, dann auf Addons und gebt in das „Alle Addons durchsuchen“-Feld oben rechts den Namen Stylish ein. Oder aber ihr geht auf die entsprechende Seite des Addons hier und klickt auf „Add to Firefox“.
Da die Chrome-artige Erweiterungs-Engine im FF4 noch nicht einsatzbereit ist, müsst ihr den Browser an dieser Stelle einmal neu starten.

Anschließend begebt ihr euch auf userstyles.org, um Stylish mit den entsprechenden Scripten zu füttern. Ich habe bisher zwei ausgemacht, die ihren Zweck sehr gut erfüllen; welche euch besser gefällt, dürft ihr selbst entscheiden:

Firefox 4 Windows 7 total remake (design an glass)

Dieses Script ändert das Aussehen des Browsers auf einen Schlag und verpasst dem Firefox 4 eine Menge Transparenz. Nachdem die Stylish-Erweiterung also installiert und der Browser neu gestartet wurde, klickt ihr euch auf diese Seite und dann auf den „Install with Stylish“-Button im grünen Kasten.

Wie man sieht, kümmert sich das Script um die Transparenz der Tabs, der Buttons und der Adresszeile. Darüber hinaus wird auch das Optionsmenü und das Download-Fenster transparent gemacht:

Wer das totale „Glas-Erlebnis“ haben will, ist damit also gut bedient, es gibt jedoch auch zwei Nachteile, die mich derzeit noch stören. Betreibt man den Firefox im maximierten Fenster, wird der Firefox-Button ebenfalls transparent und schiebt sich teilweise über das erste Tab:

Darüber hinaus verändert sich die Größe der Tabs, wenn man mit der Maus darüber fährt. Zwar ist das ein netter Weg, das auszuwählende Tab hervorzuheben und lässt den Benutzer unter Umständen mehr darüber erfahren, wie der Titel des Tabs lautet, ohne darauf klicken zu müssen, doch finde ich die Animation selbst überflüssig und verlangsamt meiner Meinung nach die Benutzererfahrung. Beide letztgenannte Punkte kann man jedoch sicher über Änderungen im Stylesheet des Scriptes ändern. Wenn ich das erfolgreich getestet habe, gibts an dieser Stelle ein Update von mir.

Update: Inzwischen habe ich ein Tutorial geschrieben, das die entsprechenden Änderungen vornimmt.

Firefox 4: Choose Your Color

Das zweite Script für Stylish gefällt mir persönlich einen Hauch besser. Es „verglast“ zwar nicht so viele Elemente wie das eben genannte, ist insgesamt jedoch minimalistischer und weniger effektreich und wirkt dadurch schneller. In der normalen Browser-Ansicht bewirkt sie dabei das gleiche wie das „Windows 7 total remake“:

Hier fallen dann jedoch die Hover-Effekte der Adress-Zeile weg und auch die Tabs behalten ihre feste Breite. Tatsächlich finden die Änderungen der Erweiterung in Sachen Transparenz damit auch schon ihr Ende, denn auch der Firefox-Button selbst bleibt in der maximierten Variante des Browser-Fensters unverändert:

Warum dieses Script jedoch eventuell doch eine Alternative ist, erfährt man, wenn man sich auf die entsprechende Seite begibt, denn es lässt sich in verschiedenen Varianten installieren. Ich habe sie lediglich dazu benutzt, um Transparenz herbei zu führen, doch wer es ein weniger farbiger und ausgefallener mag, hat noch zahlreiche weitere Optionen (mit oder ohne Transparenz):

So gibt es, wie gerade erwähnt, vor der Installation einige Style-Settings, mit der ihr euch das Wunsch-Aussehen des Firefox 4 selbst zusammen mixen könnt.

Falls ihr beide Scripte ausprobieren möchtet, vergesst nicht, eines der beiden zu deaktivieren, damit ihr wirklich seht, welche Änderungen vor sich gehen. Praktischerweise braucht man zur de-/aktivierung der Scripte den Browser nicht neu starten.

Haltet ihr (noch) nichts vom Firefox 4 und wollt lieber die Vorgängerversion transparent haben, dann werft einen Blick auf meinen Artikel: Firefox transparent: die Glasser-Erweiterung und ein Tutorial.

16 Gedanken zu “Firefox 4 transparent mit Stylish

    1. Hallo Uri!

      Ich konnte es leider unter keinem anderen Betriebssystem bisher testen. Im Grunde geht die ganze Geschichte auch bei anderen Windows-Versionen, doch die „glasartige“ Aero-Oberfläche gibt es erst seit Vista.
      Vermutlich könnte man solche Effekte auch unter XP beispielsweise zusammen bekommen, dann aber mit mehr Aufwand, da man XP erst beibringen muss, transparent zu werden.

      Gruß, ML

  1. Hallo ml
    Kann es sein, dass die userstyles.org Webseite momentan down ist?
    Komme jedenfalls nicht drauf.
    Kann ich sonst noch irgendwie an das zweite Script (Firefox 4 Choose your color) rankommen?

    Grüsse

  2. Hi,

    grundsätzlich nette Idee, aber keiner der Styles trifft meine Vorstellungen. Vielleicht hast Du ja einen Vorschlag, wie ich das hinkriege?

    Wenn ich den Firefox nicht im Vollbild Modus habe, sieht er von den Farben her exakt so aus, wie ich ihn gerne hätte. Im Vollbild-Modus nicht mehr. Das bezieht sich wohlgemerkt nur auf die Farben – auf den wesentlich dickeren oberen Rand des Browsers kann ich verzichten ;). Eine Idee, wie ich das hinkriege?

    thx

    Jay

    1. Hallo Jay!

      Nach allem, was ich sehen konnte (bin noch nicht ganz in dem Firefox-CSS-Code drin) werden die Ansichtsmodi des Firefox unterschiedlich gesteuert. Für den Modus „Wiederherstellen“ gibt es keinen bestimmten Selektor. Will man das Aussehen im Vollbild-Modus steuern, so kommt an die CSS-Selektoren hinten noch „sizemode=“maximized““ dran, etwa so:

      #main-window[sizemode=“maximized“]
      { … }

      Also müsste man speziell die Werte ändern, die hinter den Selektoren mit „sizemode=“maximized““ stehen, um das Aussehen des FF im Vollbild zu ändern.

      Gruß, ML

  3. Hallöchen,

    vielen Dank für die Anleitung.
    Unter FF3 habe ich immer fleißig eine Erweiterung (All-Glass bspw.) genutzt, um den Effekt zu erzeugen. Bei FF4 fehlen mir die transparenten Tabs und Lesezeichen. Nun bin ich über diesen Blog gestolpert und würde gerne FF4 entsprechend anpassen. Dabei finde ich v.a. die erste Variante interessant. Nur: Ich habe etwas Sorge, dass dieser ganze Kram von der Userstyle-Seite möglicherweise Schadcode enthalten könnte. Von daher konnte ich mich noch nicht so recht dazu durchringen, das zu probieren.

    1. Hallo Foo!

      Die Stylish-Erweiterung ist primär dazu gedacht, das Aussehen von Webseiten zu verändern. Der Browser holt sich die Beschreibung des Aussehens aus dem CSS-Stylesheet, den die Seite liefert und verarbeitet das. Stylish hängt sich dazwischen und „überschreibt“ bzw. filtert dabei den CSS-Code und fügt eigenen ein.
      Bei dem Firefox selbst funktioniert das auch, da der sich auch über CSS-Codes anpassen lässt.

      Doch bei all dem geht es nur ums Aussehen, tatsächlich am Programmcode des Browsers ändert sich nichts und über den CSS-Code hat man ebenfalls keinen Zugriff auf sicherheitsrelevante Bereiche. Im Browser passiert im Grunde dasselbe wie bei „All-Glass“, dafür kann man bei der ersten Variante, die dir so gut gefiel, noch den Code einsehen. Wirf ruhig selbst einen Blick vorher darauf – ich habe nichts ungewöhnliches entdecken können.

      Gruß, ML

      1. Okay, vielen Dank. Dann werde ich das probieren. Ich bin generell bei solchen technischen Dingen mangels Erfahrung unbedarft, da ich für sowas bislang eben auf Erweiterungen zurückgegriffen habe. ;-) Von daher noch eine letzte Frage: Sind solche Skripte, die ich über Stylish nutze, auch wieder problemlos für einen Unwissenden entfernbar?

      2. P.S.: Hat sich erledigt. ;-) Vielen Dank nochmals für die Antwort und die Mühe, diesen hilfreichen Blog hier zu pflegen!
        Gruß
        Foo

  4. Hi,
    Ich habe für meine Homepage eine möglichkeit entdeckt das ganze mit diesen Glass-Style darzustellen (allerdings nur bei Opera und Windows 7) sprich meiner Homepage Hintergrund ist der Desktop Hintergrund des Users, aller dings wirft das bei anderen Browsern (Firefox/Internetexplorer) Fehler auf und daher habe ich die abfrage des Browsers eingebunden, sodass er jetzt nur bei Windows 7 und V7-Glassstyle(u.a.) Das so anzeigt.
    Meine Frage nun um auf den Punkt zu kommen giebt es eine möglichkeit Die installation eines solchen Styles per Javascript abzufragen? (Das Problem ist das Safari und co auch auf Firefox basieren)
    Gruß Daniel

    1. Hallo Sophie!
      Was du gelöscht hast, ist die „Add-on“-Leiste.
      Klicke oben links auf den orangen Firefox-Button, dann mit der Maus in der rechten Spalte des Menüs über „Einstellungen“ halten und auf „Add-on“-Leiste klicken, damit das Häkchen wieder davor ist. Damit sollte sie wieder da sein.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s