Formatieren mit CSS

Erstellen Sie nun ein Beispiel-Topic mit den folgenden Inhalten:

Wählen Sie das zweite Absatz-Element aus und weisen Sie ihm im Elementattribute-Panel das Rollenattribut zu. Legen Sie den folgenden Wert für das Rollenattribut fest:

indentbody

Wenn Sie veröffentlichen, vergibt Paligo an diesen Absatz in der HTML den Klassennamen „indentbody“. Sie können sie nun mit CSS gestalten.

Wählen Sie das Tabellenelement aus und weisen Sie ihm im Elementattribute-Panel das Rollenattribut zu. Legen Sie den folgenden Wert für das Rollenattribut fest:

data-table

Wenn Sie veröffentlichen, erstellt Paligo ein div-Element, das die Tabelle enthält. Das div-Element hat den Klassennamen „data-table“, und Sie können es mit CSS gestalten.

Wählen Sie die letzte Zelle in Ihrer Tabelle aus. Wählen Sie im Elementstruktur-Menü oben das td-Element und anschließend Gehe zu Element. Weisen Sie dem td-Element im Elementattribute-Panel das Klassenattribut zu und setzen Sie seinen Wert auf:

yellow-cell

Wenn Sie veröffentlichen, erhält diese Zelle von Paligo den Klassennamen „gelbe Zelle“. Sie können sie nun mit CSS gestalten.

Speichern Sie Ihr Beispiel-Topic.

Erstellen Sie eine Publikation, fügen Sie Ihr Beispiel-Topic hinzu und speichern Sie sie.

Wählen Sie das Drei-Punkte-Menü (...), für Ihre Publikation und wählen Sie anschließend „Veröffentlichen”.

Veröffentlichen Sie Ihre Publikation und verwenden Sie das integrierte Standardlayout des HTML5-Helpcenters.

Wählen Sie HTML5 und anschließend das Standard-Layout des HTML5-Helpcenters.

Wählen Sie Dokument veröffentlichen aus.

Öffnen Sie die ZIP-Datei und navigieren Sie zum Ausgangsordner. Öffnen Sie die Datei index.html in einem Browser. Für dieses Tutorial verwenden wir Google Chrome.

Wählen Sie das Panel für Ihr Beispiel-Topic aus, um es zu öffnen.

Erstellen Sie eine CSS-Datei. Sie können jeden Text- oder Codeeditor eines Drittanbieters verwenden, der das Speichern einer CSS-Datei ermöglicht. Lassen Sie den Editor geöffnet, damit Sie CSS hinzufügen können, während Sie an diesem Tutorial teilnehmen.

Klicken Sie mit der rechten Maustaste in das Browserfenster und wählen Sie Inspizieren*.

*Dies gilt für Google Chrome. Andere Browser verwenden möglicherweise einen anderen Namen.

Verwenden Sie das Werkzeug Inspizieren im Das Browser-Inspektionstool.

Bewegen Sie den Cursor über die Inhaltsverzeichnis-Seitenleiste, sodass die gesamte Leiste hervorgehoben ist, und klicken Sie anschließend mit der linken Maustaste darauf, um sie auszuwählen.

Suchen Sie im Stile-Bereich die Regel, die die Hintergrundfarbe festlegt.

Wählen Sie das Farbfeld aus und ändern Sie die Farbe zu:

#a94442

Klicken Sie mit der rechten Maustaste auf die Regel, die Sie in den Schritten 4 und 5 geändert haben, und wählen Sie Regel kopieren.

Fügen Sie die Regel in Ihre CSS-Datei ein (aus Vorbereiten eines Beispiel-Topics und eines Beispiel-CSS).

Es empfiehlt sich, Kommentare zu Ihrem CSS hinzuzufügen: So weiß jeder, der die CSS-Datei öffnet, welchen gestalterischen Effekt jede Regel hat. Am Beginn und am Ende eines Kommentars geben Sie jeweils /* ein.

Hier ist ein Beispiel für einen Kommentar vor einer Regel:

/* The following rule changes the background color of the sidebar */

