Smarty Variable in CSS verwenden

Hallo, ich mache gerade einen Plugin, bei der die Benutzer einpaar CSS Eigenschaften in der Config einstellen können, was ich dann mit Smarty in meine CSS Datei einfügen möchte. Leider klappt das nicht einfach so, weil CSS die geschweiften Klammern { und } verwendet. Wie kann ich das aber denn noch so hinbekommen, dass in der CSS Datei meine Smarty Variable richtig gelesen wird??

Moin Jakko, ich hab’s noch nie versucht, aber hast du schon ausprobiert, den Smartycode in CSS Kommentare zu verpacken? Also: .listing-1-col { color: #/\* {$config.color} \*/; } Meld dich mal, ob’s klappt, bin gerade auch mal neugierig!

Hallo Hype, ich habs gerade probiert, aber leider hat es nicht funktioniert… Hast du vielleicht noch eine Idee ;)?

Ist die Datei eigentlich eine TPL Datei, die auch tatsächlich von Smarty geparst wird? Wenn es nur eine CSS Datei ist, weiß Smarty ja gar nicht, dass da Werte eingetragen werden sollen. Desweiteren kenn Smarty übrigends die Tags {ldelim} und {rdelim}, die dann jeweils die Geschweiften Klammern ausgeben. Schau dir hierzu mal folgenden Thread im Smarty Forum an, vielleicht hilft das: http://www.smarty.net/forums/viewtopic.php?t=11517

Ja die Datei ist eine TPL Datei. Ich habe folgendes in meiner CSS Datei probiert und es geht wieder nicht… .tabs label:hover{ background-color: {ldelim}$Data.tabHoverColor{rdelim}; color: #333; top: 0; }

Was steht nachher in der deinem HTML? Bist du dir -sicher-, dass du Datei von smarty geparsed wird? Wie rufst du die css auf bzw wie bindest du sie ein? Viele Grüße

Also, ich habe keine Ahnung wie ich das sehen kann, ob die Datei von Smarty geparsed wird oder nicht. Am besten füge ich hier noch kurze Codefragmente ein, dann wird es vielleicht ein wenig klarer. Bootstrap.PHP Da es ein Einkaufswelten Element sein soll, wird meine Template Datei über die createEmotionComponent Methode (in der registerEmotionElement Methode) aufgerufen! (‚template‘ => ‚component_custom‘) ... ... ... public function install() { $this-\>createConfiguration(); $this-\>subscribeEvent('Enlight\_Controller\_Action\_PostDispatch','onPostDispatchWidgets'); $this-\>registerEmotionElement(); return true; } ... ... ... public function createConfiguration() { $form = $this-\>Form(); $form-\>setElement('color', 'tabHoverColor', array( 'label' =\> 'Tab Hover Color', 'value' =\> '#FFFFFF' //default ) ); } ... ... ... public function onPostDispatchWidgets(Enlight\_Event\_EventArgs $args){ $view = $args-\>getSubject()-\>View(); $config = $this-\>Config(); if (empty($config-\>show) && $config-\>show !== null) { return; } $args-\>getSubject()-\>View()-\>addTemplateDir( $this-\>Path() . 'Views/' ); $view-\>tabHoverColor = $config-\>tabHoverColor; } public function registerEmotionElement() { $component = $this-\>createEmotionComponent(array( 'name' =\> 'Name des Einkaufswelten Elements', 'template' =\> 'component\_custom' )); ... ... }//end: registerEmotionElement component_custom.TPL Die CSS habe ich in meiner component_custom.TPL Datei im Tag eingebunden!

[code]

... ... .tabs label:hover { background-color:{ldelim}$Data.tabHoverColor{rdelim}; color: #333; top: 0; } ... ... ... ... [/code]

[quote=“Jakko”]Also, ich habe keine Ahnung wie ich das sehen kann, ob die Datei von Smarty geparsed wird oder nicht. [/quote] Du kannst dir zb die erzeugte HTML angucken und schauen ob dein {ldelim} geparsed wird. Und dir ist schon klar, dass es {$Data.tabHoverColor} und nicht $Data.tabHoverColor? [quote=“Jakko”]background-color:{ldelim}$Data.tabHoverColor{rdelim};[/quote] Und was soll das überhaupt werden? Viele Grüße

Übrigens, die Geschichte mit dem {ldelim} ist dafür vorgesehen, die für CSS vorgegebenen geschw. Klammern auszugeben. Also etwa so: .tabs label:hover{ldelim} background-color: {$Data.tabHoverColor}; color: #333; top: 0; {rdelim} Wird deine components_custom.tpl überhaupt im Frontend angezeigt (also korrekt eingebunden)? Keine Sorge, wir bekommen das schon hin :wink:

Oder zum Beginn der CSS das Parsing mit {literal} deaktivieren. Dann bei der Variable {/literal}{$Data.xx.xx}{literal} Am Ende das CSS Blocks dann das Parsing wieder einschalten {/literal} Sent from my Samsung ativ S using Tapatalk

Endlich! :slight_smile: Ich habe das Problem gelöst. Der Fehler war folgender… in der Bootstrap.php hatte ich folgendes stehen. ... public function onPostDispatchWidgets(Enlight\_Event\_EventArgs $args){ $view = $args-\>getSubject()-\>View(); $config = $this-\>Config(); if (empty($config-\>show) && $config-\>show !== null) { return; } $view-\>tabColor = $config-\>tabColor; $view-\>tabActiveColor = $config-\>tabActiveColor; $view-\>tabHoverColor = $config-\>tabHoverColor; $args-\>getSubject()-\>View()-\>addTemplateDir( $this-\>Path() . 'Views/' ); } ... $args-\>getSubject()-\>View()-\>addTemplateDir( $this-\>Path() . 'Views/' ); Diesen Codeabschnitt habe ich mit folgendes ersetzt $view = $args-\>getSubject()-\>View(); $view-\>addTemplateDir($this-\>Path() . 'Views/'); Also, ich glaube ich habe einfach vergessen meine Template in eine Varibale ($view) zu speichern. korrigierter bootstrap.php public function onPostDispatchWidgets(Enlight\_Event\_EventArgs $args){ $view = $args-\>getSubject()-\>View(); $config = $this-\>Config(); if (empty($config-\>show) && $config-\>show !== null) { return; } $view-\>tabColor = $config-\>tabColor; $view-\>tabActiveColor = $config-\>tabActiveColor; $view-\>tabHoverColor = $config-\>tabHoverColor; $view = $args-\>getSubject()-\>View(); $view-\>addTemplateDir($this-\>Path() . 'Views/'); } Dann konnte ich die Variablen, die ich in der Bootstrap Datei erstellt habe (tabColor, tabActiveColor usw.) ganz einfach ohne irgendwelche Modifikationen zu machen verwenden. Also so… [code]

.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
background: {$tabColor};

}
.tabs label:hover {
background-color:{$tabHoverColor};
top: 0;
}

      [id^=tab]:checked + label {
        background: {$tabActiveColor};
        top: 1px;
	border: solid thin #ccc; 
	border-bottom:none;
	z-index:3;
      }

[/code] Vielen Dank an alle die mitgeholfen haben… :thumbup:

Vielleicht postest du dann nächstes mal deinen tatsächlichen Code. Dann können wir wenigstens auch produktiv helfen anstatt dass du uns wild Raten lässt… Viele Grüße Gesendet von meinem iPhone mit Tapatalk

1 „Gefällt mir“

Habe mich verlesen …