Layouts

Im Bereich Layouts können Seitenlayouts verwaltet werden. Auf der linken Seite befinden sich die Aktionen um die neuen Layouts anzulegen oder Layouts zu synchronisieren. Direkt unterhalb befindet sich die Liste mit allen vorhandenen Layouts. Neben den Layouts befinden sich drei Aktionen.

Beim Klick auf die erste Aktion kann man nachschauen in welchen Vorlage das Layout benutzt wird. Die zweite Aktion bietet Möglichkeit eine Wiedervorlage für das Layout zu erstellen. Die dritte Aktion bietet die Möglichkeit die Layouts zu löschen. Das ist nur dann möglich, wenn das Layout in keiner Vorlage benutzt wird.

Beim Klick auf Neues Layout wird ein neues Layout erstellt (siehe Screenshot). In der Maske kann der Name es Layouts, eine Beschreibung, der Queltext und die automatische Zuweisung der Default-Module eingetragen werden. Nach der Eingabe aller Daten, können die Änderungen durch den grünen Hacken gespeichert werden.

Der Quelltext eines Layouts ist der wichtigste Bestandteil in diesem Bereich. Das Layout einer Seite besteht aus dem öffnenden und schließenden HTML-Tag. Innerhalb der HTML-Tags befinden sich HEAD -und BODY Tags. Dabei representiert der HEAD Bereich die Kopfzeile der Seite und der BODY Bereich beinhaltet Seiteninhalt. Mehr zu den Layouts finden Sie hier: http://www.w3schools.com/html/html_layout.asp

Eine Besonderheit der Layouts bei CONTENIDO sind die "<container>"-Tags. Diese Container sind die Platzhalter für die CONTENIDO Module.

Ein Container ist wie folgt aufgebaut und enthält diverse Attribute:

<container id="205" name="layout_logo" types="layout" mode="fixed" default="layout_logo">layout_logo</container>

Die Container Id ist einmalig und darf innerhalb eines Layouts nur ein mal vorkommen. Diese Id darf beliebig gewählt werden und muss eine ganze Zahl sein.

Der Container Name darf beliebig gewählt werden. In der Regel trägt der Name des Containers den Namen des Modules.

Der Container Typ gibt den Typ des Containers an. Der Typ kann z.B. layout, content, head, navigation sein.

Der Container Mode gibt den Modus eines Containers an. Es kann "optional" oder "fixed" sein. Beim Modus optional können alle beliebige Module in den Container konfiguriert werden. Beim Modus fixed kann nur das Modul mit dem gleichen Namen in den Container eingestellt werden und ist somit vorausgewählt.

Das Attribut default gibt ein Standart-Modul an, welches in den Container standartmäßig eingestellt wird. Bei dem oberen Container wird das Modul layout_logo Standartmäßig eingestellt, wenn die Option beim Speichern ausgewählt wird.

Layout Inhalt

