Styles für Hinweise und Warnhinweise in Onlinedokumentation

Da Hinweise und Warnhinweise bis zu einem gewissen Grad als Blickfang fungieren sollten, sind sie einige der wenigen Stellen in einer Onlinedokumentation, an denen etwas Raum für eine visuell ansprechende Gestaltung verbleibt. Nicht jedes Redaktionssystem bietet hierfür die geeigneten Bordmittel, jedoch lässt schon mit wenig zusätzlichem CSS-Code viel bewirken.

Da Warnhinweise und andere Hinweise in einer Technischen Dokumentation typischerweise sehr häufig vorkommen, ist es besonders wichtig, sie im Redaktionssystem mit wenig Aufwand einfügen und pflegen zu können.

Nachfolgend finden Sie eine kleine Sammlung flexibel integrierbarer Lösungen.

Beispiel 1: Einfache Variante mit Autotext

Im besten Fall sind die Signalwörter wie „Warnung“ oder „Wichtig“ Bestandteil des Formats und brauchen gar nicht eingegeben zu werden. Nachteilig ist jedoch, dass diese Texte dann auch im CSS-Code in mögliche Fremdsprachen übersetzt werden müssen, was nicht mit jedem Workflow zur Übersetzung kompatibel ist. (Tipp: Gegebenenfalls alle in CSS-Dateien enthaltenen Texte als CSS-Variablen anlegen und an zentraler Stelle sammeln.)

Im folgenden Beispiel stammt der Text „Important: “ (einschließlich Doppelpunkt und Leerzeichen) aus einer Formatangabe im CSS-Code. Weisen Sie einem Absatz den definierten Style zu, erscheint automatisch dieser Text und der Absatz ist automatisch wie folgt formatiert:

Here goes some information that readers must not miss.

 
Die Tatsache, dass der Style hier einem Absatz zugewiesen ist, hat Vor- und Nachteile:

▪Vorteil: Der Style lässt sich direkt zuweisen und erfordert kein einleitendes und kein schließendes Element.

▪Nachteil: Der Hinweis kann lediglich aus einem einzigen Absatz bestehen (mit jedem weiteren Absatz würde jeweils ein neuer Hinweis entstehen). Zwar sind auch innerhalb dieses Absatzes manuelle Zeilenwechsel möglich (Umschalttaste+Eingabetaste), jedoch kann das Setzen richtiger Abstände schwierig werden und Aufzählungen oder nummerierte Listen sind nicht verwendbar.

Implementierung zu Beispiel 1

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.note-important {
 border-left: solid 7px #006699;
 border-top: solid 1px #f0f7fb; 
 border-right: solid 1px #f0f7fb; 
 border-bottom: solid 1px #f0f7fb; 
 border-radius: 5px 0 0 5px;
 background-color: #f0f7fb;
 line-height: 18px;
 overflow: hidden;
 padding: 12px;
}
.note-important::before {
 content: "Important: ";
 font-weight: bold;
}

Schritt 2: Weisen Sie den Absätzen, die ein Hinweis werden sollen, den Style note-important zu.

Beispiel 2: Variante für mehrere Absätze

Die nächste Variante besteht aus mehreren Absätzen und einer Liste.

Implementierung zu Beispiel 2

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.noteblock {
  background-color: #f0f7fb;
  border-left: solid 4px #006699;
  overflow: hidden;
  padding: 12px 20px 14px 20px;
}

Schritt 2: Setzen Sie im Text den Hinweis zwischen folgende beiden HTML-Schnipsel:

<div class="noteblock">

</div>

Beispiel 3: Seitlich stehendes Zeichen

Die folgenden Beispiele verwenden ein einzelnes Zeichen aus einer beliebigen Schriftart als Symbol.

Implementierung zu Beispiel 3

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.side-warning {
  border: 1px solid #CB101E;;
  border-radius: 5px;
  color: var(--used-color);
  margin-bottom: 32px;
  margin-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;  
}
.side-warning::before {
  align-items: center;
  background-color: #CB101E;;
  border-radius: 50%;
  color: #fff;
  content: "!";
  display: flex;
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  left: -12px;
  line-height: 1;
  position: absolute;
  top: -12px;
  width: 24px;
}
.side-note {
  border: 1px solid #727272;
  border-radius: 5px;
  color: #727272;
  margin-bottom: 32px;
  margin-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;  
}
.side-note::before {
  align-items: center;
  background-color: #727272;
  border-radius: 50%;
  color: #fff;
  content: "!";
  display: flex;
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  left: -12px;
  line-height: 1;
  position: absolute;
  top: -12px;
  width: 24px;
}
.side-tip {
  border: 1px solid #006699;
  border-radius: 5px;
  color: var(--used-color);
  margin-bottom: 32px;
  margin-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;  
}
.side-tip::before {
  align-items: center;
  background-color: #006699;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  display: flex;
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  left: -12px;
  line-height: 1;
  position: absolute;
  top: -12px;
  width: 24px;
}

