Pagination mit Bildern / unterschiedliche Paginationen

**tofo** · 18.03.2017, 07:02

Hallo,

ich hab einen Knopf im Hirn und komm im Moment nicht weiter.

Pagination mit Bildern:
Ich will meinen Comic-Blog mit einer eigenen Pagination bereichern, was ich über pagination.html5 erreiche. Soweit, so gut. Was ich aber machen möchte ist, dass ich anstatt der normalen Textlinks "Vorwärts" oder "Zurück" eigene Bilder mit Hover-Effekt einbauen will - leider fehlt mir da die Idee dazu, wie ich das in Contao lösen kann. In einer rein statischen Seite wäre die Lösung einfacher.

Erster Wurf dafür wäre, pagination.html5 so zu ändern, dass zuallererst nur "Vorwärts" und "Zurück" aufscheinen, sobald das Template aufgerufen wird (hasNext/hasPrevious). Allerdings fehlt mir noch die rettende Idee, den Link fürs Blättern mit einem Bildchen, noch dazu mit Hover-Effekt (Farbenwechsel bei onMouseOver), reinzubringen. Inserttags möglicherweise, aber gerade mit der Erweiterung habe ich noch keinerlei Erfahrung - und es gibt eigentlich wenig bis keine Doku dazu.

Unterschiedliche Pagination:
Die Pagination mit "Vorwärts" und "Zurück" wäre nur für eine etwas abgeänderte Newsliste. Im Archiv würde ich dann aber sehr wohl sehr gerne die normale Pagination mit einem Seitenzähler (Vorwärts / 1 / 2 / 3 / Zurück) versehen, aber nachdem ich pagination.html5 ja eigentlich angepasst habe, weiß ich nicht, wie ich unterschiedliche Templates für unterschiedliche Anwendungsfälle bei gleicher Funktion (nämlich Pagination) verwenden kann.

Wäre super, wenn mir jemand einen Tipp geben könnte, der möglicherweise so etwas schon mal realisiert hat. Hab zwar schon einiges im Internet recherchiert, allerdings verwende ich entweder die falschen Suchstrings oder ich komme auf teilweise veraltete Erweiterungen.

Besten, herzlichen Dank im Voraus!

lg

**Spooky** · 18.03.2017, 07:03

Warum nicht einfach per CSS..?

**tofo** · 18.03.2017, 07:05

Zitat von Spooky

Warum nicht einfach per CSS..?

Die Formatierung ist mir schon klar, nur keine Ahnung, wie ich anstatt der Textlinks die Bilder reinkriege und vor allem wie ich das in Kombination mit Problem Nr. 2 löse.

lg

**planepix** · 18.03.2017, 07:09

Zitat von tofo

Die Formatierung ist mir schon klar, nur keine Ahnung, wie ich anstatt der Textlinks die Bilder reinkriege und vor allem wie ich das in Kombination mit Problem Nr. 2 löse.

lg

Hallo tofo,

du kannst den Text mit text-indent ausblenden / verschieben und dann ein Hintergrundbild per CSS definieren. Dieses legst du dann gleich mit dem Hoverbild zusammen, so dass beim Hovern das Hintergrundbild verschoben wird. Stichwort: CSS-Sprites.

**Spooky** · 18.03.2017, 07:14

Auch die Pseudo Elemente :before und :after nicht vergessen.

Jedenfalls bekommst du dein Vorhaben ohne Änderung des Pagination Templates hin.

**tofo** · 18.03.2017, 07:15

Hm, ich glaube, ich habe da schon eine Vermutung, wo Ihr mich da hinführen wollt.

Mit text-intent oder display:none einfach die Sachen ausblenden, die keiner braucht. Und wenn ich mich recht erinnere, habe ich da mal was gefunden, dass ich anhand einer Klasse und einer Abfrage in einem Template unterschiedliche Sub-Templates nehmen kann.

lg