.bg-primary, .btn-primary, .pagination>.active>a, 
.pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, 
.pagination>.active>span:focus, .site-sidebar, 
.portal-single-publication .publication-icon {
    background-color: #a94442;
}

Verwenden Sie das Inspizieren-Werkzeug im Das Browser-Inspektionstool, um die Hauptüberschrift auf der Seite auszuwählen.

Suchen Sie im Stile-Bereich die Regel, die die Schriftgröße der Überschrift 2 (h2) festlegt und vergrößern Sie auf 40 px.

Klicken Sie auf die Zeile unter der Schriftgrößen-Eigenschaft und fügen Sie eine Farbeigenschaft mit dem festgelegten Wert #a94442 hinzu. Denken Sie daran, am Ende des Farbwerts ein Semikolon hinzuzufügen.

Fügen Sie der gleichen Klasse eine weitere Regel hinzu. Stellen Sie diesmal die Schriftstärke auf 800 ein. Denken Sie wieder daran, nach dem Schriftstärkenwert ein Semikolon hinzuzufügen.

Klicken Sie mit der rechten Maustaste auf die Regel im Bereich Styles (Stile) und wählen Sie Copy rule (Regel kopieren).

Fügen Sie die Regel in Ihre CSS-Datei ein, nachdem Sie die geschweifte Klammer der vorherigen Regel geschlossen haben.

Gehen Sie auf dieselbe Weise vor, um Folgendes festzulegen:

Kopieren Sie diese Regeln und fügen Sie sie in Ihre CSS-Datei ein.

Verwenden Sie das Selektor-Werkzeug im Das Browser-Inspektionstool, um einen Schritt in einem Verfahren auszuwählen.

Wählen Sie im Bereich Stile das Element ::before aus, das unmittelbar nach dem ausgewählten Element <li class="step"> folgt. Die Zeichenfolge ::before ist ein Pseudo-Element und steht in diesem Fall für das Schrittnummer-Icon.

So ändern Sie die Hintergrundfarbe:

.theme1 .procedure > li::before {
    background-color: #a94442;
}

Kopieren Sie die Regel und fügen Sie sie in Ihre CSS-Datei ein.

Verwenden Sie dasSelektor-Werkzeug (Sie finden es hier: Das Browser-Inspektionstool), um ein Element in einer Aufzählungspunktliste der obersten Ebene (Einzelaufstellung) auszuwählen.

Wählen Sie unter Styles (Stile) das Element ::marker aus, das zwischen den Elementen <li class="listitem"> und <p> steht.

Beachten Sie, dass der ::marker einige Regeln hat, die aus dem „User Agent Stylesheet“ stammen. Hier wird also das standardmäßige Gestaltungskonzept verwendet, das durch den Browser festgelegt ist. Sie können diese nicht ändern, aber alle Regeln, die Sie für dieselbe Klasse hinzufügen, überschreiben die Browser-Standardwerte.

Wählen Sie das Plus-Symbol in der Stile-Symbolleiste, um eine neue Regel hinzuzufügen. Dies beinhaltet automatisch den Selektor (in diesem Fall ::marker).

Bearbeiten Sie den Selektor und erstellen Sie die folgende Regel:

.itemizedlist ul.itemizedlist > li::marker {
    color: ##a94442;
    font-size: 1.2em;
}

Hier machen Sie den Selektor spezifischer und legen eine Farbe und eine Größe für die Aufzählungspunkte fest. Der Browser wendet die Stile nur auf Marker an, die sich in dieser Struktur befinden:

<element with class = itemizedlist>
    <ul with class = itemizedlist>
        <li>

Kopieren Sie die Regel und fügen Sie sie zu Ihrem CSS hinzu.

Wählen Sie eine Aufzählungspunktliste aus und schauen Sie in der HTML nach. Hier sehen Sie, dass die <ul>-HTML ein Inline-Styling enthält. In diesem Fall legt die Einstellung fest, dass bei der Aufzählungspunkt-Liste ein rundes Aufzählungszeichen verwendet wird.

