moziloCMS documentation

The "CMS syntax" is a specially developed, internal mozilo command language. It is used to place and align elements such as images and links on content pages or to format text.

All CMS syntax elements can be nested as desired according to certain rules. Instructions for this can be found in the chapter: Editor → CMS Syntax-Rules >

In the admin tab "Settings" under "Syntax settings" you can add self-defined syntax elements using CSS and HTML.

By placing a circumflex (high roof) ^ in front of the following character, it is protected and interpreted by the system as a normal text character.
For example, square and curved brackets, as well as the vertical bar [ | ] { } are part of syntax elements in moziloCMS.
If these characters appear in normal page text, they must be protected with a preceding raised roof ^ (e.g. ^[).
Otherwise, Mozilo may interpret them as syntax characters and incorrect displays may occur.

CMS syntax elements

Clicking on the icon takes you directly to the respective explanation:

All commands required for page design are available as buttons in the CMS syntax bar of the editor.

After pressing a button, the corresponding CMS syntax command appears at the cursor position in the editor's working window.
If a command refers to a content element, it is inserted between these two characters | here the content element ].

Content elements are inserted in the following way:
By typing or from the clipboard – e.g. texts, internet addresses, email addresses
By selecting from the select boxes – e.g. images, files, links to other content pages, plugins

If the content element is placed first and completely marked, then the syntax element is added correctly when clicked.

Links

External link:

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ link \| ]	Opens an internet link	[ link \|https://www.mozilo.de/ ]	https://www.mozilo.de
	[ mail \| ]	Opens the email delivery to the entered address	[ link \|mail@server.de ]	mail@server.de

In the Admin tab "Settings" you can specify whether external links are opened in the same browser window or in a new one.
For Internet links it is not necessary to prefix "https://". Both https://www.link.de and www.link.de are valid.

Internal link:

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ seite \| ]	Opens a content page	[ seite \| @= Category 1:Page 1 =@ ]	Page 1
	[ kategorie \| ]	Opens the first page of a content category	[ kategorie \| @= Home =@ ]	Home

The available content pages or categories are inserted from the Selectbox .

Download link:

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ datei \| ]	Starts the download or, depending on the browser plug-in, also the display of a file	[ datei \| @= Home:archive.zip =@ ]	archive.zip

The available files are inserted from the Selectbox .

The following applies to all link syntax elements:

If a = character is placed after the command name, followed by text or another syntax command, the display of the link changes accordingly.

Variant 1:

If text is inserted after the = character, this text will be displayed instead of the original link name.

Example:	Result:
[ link = Click here \|https://www.mozilo.de/ ]	Click here

Variant 2:

If an image is inserted after the = character using the syntax element [ bild | ] then this will be displayed instead of the link name.

Example:	Result:
[ link = [ bild \| @= Home:bild.jpg =@ ] \|https://www.mozilo.de ]

Insert images

CMS-Syntax:	Function:	Example:	Result:
[ bild \| ]	Places an image on a content page (text flow is interrupted on both sides)	[ bild \| @= Home:bild.jpg =@ ]	Lorem ipsum dolor sit amet, con Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.
[ bildlinks \| ]	Places an image on the left edge of a content page (text flows past the right edge of the image)	[ bildlinks \| @= Home:bild.jpg =@ ]	Lorem ipsum dolor sit amet, con Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.
[ bildrechts \| ]	Places an image on the right edge of a content page (text flows past the left edge of the image)	[ bildrechts \| @= Home:bild.jpg =@ ]	Lorem ipsum dolor sit amet, con Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.

The available images are inserted from the Selectbox .

The following applies to all image syntax elements:

If a = character is placed after the command name and text is entered afterwards, this is displayed as a caption.

Example:	Result:
[ bild = Lotus flower by the lake \| @= Home:bild.jpg =@ ]	Lotus flower by the lake

An image placed with [ bild | ] can be aligned horizontally with the commands [links | ], [zentriert | ], [rechts | ] .

Jump reference

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ absatz = \| ]	Link that jumps to a heading.	[ absatz = further down > \| Instructions ]	further down >

In the above example, in the sentence: "There are instructions for this further down > ". The last two words create a jump link.
Jump target is the word "instructions" in another place on the same page, which is formatted as a heading with or or .

Without any further information, [ absatz | ] creates a link that automatically jumps to the top of the page.

Text display as a list

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ liste \| ]	Creates an indented line of text with a list item in front.	[ liste \| First line ] [ liste \| Second line ]	First line Second line
	[ numliste \| ]	Creates an indented text line with a preceding number.	[ numliste \| First line ] [ numliste \| Second line ]	First line Second line

