Colorbox Titel erscheint nur oben

[1chefkoch1]

Hallo liebes Forum,

ich möchte, dass die in Contao "eingebaute" Colorbox den Titel des Bildes unter dem Bild anzeigt. Wenn ich in der colorbox.css bzw. colorbox.min.css bei #cboxtitle die position von "top" auf "bottom" ändere passiert genau gar nichts. Leider ist Contao noch neu für mich und vom Programmieren verstehe ich wenig. Irgendwie scheint es mir aber so, als müsste es noch an anderer Stelle Anpassungsmöglichkeiten für das Erscheinungsbild der colorbox geben, wo ich auch den Titel entsprechend verschieben kann.
Kann mir jemand weiterhelfen? Vielen Dank.

A. Jano

[mlweb]

Das geht definitiv mit css und hat auch nichts mit contao zu tun. Wenn Du den Titel nicht absolut positionierst liegt er im Standardfluß der Elemente und erscheint unter dem Bild weil er im Code nach dem Bild steht.
Damit der Titel auch sichbar ist brauchst Du noch einen Abstand unten.
Schau Dir mal die Seite vom Entwickler des Templates an. Da kannst Du Dir von den Beispielen einiges abschauen.
Letztlich kommt es sehr drauf an was genau Du erreichen möchtest.
Benutze damit es updatesicher ist aber nicht die Originaldatei sondern verbinde eine Kopie des Templates j_colorbox mit Deiner eigenen css-Datei. Nur das ist Contao-spezifisch.

[1chefkoch1]

Vielen Dank erstmal. Es ist so, wenn ich die Position auf relative stelle wird der Titel in der Tat unten dargestellt, aber nicht unter dem Bild, sondern er sitzt quasi auf dem unteren Rand der Lightbox. Wie kriege ich ihn denn ein Stück unter die Lightbox?

Inzwischen habe ich folgendes versucht: Von der Entwicklerseite habe ich mir die Beispiele heruntergeladen und die entsprechenden css-Dateien und die image-files, in Contao durch die Dateien eines Beispiels ersetzt. Sollte die Lightbox jetzt nicht so aussehen wie im Beispiel? Stattdessen werden bei mir die Bilder erst gar nicht mehr in die lightbox geladen, sondern es öffnet sich eine schwarze lightbox und der Titel wird auch nicht dargestellt, weder oben noch unten.
Ich habe im nächsten Versuch auch mal die .js Dateien durch die des Entwicklers ersetzt. Gleiches Ergebnis.

[Spooky]

Du musst CSS, JS und HTML lernen um solche Dinge ohne fremde Hilfe umsetzen zu können. Alternativ kannst du dir auch andere "lightbox" Erweiterungen ansehen, wie zB tosrus, lightbox4ward, nivo_lightbox, magnific_popup

[1chefkoch1]

ok, ich verspreche, dass ich das alles lerne, aber kommt es keinem komisch vor, dass selbst wenn ich meine colorbox.css Dateien durch die orginal Beispieldateien des Entwicklers ersetze (und später habe ich ja auch noch die .js Dateien durch ersetzt), trotzdem die colorbox bei mir nicht so aussieht. Da liegt doch die Vermutung meinerseits nahe, dass von anderer Stelle als von der colorbox.css Datei noch irgendwelche Formatierungen vorgenommen werden. Alles was ich wissen will ist, ob es noch andere Dateien außer der colorbox.css gibt, von wo aus ich das Erscheinungsbild steuern kann.

[Spooky]

Änderungen, die du direkt in assets/jquery/colorbox/…/css/colorbox.min.css machst, sollten im Frontend sichtbar sein. Dort solltest du aber keine Änderungen machen.

[1chefkoch1]

Ok, dann bin ich ja an der richtigen Stelle. Die einzige Änderung, die nicht funktioniert ist die Position des Titels. Rahmenfarbe, Rahmendicke all das funktioniert ja.