Der Browser verwendet dieses Styling im CSS nun als Präferenz. Um dem Browser zu befehlen, dass er stattdessen einen Stil in Ihrem CSS verwenden soll, können das Element !important hinzufügen. Hierbei muss man jedoch bedenken, dass der Browser somit angewiesen wird, das Stilelement !important allen anderen Gestaltungselementen vorzuziehen, auch jenen in anderen CSS-Dateien.

Wählen Sie in Stile-Bereich das Plus-Symbol + und fügen Sie diese neue Regel hinzu:

.itemizedlist > ul.itemizedlist {
    list-style-type: square !important;
}

Dies weist den Browser an, quadratische Aufzählungszeichen auf nicht geordneten Listen der obersten Ebene zu verwenden.

Kopieren Sie die Regel und fügen Sie sie zu Ihrem CSS hinzu.

Lassen Sie uns nun eine ähnliche Gestaltung für die Aufzählungszeichen der zweiten Ebene („nested”, also „verschachtelt”) erstellen. Dieses Mal möchten wir Aufzählungspunkte, die als blaue Quadrate erscheinen. Fügen Sie hierzu diese beiden Regeln hinzu:

.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist {
    list-style-type: square !important;

}
.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist > li::marker {
    color: #6495ed;
    font-size:1.2em;
    
}

Hier haben Sie spezifischere Selektoren verwendet. Die erste Regel bezieht sich auf die ungeordnete Liste (ul), die sich innerhalb eines Listenelements in einer übergeordneten, ungeordneten Liste befindet. Die zweite Regel bezieht sich auf die Markierung von Listenelementen in einer ungeordneten Liste, die sich innerhalb eines Listenelements in einer übergeordneten, ungeordneten Liste befindet.

Kopieren Sie die Regel und fügen Sie sie zu Ihrem CSS hinzu.

Verwenden Sie das Selektor-Werkzeug (Sie finden es hier: Das Browser-Inspektionstool), um die Nummer für ein Nummernlistenelement auszuwählen.

Im Elemente-Bereich sollte das Pseudo-Element ::marker in der geordneten Listenstruktur hervorgehoben sein.

Wählen Sie im Bereich Stile das Plus-Symbol + aus, um einen neuen Stil hinzuzufügen. Standardmäßig ist dies ::marker, doch Sie sollten stattdessen Folgendes festlegen:

.orderedlist ::marker

Hier haben Sie den Browser angewiesen, die Gestaltungsregel nur auf ::marker anzuwenden, wenn dies innerhalb der Klasse „orderedlist“ erscheint. Dadurch wird der Selektor spezifischer, sodass der Stil nicht für andere Listen gilt, die das Pseudoelement ::marker haben, wie z. B. Aufzählungspunkt-Listen.

Legen Sie die folgende Gestaltung für orderedlist ::marker fest:

.orderedlist ::marker {
    color: #a94442;
}

Dadurch wird die Farbe der Nummer in geordneten Listen auf dunkelrot gesetzt.

Kopieren Sie die Regel und fügen Sie sie in Ihr CSS ein.

Verwenden Sie das Selektor-Tool (Sie finden es hier: Das Browser-Inspektionstool), um das Bild in Ihrem Inhalt auszuwählen.

Suchen Sie im Bereich Stile nach img.materialboxed. Diese Regel gilt für alle Blockbilder in Paligo-Inhalten.

Ändern Sie die Regel so, dass sie die folgenden Eigenschaften hat:

img.materialboxed {
    border: 2px solid #ddd;
    max-width: 100%;
    height: auto;
    padding: 10px;
}

So erhalten Ihre Blockbilder die folgenden Eigenschaften:

Kopieren Sie die Regel und fügen Sie sie zu Ihrem CSS hinzu.

