Eigene css in Extension für Frontend vorbelegen?

[Nils Heinold]

Hallo,

hab leider unter meinen Suchwörtern nichts gefunden.

Ich möchte bei der Frontend- Ausgabe einer selbst erstellten Extension die selbige mit eigenen CSS- Anweisungen "vorstylen".

Ein Element style im Template macht aber eine eigene CSS Definition im Themes - Stylesheets wirkungslos, so das man man das vordefinierte css nicht überschreiben kann.

Das ist blöd, da ich lediglich eine Vorgabe erzeugen will, von der der Enduser abweichen kann und soll. Er soll lediglich eine Möglichkeit des Aussehen erhalten, diese aber nach seinen Vorstellungen ändern können.

Seh ich den Wald vor lauter Bäumen nicht?

Danke im voraus

Nils

[soweit_ok]

Vordefinierte Elementklassen können ja durchaus sinnvoll sein. Wie Du schon schriebst, natürlich keine Inlinestyle im Template für optionale Formatierung. Warum gibst Du also den relevanten HTML-Elementen Deiner Erweiterung nicht einfach vordefinierte Klassen mit auf den Weg, so dass sie per CSS angesprochen werden können. Falls das komplexer ist, kannst Du ja außerdem mit der Erweiterung auch eine zugehörige CSS-Datei mit anbieten.

Und falls Du sicher bist, dass sie pro HTML-Seite nur einmal vorkommen können, kannst Du auch noch eine oder mehrere Id´s vorgeben. Unter denen könnten dann auch noch zusätzlich benutzerdefinierte Klassen verwendet werden.

[Nils Heinold]

@soweit_ok

kannst Du ja außerdem mit der Erweiterung auch eine zugehörige CSS-Datei mit anbieten.

vielleicht ist es das, was ich möchte.

Wie biete ich dies an, dass es in der Frontendausgabe sofort sichtbar ist, ohne das das die User im Backend meine css- Definition in ihre Themes - Seitenlayouts aktivieren müssen?

Ich möchte solchen Diskussionen aus dem Weg gehen!

Vielen Dank im voraus.

Nils

[soweit_ok]

Na ja, irgendwie muss es natürlich ins Seitenlayout eingebracht werden. Aber das kannst Du ja den Benutzern Deiner Erweiterung überlassen und einfach eine externe CSS-Datei mit ausliefern.

Die kann dann von den Benutzern Deiner Erweiterung unter Themes-Seitenlayout im Feld "Zusätzliche Head-Tags" durch Einfügen eines Links eingebunden werden:

<link rel="stylesheet" type="text/css" href="tl_files/mein_theme/css/erweiterung.css" media="screen" />

Ob ansonsten interne Stylesheets oder ebenfalls externe CSS-Dateien verwendet werden, ist egal. Ebenso könnten Benutzer auch Deine CSS-Datei als internes Stylesheet importieren. In dem Fall müssten sie natürlich in der entsprechenden Checkbox den Haken setzen, doch das ist ja klar.

Also alles kein Problem. Wichtig ist halt, dass keiner der Selektoren Deiner Erweiterung bereits vom Core oder von anderen Erweiterungen belegt ist. Am besten eine Namenskonvention, bei der das unwahrscheinlich ist.

[BugBuster]

Also ich packe eine css Datei mit bei und beschreibe im Wiki, das es diese gibt und wie man diese importieren und dann übers Layout einbinden kann.

Man könnte auch das im Modul automatisch machen und in den Moduleinstellungen eine Deaktivierung anbieten, fällt mir grad so ein ....

[do_while]

Ich habe das CSS teilweise eingebunden. Damit es nur auf Seiten erscheint, wo auch das Modul eingebunden ist, habe ich es in das Template hineingeschrieben:

<?php
  $GLOBALS['TL_CSS']['ticker'] = 'system/modules/ticker/html/style.css';
?>

Da das Array-Element voll namentlich definiert ist, wird auch bei mehreren Aufrufen auf einer Seite nur 1x das CSS eingebunden. Alternativ könnte man dies sicher auch in der compile()-Routine im Modul setzen.

In der config.php des Moduls ist es ungünstig, weil es sonst in jeder Seite vorhanden ist.

[soweit_ok]

@do_while
Gute Sache ... den Tipp werde ich mir merken.

[Nils Heinold]

@do_while

vielen, vielen Dank, das ist genau das, was ich gesucht habe. Diejenigen, die nur Word kennen und nichts von html oder css verstehen bekommen ein fertiges Layout und alle anderen User stylen dann mittels eigenem css, da dieses später nachgeladen wird.

Prima und Danke auch an soweit_ok und BugBuster für eure Tipps.

Euch einen interessanten Sonntag

Nils

[BugBuster]

Hier mal meine gesammelte Übersicht aus Sicht eines Moduls.
Hilft vielleicht noch dem einen oder anderen.
http://www.contao.glen-langer.de/API_Hook_Module.html

[dirkweimar]

Hmm, das oben von do_while beschriebene Vorgehen will bei mir einfach nicht klappen.

- Ich benutze contao 2.11.2

- Habe ins Template folgenden Code geschrieben

<?php $GLOBALS['TL_CSS']['twitter_search'] = 'system/modules/z_twitter_search/html/css/twitter_search.css'; ?>

<?php var_dump($GLOBALS['TL_CSS']); ?>

- Ausgabe:

array(1) { ["twitter_search"]=> string(59) "system/modules/z_twitter_search/html/css/twitter_search.css" } 