Schritt 2: Weisen Sie den gewünschten Style entweder einem einzelnen Absatz zu, oder setzen Sie den Hinweis zwischen folgende beiden HTML-Schnipsel:

<div class="side-warning">

</div>

(Um die anderen beiden Styles anzuwenden, ersetzen Sie side-warning durch side-note oder durch side-tip.)

Beispiel 4: Seitlich stehendes Symbol

Schlicht aber dennoch auffällig sind die folgenden Styles im „Flat Design“.

Anmerkung: Sie könnten diese Designs auch mit einer Tabelle implementieren, wenn Sie nicht über das hinausgehen möchten, was Ihr Redaktionssystem unterstützt, oder wenn Sie denselben Style auch für die PDF-Ausgabe benötigen und Ihr Redaktionssystem bei der Erstellung von PDF kein CSS anwendet.

Implementierung zu Beispiel 4

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Beachten Sie, dass Sie die Pfade und Namen der Bilder gegebenenfalls anpassen müssen.

.the-warning {
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  padding: 14px 23px 14px 20px;
  background: #FEF1F2;
  box-shadow: inset 43px 0 0 0 #CB101E;
}
.the-warning::before {
  content: "";
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -13px;
  margin-right: auto;
  width: 30px;
  height: 30px;
  background-image: url("YOUR-PATH/warning.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}
.the-note {
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  padding: 14px 23px 14px 20px;
  background: rgb(249,249,249);
  box-shadow: inset 43px 0 0 0 #727272;
}
.the-note:before {
  content: "";
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -13px;
  margin-right: auto;
  width: 30px;
  height: 30px;
  background-image: url("YOUR-PATH/warning.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}  
.the-tip {
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  padding: 14px 23px 14px 20px;
  background: #f0f7fb;
  box-shadow: inset 43px 0 0 0 #006699;
}
.the-tip::before {
  content: "";
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -13px;
  margin-right: auto;
  width: 30px;
  height: 30px;
  background-image: url("YOUR-PATH/note.svg");
  background-size: 30px;
  background-repeat: no-repeat;
}

Schritt 2: Weisen Sie den gewünschten Style entweder einen einzelnen Absatz zu, oder setzen Sie im Text den Hinweis zwischen folgende beiden HTML-Schnipsel:

<div class="the-warning">

</div>

(Um anderen beiden Styles anzuwenden, ersetzen Sie the-warning durch the-note oder durch the-tip.)

Alternative Designs

Diese Styles lassen sich auch abwandeln, z. B.:

▪Hintergrund rechts hellgrau statt farbig

▪Hintergrund rechts weiß statt farbig und mit einer dünnen Linie umrandet

▪Hintergrund sowohl rechts als auch links hellgrau oder weiß und dafür das Symbol farbig

▪abgerundete Ecken …

Falls das Symbol nicht mittig, sondern oben stehen soll, ändern Sie jeweils das Statement align-items: center; in align-items: top; im CSS-Code.

Beispiel 5: Symbol und Kasten

Eine weitere Variante ist schließlich noch diese hier:
 

Implementierung zu Beispiel 5

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

Beachten Sie, dass Sie die Pfade und Namen der Bilder gegebenenfalls anpassen müssen.

.note-variant {
  display: grid;
  grid-template-columns: 33px 1fr;
  align-items: normal;
  padding: 0px 23px 14px 20px;
  background: white;
  box-shadow: inset 33px 0 0 0 white;
  border: 1px solid #727272;
}    
.note-variant::before {
  content: "";
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -20px;
  margin-right: auto;
  width: 35px;
  height: 35px;
  background-image: url("YOUR-PATH/note-box.svg");  
  background-position: center left;
  background-size: 35px;
  background-repeat: no-repeat;
} 

Schritt 2: Setzen Sie im Text den Hinweis zwischen folgende beiden HTML-Schnipsel:

<div class="note-variant">
 <div>

 </div>
</div>

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.