Verwenden Sie das Selektor-Werkzeug (Sie finden es hier: Das Browser-Inspektionstool), um den zweiten Absatz in Ihrem Beispiel-Topic auszuwählen.

Im Elemente-Abschnitt kann man sehen, dass der Absatz in der HTML den folgenden Klassennamen hat:

<p class="indentbody">

Wählen Sie im Stile-Bereich das Plus-Symbol + aus, um eine neue Regel hinzuzufügen.

Bearbeiten Sie die Regel so, dass sie eine Einrückung am linken Rand des Textes bewirkt:

p.indentbody {
    margin-left: 2.5em;
}

Hier zielen Sie auf jedes Absatzelement ab, das die Klasse „Indentbody“ hat.

Kopieren Sie die Regel in Ihre CSS-Datei.

Verwenden Sie das Selektor-Tool (Sie finden es hier: Das Browser-Inspektionstool), um die Tabelle in Ihrem Beispiel-Topic auszuwählen.

Wählen Sie das Element thead (den Tabellenkopf) aus.

Wählen Sie im Stile-Bereich das Plus-Symbol +, um eine neue Regel hinzuzufügen.

Ändern Sie den Selektor auf:

.data-table > .table thead

Mit diesem Selektor beziehen Sie sich auf die Kopfzeile (thead) von Tabellen, die sich innerhalb eines übergeordneten Elements (in diesem Fall eines div-Elements) mit dem Klassennamen „data-table“ befinden. Die CSS, die Sie in dieser Regel festgelegt haben, gelten nicht für die Kopfzeile anderer Tabellen.

Legen Sie nun die Hintergrundfarbe und die Textfarbe für die Kopfzeile fest:

.data-table > .table thead {
        background-color: #9b9ba4;
        color: #ffffff;
}

Kopieren Sie die Regel und fügen Sie sie in Ihr CSS ein.

Wählen Sie das Plus-Symbol +, um eine weitere Regel hinzuzufügen.

Ändern Sie den Selektor und fügen Sie die folgenden Stileigenschaften hinzu:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
}

Dieser Selektor bezieht sich auch hier wieder auf eine Tabelle, die ein untergeordnetes Element eines Elements ist, das die Klasse „Datentabelle“ hat. Die Stile legen fest, dass die Tabelle einen soliden, dünnen, dunkelgrauen Rand haben soll.

Der Rand zeigt, dass die Tabelle unten etwas mehr Platz hat. Diesen werden wir im nächsten Schritt entfernen.

Fügen Sie der Regel, die Sie im vorherigen Schritt erstellt haben, den folgenden Stil hinzu:

margin-bottom: 0px !important;

Ihre vorherige Regel sollte nun wie folgt aussehen:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
        margin-bottom: 0px !important;
}

Dies befiehlt dem Browser, den unteren Rand auf Null zu setzen. !important hat Vorrang vor dem unteren Randwert, der für alle Tabellen in einem anderen CSS festgelegt ist.

Kopieren Sie die Regel und fügen Sie sie in Ihr CSS ein.

Nun fügen wir eine Hintergrundfarbe hinzu, damit die Zeilen variieren. Erstellen Sie die folgende neue Regel:

.data-table > .table tbody tr:nth-child(2n) {
        background-color: ghostwhite;
}

Mit diesem Selektor beziehen Sie sich wieder auf die Tabelle, die ein untergeordnetes Element des div-Elements „Datentabelle” ist. Diesmal beziehen Sie sich auch auf den Tabellenkörper, und tr:nth-child (2n) bezieht sich auf die geraden Zeilen. Sie haben als Hintergrundfarbe der Zeilen „Geisterweiß“ festgelegt.

Als Sie Ihre Probetabelle erstellt haben, war die Aufgabe, der letzten Zelle (td) ein Klassenattribut mit dem Wert „gelbe Zelle“ zu geben. Gestalten wir als Nächstes diese Zelle.

Verwenden Sie Auswahlwerkzeug des Browsers, um die letzte Zelle in der Tabelle auszuwählen.