- Wenn ich "system/modules/z_twitter_search/html/css/twitter_search.css" im Browser an die Domain dranhänge, sehe ich den Inhalt der Datei, d.h. der Pfad ist korrekt.

- Habe testweise alle Templates im Ordner <ROOT>/templates gelöscht, um auszuschließen, dass es mit der geänderten fe_page zusammenhängt - bringt nichts.

Die CSS wird nicht geladen.

Hat jemand noch eine Idee, warum?

[Nils Heinold]

Vielleicht sollte es

<?php $GLOBALS['TL_CSS']['z_twitter_search'] = 'system/modules/z_twitter_search/html/css/twitter_search.css'; ?>

heißen, wie das Modul

Gruß Nils

[do_while]

Hallo dirkweimar,

das Prinzip sollte weiterhin funktionieren, in der Erweiterung ticker wird das so gemacht und funktioniert auch in 2.11.2. Der Name in der Klammer muss nicht zwangsweise der Modulname sein, das dient nur dazu, dass das Template bei mehrfacher Nutzung auf der gleichen Seite das CSS nicht mehrfach einträgt.

Hast Du vielleicht das fe_page so verändert, so dass die Standard-Mechanismen nicht funktionieren?

[dirkweimar]

Hallo und danke für die Hinweise! Ein Problem mit der fe_page kann ich ausschließen, meine angepasste Version hatte ich schon mal testweise aus dem Templates-Ordner gelöscht, das hat auch nichts gebracht. Das mit dem Namen habe ich auch mal ausprobiert - ohne Erfolg.

Mit einer frischen Standard-Installation funktioniert es allerdings. Seltsam ... ich mach erst mal den Contao-Check und melde mich noch mal, falls ich nicht weiter komme.

[fluppi]

Hallo,

an dem Thema sitze ich auch gerade und hätte dazu mal eine Frage. Man kann ja auch in der config.php an der Stelle, an der man ein Icon einbindet, auch ein Stylesheet einbinden, z.B. so wie hier in diesem Auszug aus der Helpdesk-Erweiterung:

/**
 * BACK END MODULES
 */
array_insert($GLOBALS['BE_MOD'], 0, array(
    'helpdesk' => array(
        'helpdesk_discuss' => array(
            'callback'        =>    'HelpdeskBackendModule',
            'icon'            =>    HelpdeskTheme::image('helpdesk16'),
            'stylesheet'    =>    HelpdeskTheme::file('frontend.css')
        ), 

Das scheint aber weder in der Helpdesk-Erweiterung noch in meiner eigenen, wo ich dies probiert habe, einen Effekt zu haben. Intuitiv hätte ich ja vermutet, dass dies genau das tut, was gewünscht ist, nämlich die angegebene CSS-Datei auf allen Seiten einbinden, auf denen das Modul eingebunden ist. Aber das tut es nicht, und ich finde auch keine Info, wozu das sonst gut ist.

Tschüss,
fluppi

[BugBuster]

Zum Einem würde ich das nicht über eine classe machen sondern direkt:

'stylesheet' => 'system/modules/meinmodulverzeichnis/meine.css' 

Zum Anderem ist diese CSS nur dann aktiv ,wenn das Frontend Modul auch in Verwendung ist auf der Seite die gerade aufgerufen wurde.

[fluppi]

Hallo,

ja, ich würde das auch einfach direkt machen, das ist ja ein Auszug aus dem Code von der Helpdesk-Erweiterung.

Wenn das CSS nur dann geladen würde, wenn das Modul auf der Seite eingebunden ist, wäre das doch genau das, was man will. Mir scheint aber es wird gar nicht geladen. Wie gesagt, weder beim Helpdesk (damit das CSS hier wirksam wurde, musste ich es nochmal explizit über die zusätzlichen Head-Felder im Layout einbinden) noch bei einer eigenen Erweiterungen.

Also meine Frage ist, ob dieses Feld "stylesheet" in der config.php irgendwie buggy ist oder ob das einfach ne ganz andere Funktion hat, als ich vermute.

Tschüss,
fluppy

[BugBuster]

Der Auszug, sehe ich grad, ist aber Backend nicht Frontend.

[fluppi]

Öh, ja, jetzt wo dus sagst... da hab ich mich verguckt, sorry für die Verwirrung

Tschüss,
Ricky

[Michael]

Ich krieg die externe CSS-Datei leider nicht eingebunden.
im Layout unter Experten Eiinstellungen > Zusätzliche Head-Tags habe ich folgenden Zeile erfasst:

<link media="screen" type="text/css" href="system/modules/mein_modul/css/mein_modul.css" rel="stylesheet">

Die Datei mein_moduls.css liegt auch genau dort. Warum wir sie aber nicht eingebunden? Wenn ich die Datei in den Ordner files legen klappt es problemlos.

Besten Dank für einen Tipp!
Michael

[marq]

Ggf. mal in die htaccess reingucken und mal darüber nachdenke ob die css nicht in einen assets ordner besser aufgehoben wäre ... oder ganz einfach, das css in deinem Modul direkt einbinden

$GLOBALS['TL_CSS'][] = 'system/modules/mein_modul/css/mein_modul.css'; 

[Michael]

Und wo genau baue ich $GLOBALS ein? In der config.php?

[marq]

Und wo genau baue ich $GLOBALS ein? In der config.php?

Naja - überlegen wir mal zusammen, an welcher Stelle, bzw. wann dein CSS denn gebraucht wird? Bei der Ausgabe oder?

Gucken wir doch mal z.B. im Core, das Template der Colorbox an, wie das da gemacht wird ;-)