Wie Nutzen Sie CSS in adoc Studio

Mit Produktstilen passen Sie die Darstellung Ihrer Dokumentation genau an Ihre Bedürfnisse an. Ob Corporate Design, ästhetische Vorlieben oder spezielle Layoutanforderungen – mit individuellen Stilen haben Sie die volle Kontrolle über das Erscheinungsbild Ihrer HTML- und PDF-Dokumente.

In adoc Studio sind Sie daher nicht auf die mitgelieferten Stile beschränkt. Sie können auch eigene Stile erstellen.

Grundlagen der Stilstruktur in adoc Studio

Die Stile in adoc Studio basieren auf CSS, den Cascading Style Sheets. Jeder Stil beruht auf einem sogenannten Basisstil, der als Grundlage für das Design verwendet wird. Diesen Basisstil können Sie durch zusätzliche Stile erweitern oder überschreiben, wodurch sich Stilelemente effizient wiederverwenden und anpassen lassen.

Jeder Stil besteht aus mehreren Komponenten:

• style.css: Die Hauptdatei, die das Erscheinungsbild definiert.

• info.json: Enthält Metadaten zum Stil, wie Name, ID und Basisstil.

• Ressourcenordner: Hier können zusätzliche Dateien wie Schriftarten und Bilder abgelegt werden

Lernen Sie die bestehenden Stile kennen

Bevor Sie einen eigenen Stil erstellen, ist es hilfreich, die bestehenden Stile von adoc Studio zu untersuchen und zu verstehen, wie sie aufgebaut sind. So können Sie "hinter die Kulissen" blicken:

1. Öffnen Sie adoc Studio

2. Navigieren Sie zum Menu "adoc Studio > Einstellungen > Produktstile"

3. Wählen Sie einen der Stile aus, beispielsweise "Standard", und klicken Sie auf das Plus-Symbol.

4. Wählen Sie den neuen Stil aus und klicken Sie mit der rechten Maustaste auf "Im Finder anzeigen"

5. Im Finder klicken Sie dann mit der rechten Maustaste auf "Paketinhalt anzeigen"

Hier finden Sie nun die drei oben genannten Komponenten. Die info.json Datei ist direkt sichtbar, die style.css Datei finden Sie im Ordner "resources". Sie können beide Dokumente z.B. mit einem Texteditor Ihrer Wahl öffnen.

Je nach dupliziertem Stil sehen Sie die zugehörige style.css-Datei, die alle Gestaltungsangaben für Ihr Dokument enthält. An dieser Stelle verzichten wir auf ein vollständiges CSS-Tutorial. Dafür gibt es bereits ausgezeichnete Ressourcen. Wenn Sie mehr erfahren möchten, bietet die W3 School einen umfassenden CSS-Kurs inklusive Übungseditor an.

Studieren Sie die Struktur und Definitionen in den Dateien, um zu verstehen, wie verschiedene Elemente gestaltet werden. Wir ermutigen Sie, sich in der style.css-Datei auszuprobieren. Sie können dabei nichts kaputtmachen. Im schlimmsten Fall duplizieren Sie den Produktstil, den Sie als Basis verwendet haben, und starten erneut. Wichtig ist nur, dass Sie den Basisstil nicht ändern. Dieser befindet sich an einem anderen Ort und muss hier nicht weiter behandelt werden.

Eigenen Stil erstellen

Sie erstellen einen eigenen Stil, indem Sie einen bestehenden Stil duplizieren und nach Ihren Wünschen anpassen:

1. Bestehenden Stil duplizieren

A) Öffnen Sie adoc Studio und navigieren Sie zu den Einstellungen:
Gehen Sie zu "Einstellungen" > "Produktstile".

B) Wählen Sie einen Ausgangsstil:
Entscheiden Sie sich für einen Stil, der Ihrem gewünschten Endergebnis am nächsten kommt, zum Beispiel den „Standard“-Stil.

C) Stil duplizieren:
Wählen Sie den gewünschten Stil aus und klicken Sie auf das Plus-Symbol oder (über das Symbol mit den drei Punkten) auf „Duplizieren“. Geben Sie Ihrem neuen Stil nun einen eindeutigen Namen, z. B. „Mein individueller Stil“.

2. Stildateien bearbeiten

Nachdem Sie einen neuen Stil erstellt haben, können Sie die zugehörigen Dateien bearbeiten, um Anpassungen vorzunehmen.

A) Stilordner finden:
Rufen Sie den Stilordner über die Einstellungen ("adoc Studio > Einstellungen > Produktstile") auf. Wählen Sie den duplizierten Stil aus und klicken Sie auf "Im Finder anzeigen".

B) Dateien öffnen:
Öffnen Sie die Dateien style.css und info.json mit Ihrem bevorzugten Texteditor.

C) info.json anpassen:

Die info.json Datei liefert die folgenden Metadaten zu Ihrem Stil:

• id Eine Erkennungsnummer, die einzigartig ist. Sie wird automatisch generiert, wenn Sie einen neuen Stil anlegen

• name Hier können Sie den Namen des Stils ändern, der später in der Produktstil-Auswahl angezeigt wird

• basedOn Gibt an, welcher Basisstil genutzt werden soll

• isHidden Gibt an, ob der Stil in den Produktstilen mit angezeigt werden soll oder nicht