Treffen Sie unter Stile die folgende Auswahl:

<td class="td yellow-cell">

Wählen Sie das Plus-Symbol +, um eine neue Regel hinzuzufügen und der Zelle einen gelben Hintergrund zu geben:

.td.yellow-cell {
        background-color: #fdef20;
}

Kopieren Sie die Regel und fügen Sie sie in Ihr CSS ein.

Speichern Sie Ihr CSS.

Hochladen benutzerdefinierter CSS.

Wählen Sie das Dreipunkt-Menü (... für Ihre Musterpublikation.

Wählen Sie Veröffentlichen aus.

Wählen Sie HTML5 und dann Ihr benutzerdefiniertes HTML5-Helpcenter-Layout.

Wählen Sie Dokument veröffentlichen aus.

Navigieren Sie im Download-Bereich zu out/index.html und öffnen Sie die Datei index.html in Ihrem Browser.

Wählen Sie auf der Hub-Seite Ihr Beispiel-Topic aus.

Wählen Sie im oberen Menü Layout aus.

Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

Wählen Sie in der Seitenleiste Formelle Elemente.

Wählen Sie Aktivieren in Separate Gestaltung für die Beschriftung, die Nummer und den Titel in formalen Elementen verwenden.

Wenn diese Einstellung aktiviert ist, wird den HTML- und Klassennamen das Element <span> hinzugefügt, sodass jeder Abschnitt mit CSS individuell gestaltet werden kann.

Drücken Sie Speichern.

Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

Verwenden Sie CSS-Selektoren, um auszuwählen, welche Teile Sie ein- oder ausschließen möchten.

Verwenden Sie diesen Code, um beispielsweise die Beschriftung, die Nummer und das Trennzeichen einer Tabelle nach der Nummer auszublenden:

.table-title .formal-label {
    display:none;
}

Wenn Sie die Autotext-Beschriftung beibehalten, aber die Zahl und das Trennzeichen ausblenden möchten, verwenden Sie den folgenden Code:

.table-title .formal-number, .table-title .formal-label-delimeter {
    display: none;
}

Die anderen Elemente mit Titeln haben ähnliche Klassen, zum Beispiel hat das Beispielelement eine Beispiel-Titelklasse mit Span-Klassen für formal-label, formal-label-text, formal-number und formal-label-delimiter.

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS.

Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

So ändern Sie die Farbe der verschiedenen Teile einer Notiz:

/* This part changes the color of the left-margin border and the background  */

.note {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.note::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.note h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.note > p {
color:#ffffff;
}

Um andere Warnmeldungen zu gestalten, fügen Sie zusätzlichen Code hinzu und ersetzen .note durch den Namen der Warnmeldung (z. B. .warning).

/* This part changes the color of the left-margin border and the background  */

.warning {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.warning::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.warning h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.warning > p {
color:#ffffff;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS

Wenn Sie Inhalte mit dem HTML-Layout veröffentlichen, werden die von Ihnen hinzugefügten CSS-Stile in die veröffentlichte Ausgabe aufgenommen. Ihre individuellen Stile haben Vorrang vor den standardmäßig integrierten Stilen.

Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

Verwenden Sie diesen CSS-Code, um Warnbegriffe auszublenden:

.caution h3, .important h3, .note h3, .tip h3, .warning h3{
    display: none;
}

Somit werden die Warnbegriffe für alle Warnmeldungsarten (Achtung, Wichtig, Hinweis, Tipp, Warnung etc.) ausgeblendet.

Fügen Sie einen zusätzlichen Abstand für den Fließtext der Warnmeldung hinzu, damit dieser nicht mit dem oberen Bereich des Warnmeldungs-Icons kollidiert. Somit erhält der Text oben einen 10-Pixel-Rand, der standardmäßig dem gleichen Abstand entspricht, der für das Symbol verwendet wird.

Fügen Sie dazu diesen Code zu Ihrem CSS hinzu:

.warning > p, .note > p, .important > p, .caution > p, .tip > p {
    margin-top: 10px;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS

Wenn Sie Inhalte mit dem HTML-Layout veröffentlichen, werden die von Ihnen hinzugefügten CSS-Stile in die veröffentlichte Ausgabe aufgenommen. Ihre individuellen Stile haben Vorrang vor den standardmäßig integrierten Stilen.

Suchen Sie im Abschnitt FontAwesome 4.6.3, um das Symbol zu finden, das Sie verwenden möchten. Notieren Sie sich den Code.

Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

Um das Symbol für eine Notiz zu ändern, verwenden Sie diesen CSS-Code:

.note:before {
    content: '\f12a';
    font-family: FontAwesome;
}

In diesem Beispiel haben wir f12a als Beispielcode für ein FontAwesome-Symbol verwendet. Sie müssen diesen durch den Code für das gewählte Symbol ersetzen.

Um den Abstand eines Icons oder dessen Farbe anzupassen, können Sie seine Stile entsprechend festlegen.

.note:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

Hier ist ein Beispiel für die Gestaltung einer Notiz, wobei die Farbe festgelegt und die Schriftgröße sowie der Abstand zwischen den oberen Rändern vergrößert wurden.

Um die anderen Warnungsarten zu gestalten, fügen Sie zusätzlichen Code hinzu und ersetzen .note durch die Bezeichnung der Warnungmeldung (z. B. .warning).

.warning:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

Speichern Sie Ihre CSS-Datei.

Hochladen benutzerdefinierter CSS

Wenn Sie Inhalte mit dem HTML-Layout veröffentlichen, werden die von Ihnen hinzugefügten CSS-Stile in die veröffentlichte Ausgabe aufgenommen. Ihre individuellen Stile haben Vorrang vor den standardmäßig integrierten Stilen.

Wählen Sie im oberen Menü Layout aus.

Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

Wählen Sie Tabellenstile in der Seitenleiste.

Stellen Sie sicher, dass die Ausgabeklassen für das Formatieren von Tabellen aktiviert sind.

Drücken Sie Speichern.

Veröffentlichen Sie Ihre Inhalte mit der Standard-Gestaltung für Tabellen und öffnen Sie anschließend die Ausgabe in Ihrem Browser.

Verwenden Sie die Inspektionstools des Browsers, um die Klasse für den Teil der Tabelle zu identifizieren, den Sie gestalten möchten. Wenn Sie beispielsweise die Kopfzeile Ihrer Tabellen gestalten möchten, verwenden Sie das Inspektionstool, um die Kopfzeilenzellen der Tabelle in der zugrunde liegenden HTML zu finden. Sie werden sehen, dass jede Kopfzeilenzelle im CSS mit .th formatiert ist.

Verwenden Sie die Entwickler-Tools des Browsers, um neue Stile für die Klasse hinzuzufügen. So können Sie sehen, welche Auswirkungen Ihre Änderungen haben, wenn Sie sie zu einem CSS-Stilblatt hinzufügen. Wenn Sie beispielsweise möchten, dass alle Tabellenkopfzeilen eine blaue Hintergrundfarbe haben, können Sie Folgendes eingeben:

.th { 
background-color: #557dc4;
}

Wenn Sie mit den von Ihnen erstellten Tabellen-Stylings zufrieden sind, verwenden Sie einen Codeeditor oder ein Textprogramm, um eine neue CSS-Datei zu erstellen. Fügen Sie dann Ihre benutzerdefinierten Stile hinzu und speichern Sie sie mit der Dateierweiterung .css.

Hochladen benutzerdefinierter CSS zu Ihrem Layout.

Wenn Sie dann mit diesem Layout veröffentlichen, verwenden Ihre Inhalte Ihre benutzerdefinierten CSS-Regeln. Ihr CSS-Stylesheet hat Vorrang vor dem Paligo-CSS-Stylesheet.

Wählen Sie das Topic oder die Komponente im Content Manager aus, um es/sie im Editor zu öffnen.

Alternativ können Sie Topics erstellen und dieses bearbeiten.

Positionieren Sie den Cursor innerhalb der Tabelle.

Wählen Sie die Tabelle oder das Informaltable-Element (siehe: Kontextmenü „Elemente“) und wählen Sie Gehe zu Element.

Fügen Sie das Tabstyle-Attribut (siehe: Panel „Elementattribute“) hinzu.

Geben Sie einen Stilnamen als Attributwert ein.

Dieser wird als Stilname in der HTML-Ausgabe verwendet, und Sie verwenden ihn in Ihrem CSS. Es empfiehlt sich, einen Namen zu verwenden, der leicht zu erkennen ist.

Beispielsweise können Sie „Instrumente“ für Tabellen verwenden, die Details zu technischen Instrumenten enthalten.

Drücken Sie Speichern.

Veröffentlichen Sie Ihre Inhalte und öffnen Sie sie in einem Browser.

Verwenden Sie die Inspektionstools des Browsers, um die Klasse für Ihre Tabelle zu finden. Sie sollte mit dem Namen übereinstimmen, den Sie dem tabstyle-Attribut gegeben haben.

Verwenden Sie die Entwicklertools des Browsers, um neue Stile für die Tabellenklasse hinzuzufügen. Beispielsweise können Sie einer „Instrumententabelle“ Überschriftenzellen mit gelbem Hintergrund geben – dies sähe dann so aus:

.instruments th {
background-color:#ffff00;
}

Wenn Sie mit den von Ihnen erstellten Tabellen-Stylings zufrieden sind, verwenden Sie einen Codeeditor oder ein Textprogramm, um eine neue CSS-Datei zu erstellen. Fügen Sie dann Ihre benutzerdefinierten Stile hinzu und speichern Sie sie mit der Dateierweiterung .css.

Hochladen benutzerdefinierter CSS zu Ihrem Layout.

Wenn Sie dann mit diesem Layout veröffentlichen, verwenden Ihre Inhalte Ihre benutzerdefinierten CSS-Regeln. Ihr CSS-Stylesheet hat Vorrang vor dem Paligo-CSS-Stylesheet.

Wählen Sie das Topic oder die Komponente im Content Manager aus, um es/sie im Editor zu öffnen.

Alternativ können Sie Topics erstellen und dieses bearbeiten.

Wählen Sie das Tabellenelement, das Sie gestalten möchten, im Menü „Elementstruktur“ aus:

Fügen Sie eines der folgenden Attribute hinzu (siehe: Panel „Elementattribute“).

Geben Sie den Klassennamen ein, der in der HTML als Wert angezeigt wird. Kleinbuchstaben für den Wert und Leerzeichen dürfen nicht verwendet werden.

Drücken Sie Speichern.

Verwenden Sie einen Code- oder Texteditor eines Drittanbieters, um eine CSS-Datei zu erstellen.

Mit CSS können Sie die Tabellenelemente für die HTML-Ausgabe gestalten.

Bei der Definition Ihrer CSS müssen Sie berücksichtigen, dass Ihr Paligo-Inhalt sowohl Tabellen als auch informelle Tabellen enthalten kann. Die Paligo-HTML5-Ausgabe verwendet auch Tabellen für das Layout an bestimmten Stellen, beispielsweise mit einigen Bildern. In der Regel sollten Sie vermeiden, Tabellen zu gestalten, die für das Layout verwendet werden, sodass Ihre Stile nur die Tabellen und informellen Tabellen betreffen.

Wir haben einige Beispiele für häufig verwendete Tabellenselektoren beigefügt (siehe die Beispiele nach diesem Verfahren).

Speichern Sie Ihre CSS-Datei und laden Sie das benutzerdefinierte CSS hoch, siehe Hochladen benutzerdefinierter CSS.

Veröffentlichen Sie Ihre Inhalte mit dem HTML5-Layout, das Sie im vorherigen Schritt bearbeitet haben.