Johnes' Blog

MT-Seitenlayout den eigenen Bedürfnissen anpassen

[Johnes]

Um die Seite seinem eigenen Wünschen anzupassen, wird für Firefox oder ähnliche Browser, ein Plugin benötigt. Eines dieser Plugins, ist z.B. Stylish für Firefox und auch Chrome.

Meine Beschreibung, bezieht sich auch Firefox und Stylish ab 1.1.2

Als Erstes, muss das Plugin installiert werden. Das geht am einfachsten über das Menü (Extras/Add-ons). Ins Suchfeld Stylish eingeben und Suche starten. (Oder, hier klicken!) Wenn das Plugin gefunden wurde, einfach "Zu Firefox hinzufügen" anklicken und nach erfolgter Installation, Firefox neu starten.

Nach dem Neustart des Browsers, findet man unter Extras/Add-ons im Menü, den Reiter "Benutzerstile"

Über "neuen Stil erstellen", lässt sich dann ein neues Schema erstellen und anpassen.

Als Erstes, muss der Name des Stils eingegeben werden. (z.B. "Motor-Talk.de") Es kann aber auch ein anderer beliebiger Name eingegeben werden.

Im größeren Textfeld muss dann eingegeben werden, auf welche Seite der Stil seine Anwendung findet.

Dies geschieht über den Befehl:

Code:
@-moz-document domain("motor-talk.de")

Die Stilinformationen für die so angesprochene Site, werden von geschwungenen Klammern ("{}") umfasst. Jeder einzelne TAG, der bearbeitet wird, wird ebenfalls von einer geschwungenen Klammer umfasst.

Um zum Beispiel den Stil eines Zitats etwas anzupassen, kann dies Skript verwendet werden:

Code:

@-moz-document domain("motor-talk.de")
{
blockquote em { font-weight:bold!important; color:black!important; font-size:80%!important; }
blockquote { font-size:90%!important; line-height:125%!important; }
}


Aus "Original geschrieben von ..." wird "Original geschrieben von ..."

Der Text des Zitats, wird auch kleiner und die Zeilenabstände sinken etwas, was den Platzverbrauch vermindert und das Zitat etwas mehr vom restlichen Text/Beitrag abhebt.

Über "blockquote", werden nur Zitate angesprochen. Über "blockquote em", wird nur der erste (i)-TAG angesprochen. (i.d.R. das "Org. geschrieben von...") Die weiteren (i)-TAGs, werden normal behandelt.

Wichtig ist, dass jeder CSS-Befehl von einem "!important;" gefolgt wird! Dies bedeutet, dass alle anderen Einstellungen zuvor und folgend ignoriert werden, solange die folgenden Befehle nicht auch wichtig/important sind.

Um zum Beispiel den size-Tag zu bearbeiten und die Zeilenabstände bei (size=1) zu verringern, langt es, den Stil für "size1" zu bearbeiten.

Code:
size1 { line-height:125%!important; }

Damit, wird bei Verwendung der kleinen Schriftgröße, auch Zeilenhöhe eingespart. Original, ist es so, dass sich nur die Schriftgröße, aber nicht die Zeilenhöhe verändert. Dies finde ich nicht so klasse, da sich damit der Sinn der kleineren Schriftgröße aufhebt.

Mein aktuelles Style ist eine Gegenentwicklung und Fehlerbehebung zur zentrierten Darstellung: (leicht gekürzt!)

Code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
domain("motor-talk.de")
{
/* Body */
body, .sizel, .sizem {min-width:99%!important; width:99.9%!important;}
.sizel, .mt-footer, .sizem, .mtb {min-width:99.9%!important;}
 
/* Dash */
.mtnet-pagewidth { width:99%!important; padding-right:0!important;}
 
/* Main */
#maincolumn {width:76%!important;}
#mainwrapper_m {width:100%!important;}
#mainwrapper_l {width:100%!important;}
#contentblatt {width:100%!important;}
 
/* Editor */
div.editorWrapper {width:100%!important;}
 
}