D) style.css bearbeiten:
In der style.css können Sie alle CSS-Eigenschaften nach Belieben anpassen. Ändern Sie Schriftarten, Farben, Abstände und andere Stilelemente, um das gewünschte Erscheinungsbild zu erreichen. Verwenden Sie CSS-Selektoren, um spezifische Elemente Ihres Dokuments zu stylen.

Beispiel: Um die Hauptschriftart zu ändern, können Sie den Eintrag zum body Element bearbeiten oder hinzufügen:

body {
font-family: 'IhreSchriftart', sans-serif;
font-size: 16px;
color: #333333;
}

3. Änderungen in adoc Studio anzeigen

Nach jeder Anpassung speichern Sie die Dateien style.css und info.json. Wechseln Sie zurück zu adoc Studio. Öffnen Sie Ihr Dokument und wählen Sie unter "Produktstile" Ihren neu erstellten Stil aus. Überprüfen Sie in der Vorschau, wie Ihre Anpassungen aussehen, sowohl für HTML als auch für PDF-Ausgaben.

Technisches Schreiben auf Mac, iPad & iPhone

Testphase starten

Erste Schritte in CSS

Jetzt sind Sie gefragt. Anhand zweier Beispiele zeigen wir Ihnen, wie Sie CSS Elemente in adoc Studio hinzufügen oder anpassen.

Schriftarten hinzufügen

Schriftarten werden lokal gespeichert. Möchten Sie eine spezielle Schriftart in Ihr Dokument einbinden, die nicht standardmäßig vorhanden ist, empfiehlt es sich, diese im Produktstil in adoc Studio zu hinterlegen. So müssen Sie nur die Stildatei mitsenden, damit der Empfänger das Dokument genau wie von Ihnen gestaltet sieht.

1. Schriftarten zum Stilordner hinzufügen:
Legen Sie im Stilordner einen Unterordner namens fonts an. Fügen Sie die gewünschten Schriftartdateien (z.B. .ttf oder .otf) in diesen Ordner ein.

2. Schriftarten in style.css einbinden:
Verwenden Sie die @font-face Regel, um die Schriftarten zu definieren:

@font-face {
font-family: 'IhreSchriftart';
src: url('fonts/IhreSchriftart.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

3. Schriftarten verwenden:
Setzen Sie die neu definierte Schriftart in Ihren CSS-Selektoren ein:

h1, h2, h3 {
font-family: 'IhreSchriftart', sans-serif;
}

adoc Studio

Technische Dokumente in AsciiDoc erstellen.
Ganz ohne Terminal.
in AsciiDoc erstellen.
Ganz ohne Terminal.

14 Tage kostenlos testen

Farbschemata anpassen

Ein weiterer wichtiger Aspekt der Dokumentation ist die Einhaltung der Corporate Identity. Die richtigen Farben müssen gewählt werden, damit das Dokument zur Marke passt. Hier sind einige Tipps, um Farben effektiv in den Produktstil einzufügen.

1. Farbvariablen definieren:
Definieren Sie am Anfang Ihrer style.css Farbvariablen für eine konsistente Farbpalette:

:root {
--primary-color: #0055a5;
--secondary-color: #ffd700;
--text-color: #333333;
--background-color: #ffffff;
}

2. Farbvariablen verwenden:
Nutzen Sie diese Variablen in Ihrem CSS, um Farben zuzuweisen:

body {
background-color: var(--background-color);
color: var(--text-color);
}

a {
color: var(--primary-color);
}


a:hover {
color: var(--secondary-color);
}

3. Einfache Anpassungen:
Durch Ändern der Werte der Variablen können Sie das gesamte Farbschema Ihres Dokuments schnell anpassen.

Weitere Tipps

• Inkrementelle Änderungen: Nehmen Sie Änderungen Schritt für Schritt vor und überprüfen Sie regelmäßig die Auswirkungen in der Vorschau.

• Versionskontrolle: Verwenden Sie ein Versionskontrollsystem wie Git, um Ihre Stiländerungen zu verfolgen und bei Bedarf zurückzusetzen.

• Dokumentation nutzen: Konsultieren Sie die offizielle CSS- und AsciiDoc-Dokumentation für detaillierte Informationen und fortgeschrittene Techniken.

• Kompatibilität testen: Stellen Sie sicher, dass Ihre Stile sowohl in der HTML- als auch in der PDF-Ausgabe korrekt angezeigt werden.

• Fehlerbehebung: Nutzen Sie die Entwicklertools Ihres Browsers, um CSS-Probleme zu identifizieren und zu beheben.

• Wiederverwendbarkeit: Strukturieren Sie Ihre Stile so, dass sie leicht auf verschiedene Projekte angewendet und bei Bedarf angepasst werden können.

Fazit

Das Erstellen eigener Stile in adoc Studio bietet Ihnen die Möglichkeit, Ihre Dokumentationen individuell und professionell zu gestalten. Mit ein wenig CSS-Kenntnissen und dem Verständnis der Stilstruktur von adoc Studio können Sie das Erscheinungsbild Ihrer Dokumente maßgeschneidert anpassen und so einen konsistenten und ansprechenden Auftritt gewährleisten. Nutzen Sie die Flexibilität von adoc Studio, um Ihre technischen Dokumentationen auf das nächste Level zu heben.

Viel Erfolg bei der Gestaltung Ihrer individuellen Stile!