[Andreas]

Benutze Firebug im FF (oder irgendein anderes webdeveloper tool, aber mit Firebug ist sowas am einfachsten).

Damit untersuchst du im FE die colorbox auf HTML und CSS. Du kannst direkt mit Firebug andere CSS-Eigenschaften und Werte ausprobieren.

Wenn du eine Lösung erarbeitet hast, dann setze dieses CSS in deine CSS-Datei. Lass die original CSS-Datei so wie sie ist. Du musst mit deinem CSS nur ein paar Werte überschreiben.

In diesem Fall findest du den div.cboxContent welcher das Bild, den Titel und noch anderes enthält. Dieser DIV bekommt oben durch margin:20px; ein wenig Platz, um den Titel später dort zu positionieren.

Das was du anders positionieren möchtest ist wahrscheinlich div.cboxTitle und div.cboxCurrent

Entferne also den "Platz" von 20px oben und erzeuge dafür einen darunter. Dann den Title und das Current (Bild x von Y) in diesem Platz positionieren. Die Eigenschaft top:-20px; kannst du mit top:auto; (oder auch unset od. initial) resetten.

Ich zeige ausnahmsweise mal absichtlich keine fertige Lösung, damit du auch noch ein wenig Spaß am Ausprobieren hast.

[1chefkoch1]

Ich zeige ausnahmsweise mal absichtlich keine fertige Lösung, damit du auch noch ein wenig Spaß am Ausprobieren hast.

Vielen Dank, Andreas, das hält die Motivation hoch!

Ich war noch mal mit Firebug zugange. Ich würde euch einfach bitten, euch die zwei Screenshots anzuschauen und mir zu erklären, was da los ist. In der css Datei sind #cboxtitle und #boxcurrent genau gleich definiert, bis auf left und right.
#boxcurrent wird auch unten dargestellt, #cboxtitle nicht. Im Firebug sieht man, dass da noch anderes css drin ist. Wo kommt z.B. display:block her? Und warum wir der title in block angezeigt und current nicht, obwohl es bei beiden steht?
Eine fertige Lösung muss nicht sein, aber ein Hint für den nächsten Schritt wäre toll.
lightbox1.jpg
lightbox2.jpg

[Andreas]

Schalte im BE den Debug-Modus ein, dann kannst du im FE genauer sehen, aus welchen Dateien das CSS kommt.

Deine Bilder nützen mir nichts, ich sehe da nichts von block. Abgesehen davon sind DIVs automatisch Block-Elemente. Und Elemente, welche absolut positioniert sind, sind auch automatisch block.

Aber stör dich nicht so sehr daran wo was herkommt, überschreibe einfach mit deiner CSS die Werte welche für dein Ziel nötig sind. Vergiss nicht top:auto; zu setzen, wenn du anstatt top:-20px; bottom:-20px benötigst.

ps: ach du meinst das block direkt im Element. Das ist sogenanntes Inline-Style, das wird meistens dynamisch von JS gesetzt.

[1chefkoch1]

Ok, die Sache läuft. Wenn ich Contao nicht erst seit 5 Tagen kennen würde, wäre ich sicher schneller auf die Lösung gekommen. Das Problem war diese Überschreiberei durch eine andere css-Datei. Ich habe die Seite fertig von einem Programmierer bekommen und der hat in contao/files/css in der design.css den #cboxtitle eben schon festgelegt. Und weil ich mein css immer in die colorbox.min.css reingeschrieben habe, wurde es immer überschrieben. Ich weiß, dass Ihr mich ein paar mal gewarnt habt, mein css genau da nicht reinzuschreiben, aber da ich überhaupt nicht wusste, wo sonst hin und ich auf einer lokalen Installation rummache, weil ich ja noch Contao-Anfänger bin, dachte ich mir nix dabei.
Besten Dank jedenfalls für Eure Geduld!