Bequemer als Backup Bequemer als Backup - Wuala

Praxis | Website-Modding
sich die Schrift zu eng an den Kasten, was
man mit einer weiteren CSS-Eigenschaft padding-left
und dem Wert 1em ausbügelt. Und
schließlich schiebt die Änderung der Eigenschaft
text-align auf left den Text „Anzeige“
über dem Werbeblock nach links.
Firebug eignet sich also prima für Gestaltungsexperimente,
aber es sichert die Änderungen
nicht – nach dem nächsten Laden
sieht die Seite wieder aus wie vorher. Um sie
dauerhaft zu speichern, empfiehlt sich die
Erweiterung Stylish, die einen eigenen Editor
mitbringt und Benutzer-Stile für verschiedene
Websites verwalten kann.
Stylish erweitert die Statusleiste um ein
Icon, über das man eigene Stylesheets bearbeiten
und aktivieren kann. Mit einer heiseonline-Nachricht
auf dem Schirm erzeugt der
Menüpunkt „Stil erstellen/Für diese URL“
eine Vorlage. Da die Änderungen nicht nur
für diese eine, sondern für alle Nachrichten
gelten sollen, ersetzen Sie die Anweisung url
durch url-prefix und kürzen die URL ab, sodass
das Gerüst jetzt Folgendes enthält:
@-moz-document —
url-prefix("http://www.heise.de/newsticker") {
}
Zwischen die Klammern kommen die zuvor
erprobten CSS-Angaben:
.bcadv {
float: right;
text-align: left;
padding-left: 1em;
}
Der sogenannte Selektor .bcadv besagt, dass
die Anweisungen in den geschweiften Klammern
nur für Elemente der Klasse bcadv gelten
sollen, also solche, die das Attribut class="bcadv"
enthalten. Ein Klick auf den Button „!important“
ergänzt in jeder Zeile das Zauberwort
!important, das den Browser anweist, auf jeden
Fall diese Definition bei der Darstellung anzuwenden.
Ohne diese Anweisung würde der
Browser bei einander widersprechenden Styles
denen der Webseite den Vorzug geben.
Nach dem Speichern sollten die Anzeigen in
allen Newstickermeldungen rechtsbündig erscheinen
und vom Text umflossen werden.
Wer heise online grundlegend umstricken
will, legt mit Stylish einen Stil an, der für die
ganze Domain www.heise.de gilt. Nostalgiker
können zum Beispiel zur alten Schrift zurückkehren,
indem sie die CSS-Eigenschaft
font-family setzen. Weisen Sie sie dazu einfach
dem -Tag zu, das diese Eigenschaft an
alle anderen Elemente der Seite vererbt:
body {
font-family: Times !important;
}
Die Top-Meldung oben auf der Startseite
nimmt zu viel Platz weg? Kein Problem. Ein
bisschen Klicken in Firebug fördert den Bezeichner
des Containers zu Tage: news_topteaser.
Die folgenden Anweisungen beschränken
ihn auf eine Höhe von 40 Pixeln und sorgen
dafür, dass überlaufende Texte, Bilder
und Links einfach abgeschnitten werden:
.news_topteaser {
height: 40px !important;
overflow: hidden !important;
}
Will man diese Nachrichten trotzdem lesen,
hilft ein CSS-Trick, der beim Überfahren mit
der Maus diesen Bereich aufklappt. Dazu benötigt
der Browser eine zweite Bereichsdefinition,
deren Selektor .news_topteaser um :hover
ergänzt wird:
.news_topteaser:hover {
height: 200px !important;
overflow: auto !important;
}
Der radikalere Schritt, die Top-Meldung komplett
verschwinden zu lassen, gelingt mit nur
einer Zeile in .news_topteaser: Die Anweisung
display: none !important zaubert die redaktionellen
Schwerpunkte weg.
Mit ausgefeilteren Selektoren lassen sich
gezielte Veränderungen vornehmen, beispielsweise
in Nachrichten interne und externe
Links in verschiedenen Farben hervorheben.
Dazu muss man erst einmal herausfinden,
wie sie sich im XHTML unterscheiden:
Externe Verweise in heise online-Meldungen
besitzen ein target-Attribut, das die so verlinkte
Seite in einem neuen Browserfenster öffnet.
Heise-interne Links enthalten stattdessen
ein title-Attribut mit der Überschrift des
verlinkten Artikels. Diese Unterschied kann
man sich zunutze machen, um die Links mit
unterschiedlichen Farben oder auch Textund
Bildzusätzen darzustellen:
#mitte_news a[title] {
color: #C3C !important;
text-decoration: none !important;
}
#mitte_news a[target] {
color: red !important;
text-decoration: underline !important;
}
Der Selektor #mitte_news a[title] bedeutet dabei:
Ein -Element, das ein Attribut target besitzt
und irgendwo innerhalb eines Elements mit
der ID mitte_news vorkommt. Ganz allgemein
kann man in Selektoren mehrere Wörter mit
Leerzeichen hintereinander hängen: x y z bedeutet
also ein z irgendwo innerhalb eines y
irgendwo innerhalb eines x.
Das Menü auf der rechten Seite verbraucht
viel Platz, den mancher Leser vielleicht lieber
für die Meldung nutzen will. Wie eine Untersuchung
mit Firebug zeigt, umschließt ein div-
Container namens mitte den Meldungstext
(mitte_links) und das rechte Menü (mitte_rechts).
Meldungstext und Menü besitzen eine Breitenangabe
(width) in Prozent. Ändert man
diese Werte in Stylish beispielsweise auf 80
und 20 Prozent, gewinnt die Meldung Platz:
#mitte_links {
width: 80% !important;
}
#mitte_rechts {
width: 20% !important;
}
Allerdings ragt jetzt der graue Hintergrund
des Menüs teilweise in die Meldung hinein.
Der Grund ist ein Hintergrundbild, das der
Container mitte zeichnet und das mit einer
weiteren eigenen Definition verschwindet:
#mitte {
background: white !important;
}
Die Ergänzung von background: #EEE !important; im
Abschnitt #mitte_rechts färbt das dadurch weiß
gewordene Menü wieder grau ein.
Die Beispiele zeigen natürlich nur einen
Bruchteil der Möglichkeiten von CSS. Weitere
erschließen sich durch Experimentieren mit
Firebug und beispielsweise die Lektüre der
CSS-Kapitel in SelfHTML [1].
Auch für Anwender, die nicht selbst gestalten
wollen, ist Stylish spannend: Die Er-
Firebug hilft bei
der Analyse und
beim Testen eigener
Benutzer-Stylesheets.
Es zeigt
HTML-Quelltexte
und CSS-Einstellungen
der Webseitenelemente
an, die
man gerade mit der
Maus überfährt.
c’t 2008, Heft 20
©
Copyright by Heise Zeitschriften Verlag GmbH & Co. KG. Veröffentlichung und Vervielfältigung nur mit Genehmigung des Heise Zeitschriften Verlags.
187