<!DOCTYPE html>
<!-- standard layout -->
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <title><container id="10" name="title element" types="head" mode="fixed" default="head_title">title element</container></title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" type="text/css" href="css/contenido_backend.css" />
        <!--[if IE 8]>
            <link type="text/css" rel="stylesheet" href="css/ie_8.css" media="all" />
        <![endif]-->
    </head>
    <body>
        <div id="page">
            <div id="header">
                <container id="205" name="layout_logo" types="layout" mode="fixed" default="layout_logo">layout_logo</container>
                <ul id="navigation_header">
                    <li class="lang_changer">
                        <container id="211" name="language_changer" types="navigation" mode="fixed" default="navigation_lang_changer">lang changer</container>
                    </li>
                    <li>
                        <container id="212" name="navigation_top" types="navigation" mode="fixed" default="navigation_top">navigation_top</container>
                    </li>
                    <li>
                        <container id="213" name="searchform_top" types="navigation" mode="fixed" default="navigation_searchform_top">searchform_top</container>
                    </li>
                </ul>
            </div>
            <div id="breadcrumb">
                <container id="90" name="breadcrumb" types="navigation" mode="fixed" default="navigation_breadcrumb">breadcrumb</container>
            </div>
            <div id="menu">
                <container id="100" name="left navigation" types="navigation" mode="fixed" default="navigation_main">left navigation</container>
            </div>
            <div id="content">
                <container id="110" name="content" types="content" mode="optional" default="content_header_first">first header</container>
                <container id="120" name="content" types="content" mode="optional" default="content_header_second">second header</container>
                <container id="130" name="content" types="content" mode="optional" default="content_image">image</container>
                <container id="140" name="content" types="content" mode="optional" default="content_text">text</container>
                <container id="150" name="content" types="content" mode="optional" default="content_date">date</container>
                <container id="160" name="content" types="content" mode="optional" default="">content</container>
                <container id="170" name="content" types="content" mode="optional" default="">content</container>
                <container id="180" name="content" types="content" mode="optional" default="">content</container>
                <container id="190" name="content" types="content" mode="optional" default="">content</container>
                <container id="200" name="content" types="content" mode="optional" default="">content</container>
            </div>
            <div class="clear"></div>
            <div id="footer">
                <container id="210" name="bottom navigation" types="navigation" mode="optional" default="navigation_bottom">bottom navigation</container>
                <container id="220" name="social media links" types="navigation" mode="optional" default="navigation_social_media">social media links</container>
            </div>
            <div id="copyright">
                <container id="230" name="copyright notice" types="content" mode="optional" default="content_copyright_notice">copyright notice</container>
            </div>
        </div>
        <container id="300" name="Facebook SDK" types="script" mode="optional" default="script_fb_sdk">Facebook SDK</container>
        <container id="310" name="tracker script" types="script" mode="optional" default="script_tracker_google">tracker script</container>
        <container id="320" name="tracker script" types="script" mode="optional" default="script_tracker_piwik">tracker script</container>
        <container id="999" name="script_cookie_directive" types="script" mode="fixed" default="script_cookie_directive">script_cookie_directive</container>
        <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.9.1.custom.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.validate.js"></script>
    </body>
</html>

Platzierung von CSS und JS Dateien

Neben den <container>-Platzhaltern gibt es in CONTENIDO noch drei weitere Platzhalter. Es handelt sich unter anderem um die beiden Platzhalter {CSS} und {JS}. Standardmäßig fügt CONTENIDO die CSS-Dateien von Modulen direkt hinter der geschlossenen </title>-Tag ein. Dies ist jedoch nicht immer sinnvoll, da die Reihenfolge in der die CSS-Dateien geladen werden eine Überladung von CSS-Angaben erst ermöglicht. Hier hilft nun der {CSS}-Platzhalter. Dieser kann innerhalb des <head>-Bereiches der Seite positioniert werden.

Der {JS}-Platzhalter weist die selbe Funktion auf, kann jedoch sowohl im <head>, als auch im <body> Bereich positioniert werden.

Die Platzhalten müssen groß geschrieben werden: {CSS} nicht jedoch {css}

Revisionsplatzhalter

Diese Funktion ist ab der Version 4.9.5 von CONTENIDO verfügbar.

Ist die Mandanteneinstellung „revision“ (Typ „ressource“) gesetzt, kann über den Platzhalter {REV} ein weiterer Platzhalter in Layouts eingefügt werden. Ist keine Einstellung vorgenommen, setzt CONTENIDO automatisch den Wert null (0) ein.

„Nur lesen“-Modus

Diese Funktion ist erst ab der Version 4.9.4 von CONTENIDO verfügbar.

Für jeden Mandanten individuell können Sie einstellen, dass die Inhalte auf dieser Seite nicht bearbeitet, sondern nur gelesen werden dürfen. Die entsprechende Mandanteneinstellung heißt „readonly“ (Typ „client“) und hat den Wert „true“ (aktiviert) oder „false“ (deaktiviert).