Überschrift anpassen

Mit margin, padding und line-height können Sie die Listenelemente abhängig von der gewünschten Darstellung in die richtige Position rücken. Eigene Formatierungszeichen fügen Sie über den Hintergrund ein. Abhängig vom gewählten Zeichen bringen Sie dieses mit den Positionsangaben am Ende der background-Eigenschaft in Position. Kostenlose Icons finden Sie in verschiedenen Bibliotheken im Internet - die im Beispiel verwendeten stammen von Joseph North und der Website Sublink (sublink.ca/ ).Enthalten Ihre Twitter-Nachrichten Links zu weiterführenden Informationen, können Sie auch die Verlinkungen mit Hilfe von CSS anpassen. Dazu formatieren Sie die Anchor-Tags innerhalb der einzelnen Listenelemente.

Diesen weisen Sie beispielsweise eine alternative Farbe zu oder eine veränderte Darstellung der Verlinkung ohne Unterstrich.Die Twitter-Schnittstelle liefert zusätzlich innerhalb der Listenelemente weitere Informationen mit der Auszeichnung <small>...</small> aus. Im Beispiel werden diese Daten in Blockdarstellung sowie kursiv dargestellt.

Überschrift anpassen

Neben den Listenelementen, die über das Plug-in angeliefert werden, haben Sie bei der Integration noch eine Überschrift vom Typ h3 definiert. Diese steht bis jetzt unformatiert in Ihrer Twitter-Box und nutzt die gleiche Schriftart und Ausrichtung wie der folgende Text. Möchten Sie den Namen Ihres Twitter-Feeds optisch hervorheben, setzen Sie dazu am besten die Überschrift als gestalterisches Mittel ein. Im Beispiel wird die Überschrift zentriert, ein wenig vergrößert sowie der Abstand nach oben und unten erhöht.

Eine weitere Option an dieser Stelle wäre der Einsatz einer komplett anderen Schriftart. Dabei würde sich ein Webfont anbieten, da Sie mit diesem unabhängig von den lokal installierten Schriften des Anwenders sind. In diesem Fall stellen Sie eine Verbindung zum Speicherplatz der Schriftart her und binden diese über die Eigenschaft font anstelle von Arial ein.Eine gute Auswahl an kostenlosen Schriftarten bietet Ihnen beispielsweise Google an. Aus dieser Bibliothek kommt der Webfont Changa One zum Einsatz. Diese Schrift integrieren Sie in zwei Schritten: Binden Sie als Erstes die Webfont-Bibliothek über einen Link im HTML-Header ein.

Ändern Sie anschließend die Schriftart an der entsprechenden Stelle, an der Sie zum Einsatz kommen soll.

In der Regel liefern Ihnen die Anbieter diese Informationen zur Verlinkung der Schriften direkt bei der Auswahl mit. Eine komplette Übersicht aller zur Verfügung stehenden Schriften finden Sie auf der Google-Webfont Seite (www.google.com/webfonts ).Wenn Sie Arial als alternative Option verwenden möchten, setzen Sie Ihre gewählte Schriftart einfach an die erste Stelle in der Auswahlliste. Diese arbeitet Ihr Browser in der angegebenen Reihenfolge ab.

Formatierung nach Alter

Mit CSS3 ist neben den abgerundeten Ecken noch eine Reihe von weiteren Formatierungen hinzugekommen, die für die Formatierung von Twitter-Elementen nützlich sein könnten. Die einzelnen Listenelemente sollen abhängig von ihrer Listenposition in unterschiedlicher Größe erscheinen: je höher der Listeneintrag platziert ist, umso größer soll er dargestellt werden.

Damit richten Sie auch bei einer größeren Anzahl von Elementen den Fokus immer auf die aktuellsten Beiträge. Dank CSS3 und die Pseudoklasse nth-child() lässt sich die Position ohne größeren Aufwand ermitteln. Diese Klasse ermittelt ein Element in Abhängigkeit vom Listenplatz beim übergeordneten Element.

Wem diese Beschreibung zu kryptisch erscheint: Sie definieren das Element abhängig von der Anzahl der gleichen Vorgängerelemente, die sich auf derselben Ebene befinden. Möchten Sie beispielsweise innerhalb der Listenelemente das vierte Element ansprechen, dann lautet der Aufruf über die Pseudoklasse entsprechend li:nth-child(4).Die Zuweisung der Formatierung zu den einzelnen Listenelementen führen Sie vom Allgemeinen hin zum Speziellen durch: Geben Sie erst allen Listenelementen eine Grundformatierung und überschreiben Sie diese anschließend schrittweise, je weiter es in Richtung Spitze geht.

Zugriff auf Elemente

Die Grundformatierung der Elemente führen Sie über die allgemeine Ausprägung der Klasse durch: li:nth-child(n) weist allen Listenelementen die gleiche Formatierung zu. Generell könnten Sie in diesem Fall die Formatierung auch direkt dem Listenelement zuweisen und nicht zusätzlich die Pseudoklasse verwenden. Da ältere Browser aber nth-child() nicht interpretieren können, eine einfache Formatierung der Listenelemente aber sehr wohl, würden zum Schluss all Ihre Elemente wie die unbedeutendsten Einträge vom Ende der Liste aussehen.Die nächste Definition ist davon abhängig, wo Sie die nächste Grenze für die Formatierung setzen möchten. Wenn die ersten sieben Elemente ein abweichendes Aussehen bekommen sollen, lautet die Zuweisung entsprechend li:nth-child(-n+7). Werden die einzelnen Listenelemente durchwandert, beginnt Ihr Browser damit, im ersten Schritt dem siebten Element die Formatierung zuzuweisen, anschließend dem sechsten bis hin zum ersten.