CM CSS Columns

Beschreibung

Das Plugin bietet verschiedene shortcodes zur Nutzung der CSS3 Multiple Columns.
Für bessere Nutzbarkeit bietet es eine Integration in den visuellen Editor und es können alle Parameter mit Hilfe von Dialogen eingestellt werden, so dass ein händisches Schreiben der Shortcodes nicht notwendig ist.

Das Plugin umschließt den entsprechenden Inhalt mit einem Containerelement, für welches die entsprechenden CSS-Regeln definiert sind.
Die möglichen Parameter der einzelnen Shortcodes und Code-Beispiele finden sich unter „Anmerkungen“

Alle Standardwerte können über die Einstellungsseite des Plugins gesetzt werden. Mit dem Speichern der Einstellungen wird ein statisches CSS-File generiert, so dass zur Laufzeit kein Code für die Generierung des CSS notwendig ist.

Shortcodes

Hier ist die Liste der verfügbaren Shortcodes mit den entsprechenden Parametern

[css_columns]

Dies ist ein umschließender Shortcode, um Inhalt mittels des CSS3-Features auf mehrere Spalten aufgeteilt wird. Als Inhalt kann beliebig komplexes Markup verwendet werden. Im Standardfall wird ein div-Tag zum Umschließen verwendet. Die Standardwerte der Parameter können in der Einstellungsseite des Plugins geändert werden.

Mögliche Parameter:

• gap – Definiert den Abstand zwischen den Spalten, z.B. in Pixelwerten 40px. Die möglichen Werten entsprechen column-gap auf w3schools.com
• width – Definiert eine empfohlene, optimale Breite einer Spalte. Mögliche Werte finden sich hier: column-width auf w3schools.com
• count – Definiert die Anzahl der Spalten, in die ein Element zerlegt werden sollte. Mögliche Werte finden sich hier: column-count auf w3schools.com
• rule_color – Definiert die Farbe der Trennlinie zwischen den Spalten. Mögliche Werte sind hier zu finden: column-rule-color auf w3schools.com
• rule_style – Definiert den Stil der Trennlinie zwischen den Spalten. Die Beschreibung der Werte entsprechend hier: column-rule-style auf w3schools.com
• Breite der Trennlinie – Definiert die Breite der Trennlinie zwischen den Spalten. Mögliche Werten entsprechen den column-rule-width auf w3schools.com

Beispiel:

[css_columns gap=30px width=120px count=3 rule_color="#000000" rule_style=solid rule_width=medium]
.... here goes the complex content ....
[/css_columns]

[css_col_span]

Dies ist ein umschließender Shortcode, der ausschließlich innerhalb des [css_columns]-Shortcodes verwendet werden kann. Es kann damit Inhalt definiert werden, der über mehrere Spalten läuft.

Mögliche Parameter:

• cols – Definiert, wie viele Spalten das Element überbrücken kann. Die erlaubten Werte entsprechen der Spezifikation auf w3schools.com
• tag – Definiert das HTML-Tag, welches den überbrückenden Inhalt umschließt, z.B. span, h2, div, …

Beispiel:

[css_col_span cols=2 tag=div]
... here goes the spanning content ....
[/css_col_span]

[css_no_break]

Dies ist ein umschließender Shortcode, der ausschließlich innerhalb des [css_columns]-Shortcodes verwendet werden kann. Es kann somit Inhalt definiert werden, der niemals in verschiedene Spalten verteilt wird.
WARNUNG Dieses Feature wird nicht vom Firefox unterstützt.

Mögliche Parameter:

• type – Definiert, ob ein Seitenumbruch innerhalb des Elements erlaubt ist, siehe page-break-inside on w3schools.com
• tag – Definiert das Tag, welches zum Umschließen des Inhalts verwendet wird, z.B. span, h2, div, …

Beispiel:

[css_no_break type=avoid tag=div]
... here goes the non-breakable complex content ....
[/css_no_break]