Colorbox mit alternativem CSS

[Cyberlussi]

Hi,

im Core von Contao 3 ist ja nun Colorbox drin - super! Allerdings nur mit einem CSS, ich möchte eine Alternative einsetzen. Also Colorbox "Original" gezogen, in meinen projektspezifischen files abgelegt und das gewünschte CSS file im Layout manuell hinzugefügt. Allerdings werden die Bilder, die dieses CSS per url() einbezieht, nicht relativ von dort bezogen, sondern die site base wird wohl genommen - ergo die Bilder werden nicht gefunden.

Was muss ich denn in Contao 3 machen, dass ich die Core (Colorbox) CSS einfach und updatesicher "überschreibe"?

[jubel]

Du passt einfach das Template (Kopie) an. Dort gibt es eine einfache Zeile:
colorbox.jpg

[Cyberlussi]

hm ... ja und nein.

Habe eine Kopie von j_colorbox.html5 in den /templates Ordner kopiert. Dort geändert. In /files/lib/jquery/colorbox/ das Original entpackt abgelegt. Das kopierte template habe ich geändert zu

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'files/lib/jquery/colorbox/1.3.20/example1/colorbox.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop:false,
        rel:$(this).attr('data-lightbox')
      });
    });
  });
})(jQuery);
</script>

Ich erhalte immer noch Fehler, da der Pfad nicht stimmt (Firebugausgabe)

"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/controls.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/border.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/overlay.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/loading_background.png"
"NetworkError: 404 Not Found - http://www2.xyz.de/assets/css/images/loading.gif"

Im Original CSS sieht es beispielhaft so aus:

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}

Sieht für mich so aus, als ob /assets/css/ die Basis für alle CSS ist - ich hatte erwartet, dass die Basisurl der Ordner des CSS ist. Eigentlich wollte ich /assets/ nicht mit neuen Dateien füllen. Das finde ich nicht sehr updatesicher. Das CSS zu ändern (mit ../../ arbeiten) ist auch eher lästig, wenn ich fertige js/CSS Scripte aus dem Netz hole - wie z.B. colorbox. Wäre schön, wenn man sowas einfachst einbinden könnte.


Ich bin mir nicht sicher, ob meine Gesamtstrategie richtig ist? Sollte ich besser ein privates Modul entwicklen und dort alle JS/CSS ablegen, anstatt nur in /files und /templates zu arbeiten?!? Muss/Sollte man /assets mit neuen Daten füllen??

[jubel]

Es funktioniert ganz (update)sicher. Vielleicht checkst du nochmals alle Pfade:

Ich habe ein Verzeichnis
- ...\files\css mit der CSS-Datei darin (bzw. Kopie)
- ...\files\css\images mit den zugehörigen Bildern (bzw. Kopie)
- Pfadangaben im CSS: background:url(images/controls.png)
- Template (Kopie): $GLOBALS['TL_CSS'][] = 'files/css/colorbox.css||static';

[deitso]

Hallo,

ich hatte dasselbe Problem. Nach etwas längerer Suche, habe ich jetzt auch die Lösung gefunden.
Leider ist es nirgends so richtig beschrieben, doch hier [1] habe ich einen Beitrag gefunden. Hier noch der Link zur Code Änderung [2].

Zum Einfügen von CSS wurde noch ein zweites Argument hinzugefügt. Im default Template ist es enthalten.

$GLOBALS['TL_CSS'][] = 'files/lib/jquery/colorbox/1.3.20/example1/colorbox.css||static'; 

Erstes Element steht für den Mediatyp, zweites für statische Scripte.

Änderst du also nur den Pfad, hast du ein Problem. Liegt daran, dass das CSS statisch hinzugefügt wird und damit alle Abhängigkeiten innerhalb der Datei. Dadurch werden die Images nicht nach Asset/... transportiert sondern es sollte dort liegen wie im Script beschrieben.

Besser ist also:

$GLOBALS['TL_CSS'][] = 'files/lib/jquery/colorbox/1.3.20/example1/colorbox.css|<mediatyp>'; 

Jetzt fehlt nur noch ein drittes Argument in dem man angeben kann bis zu welcher Größe die Bilder in das CSS eingebunden werden, sofern es nicht statisch ist.

Gruß,
--
[1] https://github.com/contao/core/issues/3161
[2] https://github.com/contao/core/commi...8bdafa9d832f3f

[Cyberlussi]

Super. Genau das ist es. Funktioniert nun.

$GLOBALS['TL_CSS'][] = 'files/lib/jquery/colorbox/1.3.20/example1/colorbox.css|all';

Danke!

[ciaobello]

Es funktioniert ganz (update)sicher. Vielleicht checkst du nochmals alle Pfade:

Ich habe ein Verzeichnis
- ...\files\css mit der CSS-Datei darin (bzw. Kopie)
- ...\files\css\images mit den zugehörigen Bildern (bzw. Kopie)
- Pfadangaben im CSS: background:url(images/controls.png)
- Template (Kopie): $GLOBALS['TL_CSS'][] = 'files/css/colorbox.css||static';

oder

- Template (Kopie): $GLOBALS['TL_CSS'][] = 'files/css/colorbox.css|all';

Ich habe schon viel damit rum getestet aber noch nicht richtig den dreh raus wie es gehen soll.

mit |all zeigt es zumindest die Controlls alle an. Mit ||static zeigt es mir die Controls nicht an.

Zur info, ich verwende das k0001 (freies Theme) das ich für contao3 angepasst habe.
Habe auch mit dem Seitenformat html5 und xhtml rumgespielt. Macht aber kein unterschied.

So sieht es mit dem Example5 von colorbox aus und mit der Version |all:
example5_.jpg

[Cyberlussi]

Hi,

also bei mir funktioniert es nur, wenn ich anstatt "||static" "|all" oder auch "|screen" verwende (man beachte die zwei Zeichen || und das eine Zeichen |).

Was man auch noch beachten sollte: nicht zwei ähnliche Templates einbinden. Das hatte ich fälschlicherweise gemacht. "j_colorbox" (default) und "j_coloxbox_meine_anpassung" im Layout aktiviert. Cache leeren hilft auch immer vorsorglich (lokal und Contao)

[Anke]

Hallo,

in Contao 3.5.9 sieht die Codezeile im j_colorbox-Template jetzt so aus:

$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';

Wie muss die Zeile aussehen, wenn ich eine angepasste CSS in /assets/css ablegen will, so dass aber weiterhin die Grafiken aus dem original Colorbox-Verzeichnis geholt werden? (Ich habe verschiedenes ausprobiert, auch eure Beispiele, aber die Navigationsicons werden leider nicht geladen.)

Und wie kann via Template auf ein updatesicheres, eigenes Colorbox-Theme (CSS und Grafiken) unte /files referenzieren?

Viele Grüße,
Anke

[00-schneider]

Hallo,

ich würde gern die colorbox wie im Beispiel 3 einsetzen (http://www.jacklmoore.com/colorbox/example3/).

Ich habe schon verschiedenes ausprobiert, aber ich bekomme das nicht so umgesetzt.
Wo muss ich welche Dateien aus dem Originaldownload hinkopieren? So wie ich die Posts, die ich bisher gelesen habe, müsste dann doch nur noch im template der Pfad für die css geändert werden. Ist das so korrekt?

Contao 3.5.28
Colorbox 1.6.1

Viele Grüße
00-schneider

@edit: Problem gefunden, hab eine falsche Datei eingebunden. Jetzt klappt alles