CSS Manager Plugin

Einführung und Grundlagen

Im CSS Manager können CSS Styles in Sets verwaltet werden. Zu einem Set können beliebig viele Styles Snippets angelegt werden. Die Bearbeitung von Styles erfolgt zentral im eCMS-Admin.

Short Facts

• CSS-Styles werden als einzelne Datensätze im CSS-Manager verwaltet und dort jeweils unter einem eindeutigen Label bzw. Style-Namen gespeichert.
• CSS-Styles und -Classes werden in Gruppen, sogenannten CSS-Sets organisiert.
• Styles können mit ihrem Label eCMS-Elementschreibweise in HTML-Layouts und -Formaten eingebettet werden. Diese Styles werden beim späteren HTML-erzeugen, dann entsprechend aufgelöst.

Installation

Die Installation lässt sich einfach über das Backend des eCMS unter Administration > eCMS Plugins durchführen.

Bedienung

Best-Practise

Durch andere Plugins können CSS Sets mit Styles installiert werden. Diese CSS Styles können bei Bedarf angepasst werden. Die Änderungen bleiben auch bei Plugin Aktualisierungen erhalten.

Neue eigene CSS Styles sollten immer in einem eigenen CSS Set angelegt werden.

Styles definieren

CSS-Styles werden natürlich in ihrer "natürlichen" CSS-Syntax geschrieben und dann einfach unter einem Namen bzw. Label im CSS-Manager abgespeichert. Im Prinzip ganz ähnlich dazu, wie man sonst CSS-Klassen definiert.

Beispiel einer Style-Definition:

"style1" = "font-weight: bold; size: 10px;"
	"style2" = "text-align: center;"

Website Frontend

Um CSS Manager Styles als Inline Style in einem Format zu verwenden, stellt das Plugin die Methode style_buildInlineString() zur Verfügung. Über diese kann ein CSS Style oder auch eine Liste von Styles als eine String erstellt werden.

$i = $this->eCMS->ecms_plugin_cssmanager->style_buildInlineString(
	        array(
	            // Mehrere Styles werden einfach angehängt:
	            'styles' => array('style1' [,'style2', ...]),
	            'set_label' => 'example',
	        )
	    );
	$S = '<div style="'.$i['data'].'">...</div>';

Für die Verwendung als Inline Style in Layouts steht das Element ${ecms-cssmanager-style-inline:...}$ zur Verfügung.

<div style="${ecms-cssmanager-style-inline:style1,style2,...(set_label=example)}$">
	    ${PH:content}$
	</div>