Both syntax elements can also be nested together.

Example:	Result:
[ numliste \| First line ] [ numliste \| Second line [ liste \| First subline ] [ liste \| Second subline ] [ liste \| Third subline ] ] [ numliste \| Third line ]	First line Second line First subline Second subline Third subline Third line

Table

Icon:

CMS-Syntax:

Function:

Example:

Result:

[ tabelle |
<< | >>
< | >
]

Arrange text or other elements in a tabular arrangement based on rows and columns.

[ tabelle | Headline
<< Head-Column 1 | Head-Column 2 >>
< Line 1-Column 1 | Line 1-Column 2 >
< Line 2-Column 1 | Line 2-Column 2 >
]

Headline
Head-Column 1	Head-Column 2
Line 1-Column 1	Line 1-Column 2
Line 2-Column 1	Line 2-Column 2

By adding additional row delimiters < > and column separators |, a table can consist of any number of rows and columns. A heading can be added.
Tables can also be displayed responsively by specifying CSS directives in the style.css (template).

Tables can only be structured symmetrically. This means: Every row must contain the same number of columns.

Dividing line

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ ---- ]	Horizontal dividing line	[ ---- ]

Insert HTML source code

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ html \| ]	Perceives HTML text as such and generates the corresponding display.	[ html \| <marquee> Text </marquee> ]	Text

This syntax element can be used to embed a video link or an interactive map.

Include

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ include \| ]	Inserts the content of another page.	[ include \| @= Category 1:Page 2 =@ ]	This text is on page 2, but is displayed everywhere where page 2 has been inserted using "include".

The available content pages are inserted from the select box .

Is always useful when the same content appears in several places: If, for example, a certain address is to be displayed in several places, it is written in a separate page that is given the attribute "hidden". The content of this page, including all formatting, can then be inserted everywhere using "include". Advantage: Any changes to the address only need to be made once.

Font and paragraph formatting

CMS-Syntax:	Function:	Example:	Result:
[ ueber1 \| ]	Headline large	[ ueber1 \| Headline large ]	Headline large
[ ueber2 \| ]	Headline medium	[ ueber2 \| Headline medium ]	Headline medium
[ ueber3 \| ]	Headline small	[ ueber3 \| Headline small ]	Headline small
[ links \| ]	Text paragraph left-aligned	[ links \| ]	The text starts here. It continues here. All lines are aligned to the left margin.
[ zentriert \| ]	Text paragraph centered	[ zentriert \| ]	The text starts here. It continues here. All lines are aligned to the center.
[ block \| ]	Text paragraph justified	[ block \| ]	The text starts here. It continues here. And everything is aligned to both margins up to the second to last line.
[ rechts \| ]	Text paragraph right-aligned	[ rechts \| ]	The text starts here. It continues here. All lines are aligned to the right margin.
[ fett \| ]	Text bold	Text is [ fett \| thicker ] displayed	Text is thicker displayed
[ kursiv \| ]	Text italic	Text is [ kursiv \| italic ] displayed	Text is italic displayed
[ unter \| ]	Text underlined	Text is [ unter \| underlined ]	Text is underlined
[ durch \| ]	Text strikethrough	Text is [ durch \| crossed out ]	Text is ~~crossed out~~

Font size

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ fontsize = \| ]	Changes the font size (a parameter is required after the =)	He was a [ fontsize = 22px \|GIANT ]	He was a GIANT

Detailed information on the possible size parameters of Fontsize can be found here, at de.selfhtml.org >

Font Color

Icon:	CMS-Syntax:	Function:	Example:	Result:
	[ farbe = \| ]	Changes the font color (a color name or hexadecimal color code is required after the =)	This word is [ farbe = 00FF00 \| green ]	This word is green

The Syntax Element Color the required color code is assigned before it is used.
For this purpose, moziloCMS has an integrated color picker .

If you mark an existing color code [ farbe = 00FF00 | green ] and then click on only the color code is replaced.

It offers three different options for setting the desired color.

Color ring:

1Set the desired base color in the outer circle by moving the circle marker .

2The ratio between brightness and saturation can be set in the inner triangle.

RGB values:

3By moving the sliders (red, green, blue, saturation and brightness) or entering the corresponding numerical values (0 - 255) in the text fields.

Direct entry of the color code:

4If the 6-digit color code is known, it can be entered directly in this text window.

Other elements:

5Display of the currently set color

6Display of the last used color. The current setting can be undone by clicking here.

7Predefined colors saved in the admin tab Settings >.

Edit Color Close

▲▼
▲▼
▲▼
▲▼
▲▼