dk_caroufredsel - Pagination CSS

[derRenner]

Hallo,

wie habt ihr das mit der CSS-Formatierung bei der zugeschaltenen Pagination gelöst?

Die Klassen, die vorhanden sind, sind ja nicht in der "richtigen Reihenfolge" vorhanden.
Also es kommt ja zuerst .caroufredsel_prev, dann .caroufredsel_next und zuletzt .caroufredsel_pagi
Nur die Klassen gestaltet, ohne Positionierung schaut dann das mal so aus:
carou_pagi_01.jpg

Wenn nun die Reihenfolge so wäre: prev pagi next
dann könnte man doch mit einem float:left; alle schön nacheinander positionieren.

Ich hab das aber jetzt mal mit position:absolute; gemacht - damit lassen sich die Klassen
natürlich schön nebeneinander "auffädeln" .... aber: der padding zum image geht damit verloren.
carou_pagi_02.jpg

Als Abhilfe dafür habe ich einen margin auf das image gelegt, somit lässt sich das Ganze dann
auch schön anschaubar darstellen. Alles super!
carou_pagi_03.jpg

Jetzt aber kommt das grosse ABER:
bei einem möglichen zweiten/weiteren, in der Website eingebauten, Karussell OHNE die Pagination
tritt natürlich auch das margin zum image in Kraft und es zeigt mir dann unterhalb des Sliders
einen unschönen breiteren Rand (hab ich nicht getestet, war mal nur so eine Überlegung).

Wie gestaltet ihr also so eine Pagination??
Oder fehlen in der Erweiterung doch noch ein "Wrapper" rund um die Pagination, sodass man diese
dann, mit einer eigenen Klasse versehen, wieder unterschiedlich gestalten kann?
Bin da nicht der Profi, wie man sowas am Besten angeht ...

Grüsse
Bernhard

[Dirch]

Hi Bernhard,

es kann gut sein, daß die Templates der Erweiterung an dieser Stelle noch nicht ganz perfekt sind. Ich erstelle gerade einen CSS-Skin und arbeite da eigentlich nur mit absolut positionierten Elementen. Vielleicht kann man hier noch was optimieren. Unter anderem habe ich deshalb den Erfahrungs-Thread aufgemacht. =)

Du kannst dir aber auch selbst abhelfen in dem du dir das Template kopierst und an deine Bedürfnisse anpasst. Die Reihenfolge der Bedien-Elemente ist ziemlich egal und auch ob man dort noch weitere Divs drum herum setzt. Wichtig ist nur, daß du die Klassennamen beibehältst, denn anhand dieser erkennt das Script das entsprechende Element. Man kann aber nicht prinzipiell sagen, daß die Pagination zwischen prev und next gehört. Was wenn jemand diese links darstellen möchte und prev/next rechts? Es gibt an dieser Stelle daher kein richtig oder falsch, sondern es ist immer individuell abhängig davon wie man es darstellen will.

Das große ABER kannst du ebenfalls umgehen bzw. wird dir keine Probleme bereiten. Jedes Karussell hat eine eindeutige ID auf den Elementen. Wenn du allgemein für alle etwas gestalten möchtest nimmst du die Klasse ohne ID, sonst die mit ID. Wenn du dir den Quelltext anzeigen läßt kannst du die IDs sehen. Die ID ist letztlich nur die Contao-Element-ID. Diese bleibt so lange gleich bis du das CE-/Modul-Element durch ein neues ersetzen würdest. Aber das macht man ja eher weniger.

Hoffe es hilft dir so erstmal weiter. Grüße...
...Dirk

[derRenner]

Danke Dirk für deine Info,

das sind schon mal gute Ansätze, mit denen ich weiter machen kann!
An die ID hatte ich im Moment gar nicht gedacht ...

Dass ich das Template anpassen kann, daran hatte ich gedacht, weil ich auch die 'prev' und 'next' Texte
anpassen wollte. Aber leider habe ich mit php und den damit verbundenen Skripten überhaupt keine
Erfahrung ... ist aber dann wohl ein guter Zeitpunkt da mal reinzuschnuppern

Grüsse
Bernhard

[Dirch]

Dass ich das Template anpassen kann, daran hatte ich gedacht, weil ich auch die 'prev' und 'next' Texte
anpassen wollte. Aber leider habe ich mit php und den damit verbundenen Skripten überhaupt keine
Erfahrung ... ist aber dann wohl ein guter Zeitpunkt da mal reinzuschnuppern

Die Texte selbst sind eigentlich nur Platzhalter, weil die meisten ja doch grafische Elemente einsetzen und man sollte sie dann auch im Template anpassen, wenn man Texte haben will. So richtig umfangreiche PHP Kenntnisse brauchst du dafür nicht. Eigentlich nur das wissen mit der IF-Abfrage und wie man etwas ausgibt.

<?php echo $this->id; ?>

gibt z.B. an dieser Stelle die ID des Elements aus.