Anpassen einer Content-Seite mit HTML und CSS

Sobald Sie eine einfache Seite mit einem der vordefinierten Templates erstellt haben, möchten Sie vielleicht einen Schritt weitergehen. Vielleicht möchten Sie einen neuen Block unten oder eine große zentrierte Kopfzeile oben anfügen.

Durch Umschalten auf den Expert-Modus können Sie direkt die hinterlegte Sprache hinter der Seite bearbeiten, d. h. den HTML- und CSS-Code.

HTML und CSS sind die beiden Sprachen, die hinter jeder Webseite stecken. Sie können sehr weit fortgeschrittene Dinge mit ihnen realisieren, doch im Grunde sind sie dafür entwickelt, expressiv und leicht zu erlernen zu sein. Wenn Sie sie einmal ein bisschen ausprobieren, können Sie schnell einfache Dinge realisieren, wie etwa das Layout Ihrer Seite, die Größe Ihres Textes etc. zu ändern.

In diesem Artikel führen wir Sie anhand einiger grundlegender Änderungen an eine Standard-Seitenvorlage heran. Es ist nicht unser Ziel, Ihnen HTML und CSS beizubringen. Andere Ressourcen können dies sehr viel besser als wir; dennoch sind dies Beispiele, mit denen Sie starten und sich weiter entwickeln können.

Lassen Sie uns zunächst eine neue Seite auf der Grundlage der Vorlage "Hauptblock + rechte Spalte" erstellen, wie im Artikel Erstellen einer einfachen Inhaltsseite gezeigt. Wechseln Sie dann in den Expertenmodus, indem Sie den Link oben rechts auf der Benutzeroberfläche verwenden. Nun haben Sie zwei "CSS"- und "HTML"-Tabs, die den Code hinter der Seite beinhalten.

Der CSS Tab ist momentan leer, da kein spezifischer CSS-Code vorhanden ist. Die HTML der Seite ist jedoch da:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Hinzufügen einer neuen Zeile

Jeder <div> Tag stellt einen Block auf der Seite dar; die zu jedem Block zugeordnete Klasse legt dessen Erscheinungsbild fest, wie etwa seine Breite.

Genauer gesagt:
  • <div class="container-fluid"> ist der Block rund um die ganze Seite, der sicherstellt, dass sie die gesamte im Browser zur Verfügung stehende Breite einnimmt

  • <div class="row"> stellt eine Zeile dar, die abwechselnd verschiedene Blöcke enthält. Durch eine angemessene Verwendung der "rows" stellen wir sicher, dass unsere Blöcke nicht durcheinander geraten, wenn einer größer als der andere ist.

  • <div class="col-md-8"> und <div class="col-md-4"> sind zwei Blöcke, die den "echten" Inhalt enthalten (z. B. Text). Mit den Klassen col-md-8 und col-md-4 lässt sich der verfügbare Platz in jeder Zeile als ein Raster aus 12 "Zellen" vorstellen. Ihre Blöcke innerhalb dieser Zeile können maximal 12 Zellen enthalten, und jeder Block nutzt col-md-X, wobei X die Anzahl der belegten Zellen ist. In diesem Beispiel wollen wir, dass ein Block zwei Drittel des Platzes einnimmt, und ein weiterer Block ein Drittel, daher haben wir 8 und 4 verwendet, um die verfügbaren 12 Zellen korrekt aufzuteilen. Diese gesamte Logik (genannt "Raster"-Logik) wird im Artikel Design eines responsiven Portals erklärt.

  • <div class="ods-box"> erstellt lediglich einen visuellen Block mit einem Rand und einem Hintergrund und ist damit eher für einen Text-Content geeignet.

Nun möchten wir eine neue Zeile mit drei Blöcken hinzufügen, wobei jeder von ihnen ein Drittel des zur Verfügung stehenden Raums einnimmt. Entsprechend unserer vorher genannten Logik fügen wir eine neue Zeile hinzu sowie drei Blöcke, die je 4 Zellen belegen.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
    <div class="row">
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Unsere Vorschau sieht nun so aus:

Einrichten eines Grundstils

Der CSS-Code kann zum Ändern Ihrer Content-Ansicht verwendet werden: Sie können die Textgröße ändern, einen farbigen Hintergrund und Ränder hinzufügen, die Farbe ändern etc.

Es gibt viele Möglichkeiten, die CCS-"Regeln" auf ein Element auf Ihrer Seite anzuwenden. Eine bewährte Verfahrensweise, an die Sie immer denken sollten, ist die Verwendung von "Klassen": Durch das Hinzufügen von class="myclass" zu einem Element auf Ihrer Seite ordnen Sie Ihrem Element eine "Klasse" zu und können nun Regeln für diese Klasse in Ihrem CSS-Style schreiben. So können Sie eine Klasse auf verschiedene Elemente anwenden, und selbst wenn Sie Ihre Seite ändern, gelten die Regeln immer noch für Ihr Element.

Nehmen wir an, wir wollen einen Text größer als gewöhnlich gestalten. Zunächst müssen Sie dem Element, das den Text enthält, in diesem Fall "Hallo Welt!", eine Klasse zuordnen:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="ods-box">
                <span class="larger-text">Hello world!</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ods-box"></div>
        </div>
    </div>
</div>

Dann müssen wir nur noch dem CSS-Code eine Regel hinzufügen, die besagt, dass die Klasse "larger-text" eine größere Textgröße besitzen soll:

.larger-text {
    font-size: 24px;
}

Sie können jedem Ihrer Elemente viele verschiedene CSS-Regeln zuweisen.

Hinweis

Themenfarben, die im Abschnitt Aussehen + Eindruck des Back Office definiert wurden, können im Stylesheet der Seite als CSS-Variablen verwendet werden (für zusätzliche Informationen siehe Anpassen von Thema und Portal-Icon).

Beachten Sie, dass bei der Verwendung des Internet Explorer das Endergebnis nicht in der Seitenvorschau angezeigt wird.