Ansicht von fremden Webseiten anpassen – unter Firefox oder Chrome

Manchmal will man seinen eigenen Style einer fremden Webseite aufdrücken. Leider ist das auf normalen Weg nicht immer so einfach möglich. Man schreibt den Webseitenbetreiber an und schreibt ihm seinen Unmut. Erst letztens hatte meine Bank, mit einem blau-orangenen Logo, ihr Onlinebanking-Portal neu gestaltet. Die Beträge werden fortan mit einer Schriftgröße von 24 Pixeln angezeigt. Das ist zwar für sehbehinderte Leute eine Erleichterung, jedoch kann der virtuelle Kontoauszug auch von Leuten gelesen werden, welche sich fünf Meter vom Display entfernen. Die Bank nennt diesen Schritt “universelles Design”. In Zeiten von Responsive-Layout und media queries ist das natürlich ein Rückschritt. Der Betreiber war auf diese Kritik leider beratungsresistent, also müssen wir uns selbst eine Lösung überlegen.

Anhand von xuad.net möchte ich zeigen, wie man einer Webseite in eine für sich angepasste Ansicht ändert.

Was benötigen wir dafür?

Wir benötigen den Browser Firefox oder Chrome, gegebenenfalls ein paar Add-Ons und ein paar CSS-Skills können auch nicht schaden.

Style für den Firefox Browser anpassen

Wir starten als erstes den Firefox und navigieren im Hauptmenü zu Hilfe » Informationen zur Fehlerbehebung.

firefox_help

Es öffnet sich ein neuer Tab und wir klicken bei Allgemeinen Informationen » Profilordner auf “Ordner anzeigen”.

firefox_open_settingsfolder

Der Profilordner von Firefox wird im Windows-Explorer geöffnet. Als nächstes erstellen wir im selben Ordner einen neuen Ordner mit dem Namen “chrome”. Wir wechseln in diesen Ordner und erstellen eine neue Datei mit dem Namen “userContent.css”. Um eine Webseite an die eigenen Bedürfnisse anzupassen, benutzen wir den “Selektor @–moz-document domain”. Dieser dient als obere Ebene für die anzupassende Seite. Wir öffnen dazu die “userContent.css”-Datei mit einem beliebigen Texteditor (Tipp: Mit notepad++ lässt es sich gleich viel besser arbeiten) und fügen folgenden Text ein:

@-moz-document domain(zu_veraenderte_domain) {
    /* eigenen Style hier definieren */
}

Wenn wir nun beispielsweise auf der Seite xuad.net die Überschriften der zweiten Ordnung (h2) überschreiben wollen (Hintergrund: rot, Schriftfarbe: gelb), genügen folgende Zeilen in der “userContent.css”. Anmerkung: Damit das CSS-Style nicht von der Seite überschrieben wird, muss das Attribut “!important” bei jeden Style angefügt werden!

@-moz-document domain(xuad.net) { 
    h2 {
        background: red !important;
        color: yellow !important;
    }
}

Nach den Änderungen müssen wir den Firefox neustarten, damit die Änderungen wirksam werden!

xuad_net_custom_css

Über Geschmack lässt sich bekanntlich streiten, aber es funktioniert ;) .

Style für den Google Chrome Browser anpassen

Chrome lässt sich genauso leicht anpassen, jedoch leider mit Einschränkungen. Wir erstellen erst eine Verknüpfung von Chrome, beispielsweise unter “C:\Temp”. Wir öffnen die Eigenschaften der Verknüpfung mit einem Rechtsklick und hängen bei “Ziel” den Parameter “--enable-user-stylesheet” an.

css_chrome_link_properties

Als nächstes klicken wir doppelt auf die Verknüpfung, damit unser Chrome-Browser mit dem angepassten Parameter gestartet wird. Durch den Parameter wird eine “Custom.css”-Datei samt Ordner im Chrome-Benutzerprofil-Ordner erstellt. Um die CSS-Datei zu bearbeiten, öffnen wir den Windows-Explorer und navigieren zu unserem persönlichen Chrome-Benutzerprofil-Ordner:

%HOMEPATH%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

In diesem Ordner öffnen wir mit einem beliebigen Texteditor die “Custom.css”. Leider unterstützt bis jetzt der Chrome keine Unterscheidung bei Domains, deshalb gilt der Style für alle Tabs im Chrome:

h2 {
    background: red !important;
    color: yellow !important;
}

Wenn es sich zwischenzeitlich geändert hat, könnt ihr gerne ein Kommentar auf der Seite hinterlassen. Domainspezifisch geht es allerdings mit einem Chrome-Plugin. Dazu mehr im folgenden Abschnitt.

Bequemer zum Ziel mit einem Chrome Add-On

Um domainspezifisch den Style unter dem Google-Chrome-Browser zu ändern, brauchen wir nur das Add-On “stylish” zu installieren (Menü » Einstellungen » Erweiterungen » Mehr Erweiterungen herunterladen). Nach dem Installieren befindet sich oben auf der rechten Seite das Stylish-Symbol. Wir klicken auf dieses Symbol und können mit “Installierte Syle verwalten” unsere Styles anlegen und bearbeiten.

chrome_stylish_step1

Im Anschluss öffnet sich ein neuer Tab, in welchen wir neue Stile festlegen können. Wir klicken auf “Neuen Stil schreiben”, geben dem Stil einen Namen und fügen unseren CSS-Code bei “Code” ein. Mit dem Button “Angeben” bei “Gilt für” können wir die Domain, auf welche sich der CSS-Code auswirken soll, definieren. Als nächstes nur noch auf “Speichern” klicken und die die Änderungen werden sofort wirksam.

chrome_stylish_step2

Sylish Add-On für Mozilla Firefox

Das Add-On verhält sich beim Firefox ein wenig anders. Wir müssen wie bei der “userContent.css”-Datei den globalen Selektor für die Domain mit angeben. Jedoch brauchen wir nach dem Speichern keinen Neustart des Browsers vornehmen.

firefox_stylish

Nachtrag: Für Leute welchen auch der “Tablet-Style”, von der Bank mit dem blau-orangenen Logo, bitter aufstößt habe ich mal den Style ein wenig angepasst:

/* Fuer Firefox */
@-moz-document domain(banking.BANKNAME.de) { 
    h3.obligo,
    table tbody,
    table.obligo tbody tr td,
    table.obligo tr td a.fake,
    table tbody tr td.umsatzbetrag,
    .kontoselectorrow div.betrag {
        font-size: 12px !important;
    }

table.obligo tbody tr td {
        padding: 10px 8px 10px 0 !important;
    }
}


/* Fuer Chrome. Gilt fuer (URLs beginnent mit): https://banking.BANKNAME.de */
h3.obligo,
table tbody,
table.obligo tbody tr td,
table.obligo tr td a.fake,
table tbody tr td.umsatzbetrag,
.kontoselectorrow div.betrag {
    font-size: 12px !important;
}

table.obligo tbody tr td {
    padding: 10px 8px 10px 0 !important;
}