Formatvorlagen zentral festlegen.
Auf direkte Formatierungen, also Schriftgröße, Farbe und Schriftart sollte man in der Regel verzichten und diese Sachen zentral festlegen.
Die geht in DA-HelpCreator mittels CSS-Formatvorlagen. Hierzu öffnen wir die Einstellungen, das HTML-Template und hier den Reiter CSS.
Hier können wir die Einstellungen der bestehenden Vorlage bearbeiten. Für die meisten Vorlagen ist hier bereits Inhalt vorhanden, den können wir in den meisten Fällen so lassen.
Eigene Formatvorlagen können wir hier mit CSS einfügen.
Vorlage für Formatvorlagen
Als Vorlage können Sie die folgende Vorlage verwenden.
/* ==========================================================================
DA-HelpCreator Formatvorlage - Basis
========================================================================== */
/* Überschriften */
h1 {
font-size: 32px; /* Schriftgröße der Hauptüberschrift */
color: #2c3e50; /* Dunkelgrau für Überschriftentext */
border-bottom: 3px solid #3498db; /* Blaue Unterstreichung (3px dick) */
padding-bottom: 10px; /* Abstand zwischen Text und Linie */
margin-bottom: 20px; /* Abstand nach unten zum nächsten Element */
}
h2 {
font-size: 26px; /* Schriftgröße der zweiten Ebene */
color: #2c3e50; /* Dunkelgrau für Überschriftentext */
border-bottom: 2px solid #95a5a6; /* Graue Unterstreichung (2px dick) */
padding-bottom: 8px; /* Abstand zwischen Text und Linie */
margin-top: 25px; /* Abstand nach oben (Trennung vom vorherigen Inhalt) */
margin-bottom: 15px; /* Abstand nach unten zum nächsten Element */
}
h3 {
font-size: 22px; /* Schriftgröße der dritten Ebene */
color: #34495e; /* Mittelgrau für Text */
margin-top: 20px; /* Abstand nach oben */
margin-bottom: 12px; /* Abstand nach unten */
}
/* Absätze */
p {
margin-bottom: 15px; /* Abstand zwischen Absätzen */
line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
}
/* Code */
code {
background-color: #f5f5f5; /* Hellgrauer Hintergrund */
color: #e83e8c; /* Pink/Magenta für Code-Text */
padding: 2px 6px; /* Innenabstand (oben/unten 2px, links/rechts 6px) */
border-radius: 3px; /* Abgerundete Ecken */
}
/* Bilder */
img {
max-width: 100%; /* Bild passt sich der Breite an (responsive) */
height: auto; /* Höhe wird automatisch angepasst */
margin: 15px 0; /* Abstand oben und unten */
}
/* Tabellen */
table thead th {
background-color: #3498db; /* Blauer Hintergrund für Tabellenkopf */
color: white; /* Weiße Schrift */
padding: 10px; /* Innenabstand in Kopfzellen */
}
table tbody td {
padding: 10px; /* Innenabstand in Datenzellen */
border: 1px solid #ddd; /* Hellgrauer Rahmen um Zellen */
}
Diese enthält die wichtigsten Formateinstellungen, welche angepasst werden können.
Einfügen des CSS-Codes
Den Code kopieren wir und fügen diesen ein, den bestehenden Code lassen wir unangetastet.
CSS-Code entfernen
Da der Code einige Anpassungen vornimmt, können wir Elemente, welche wir nicht verändern, wollen einfach rauslöschen.
Einzelne Attribute entfernen
Auch einzelne Elemente, wie z.B. einen Rahmen können wir entfernen, wenn wir dies nicht brauchen.
Farben anpassen
Mittels Colorpicker können wir auch Farben anpassen.
Vorschau der Anpassungen
Beim Export oder der Vorschau werden die Änderungen sichtbar.
