pixel pixel



Layoutbasteleien mit Antville 1.2

 Für Wordpress gibt es ja einige Templates, bei denen die erste Story als sog. "featured item" herausgehoben erscheint. "Fresh News" ist eines dieser Templates; zu besichtigen z.B. bei Dirk Olbertz. Gefällt mir außerordentlich gut, sowas. (Eigentlich kann man in diesem Template sogar jede beliebige Story als "featured item" kennzeichnen, nicht nur die neueste, aber das soll erstmal egal sein.)

Bisher bin ich jedenfalls daran gescheitert, etwas ähnliches für Antville umzusetzen: Nur Javascript-Lösungen fielen mir ein, bei denen man sich den Container der ersten Story via DOM sucht und ihm auch die Style-Eigenschaften per JS zuweist. Alles nicht sehr schön und bei alten Browsern wahrscheinlich problematisch.

Mit Antville 1.2, seinen Subskins und dem neuen list-Macro wird das plötzlich pipileicht. Javascript braucht man nicht mehr. Drei kleine Änderungen in den Skins genügen:
  1. Eine Custom Skin Story.firstID anlegen. Dort rein nur das Macro <% story.id %> packen
  2. Die Skin Story.preview öffnen und deren Inhalt mit einem zusätzlichen div-Element umschließen, nämlich mit <div id="story<% story.id %>"> ... </div>
  3. Im Stylesheet ein neues Format mit der Syntax
    #story<% list stories 1 skin=Story#firstID %> { } definieren. Dort hinein dann die gewünschten Style-Eigenschaften packen. In meinem Testbeispiel hat der Eintrag die folgende Form:
    #story<% list stories 1 skin=Story#firstID %> {
    font-weight: bold;
    border: 2px dotted #ff3300;
    padding: 10px;}
Fertig. Das Ergebnis kann hier besichtigt werden: Screenshot.
Und das, meine Herrschaften, ist erst der Anfang....
   







pixel