CSS-Rezeptbuch für das Help Center

Bei Suite Growth und höheren Plänen verfügbar Bei allen Guide-Plänen verfügbar

Sie können das Erscheinungsbild Ihres Help Centers mit Cascading Style Sheets (CSS) ganz einfach anpassen. Dieses Rezeptbuch soll Ihnen dabei helfen, dem Help Center das gewünschte Aussehen zu verleihen.

Hinweis: Testbenutzer verwenden den Professional-Plan, bei dem der Code bearbeitet werden kann. Wenn sie sich nach Ablauf des Testzeitraums aber für Suite Team entscheiden, haben sie keinen Zugriff mehr auf diese Funktion.

Weitere Informationen zur Bearbeitung des CSS in Guide finden Sie unter Anpassen von CSS oder JavaScript.

Wenn Sie noch nie (oder schon länger nicht mehr) mit CSS gearbeitet haben, sind die folgenden Tutorials sehr hilfreich:

Einführung in CSS – Das umfassendste CSS-Tutorial für Anfänger ohne Vorkenntnisse. Dort werden die grundlegenden Funktionen der Sprache erklärt und Sie finden praktische Beispiele, die Sie selbst ausprobieren können.
CSS-Tutorial für Anfänger – Nützliche Informationen zum Einstieg.

Sie können das Erscheinungsbild Ihres Help Centers auch mit der Help-Center-Vorlagensprache oder JavaScript anpassen:

Inhalt

Das Rezeptbuch ist in Abschnitte unterteilt, die den Elementen eines Help Centers entsprechen. In jedem Abschnitt finden Sie CSS-Code, den Sie direkt in das Stylesheet Ihres Designs kopieren können. Sie können diesen Code unverändert übernehmen oder für Ihre Zwecke anpassen.

Das Rezeptbuch erhebt keinen Anspruch auf Vollständigkeit. Da Sie die HTML-Vorlagen und das CSS-Stylesheet beliebig modifizieren können, sind Ihre Möglichkeiten praktisch unbegrenzt.

Kopf- und Fußbereich

Abhängig vom Design und den Benutzerrollen erscheinen im Kopfbereich ein Logo und andere Komponenten. Im Fußbereich können Sie verwandte Links, Informationen über Ihr Unternehmen und rechtliche Hinweise anzeigen.

Zurück zum Inhaltsverzeichnis

Ändern der Hintergrundfarbe von Kopf- und Fußbereich

Ändern Sie die Eigenschaft background-color in den folgenden Selektoren (bzw. fügen Sie sie hinzu).

Header:

.header {
  background-color: #666;
}

Fußbereich:

.footer {
  background-color: #333;
}

Ändern der Höhe von Kopf- und Fußbereich

Ändern Sie die Eigenschaft height in den folgenden Selektoren (bzw. fügen Sie sie hinzu).

Header:

.header {
   height: 70px;
}

Fußbereich:

.footer {
   height: 20px;
}

Ändern des Abstands über oder unter dem Kopf- und Fußbereich

Ändern Sie die Eigenschaften margin-bottom und margin-top in den folgenden Selektoren (bzw. fügen Sie sie hinzu).

Header:

.header {
     margin-bottom: 20px;
}

Fußbereich:

.footer {
     margin-top: 10px;
}

Ändern des Erscheinungsbilds der gewählten Sprache

Fügen Sie den folgenden Selektor und die folgende Eigenschaft hinzu:

.language-selector .dropdown-toggle {
  color: green;
}

Ändern des Erscheinungsbilds des Links „Anfrage einreichen“

Aus Gründen der Flexibilität enthält die Vorlage header.hbs sowohl eine Desktop- als auch eine Mobilgeräte-Version des Headers. Die Desktop-Version befindet sich in einem Abschnitt mit der Klasse nav-wrapper-desktop und die Mobilgeräte-Version in einem Abschnitt mit der Klasse nav-wrapper-mobile. Jeder Abschnitt enthält einen separaten Link „Anfrage einreichen“. Um das Erscheinungsbild des Links zu ändern, müssen Sie für Desktops und für Mobilgeräte jeweils eine eigene Version Ihrer CSS-Regel erstellen und Selektoren mit spezifischen Einstellungen hinzufügen.

Fügen Sie der styles.css-Datei die folgenden Selektoren hinzu und ändern Sie die Texteigenschaften:

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

Ausblenden des Links „Anfrage einreichen“

Fügen Sie der styles.css-Datei die folgenden Selektoren hinzu:

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

Ändern des Erscheinungsbilds des Links „Anmelden“

Ändern Sie die Texteigenschaften im folgenden Selektor (bzw. fügen Sie sie hinzu):

.login {
  font-size: 14px;
  color: green;
}

Ändern der Logoabmessungen

Bei Bedarf können Sie die Standardgröße für Logos (200 x 50 Pixel) überschreiben.

Hinweis: Wenn Sie ein Logo verwenden möchten, das größer ist als der empfohlene Wert, müssen Sie das Bild außerhalb Ihrer Zendesk Support-Instanz hosten.

So ändern Sie die Logogröße

Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
Klicken Sie auf Design bearbeiten.
Klicken Sie auf CSS, um das CSS-Stylesheet zu öffnen, und machen Sie die folgende Regel ausfindig:
```
.logo img {
  max-height: 37px;
}
```
Im Codeeditor kann die Suchfunktion über die Tastenkombination Strg+F (Windows) bzw. Befehl+F (Mac) aufgerufen werden.
Modifizieren Sie die Eigenschaft height im Selektor „.logo img“ passend zur Höhe Ihres Bildes.
Klicken Sie auf Speichern.

Suche

Über das Suchfeld können Benutzer in der Wissensdatenbank und der Community nach Inhalten suchen. Die Ergebnisse erscheinen auf einer Ergebnisseite. Bei Bedarf können Sie das Suchfeld entfernen. Weitere Informationen finden Sie unter search (Helper) in der Help-Center-Vorlagendokumentation.

Zurück zum Inhaltsverzeichnis

Ändern der Höhe oder Breite des Suchfelds

Ändern Sie den Wert width bzw. height in den folgenden Selektoren.

Großes Suchfeld:

.search input[type=search] {
  height: 50px;
  width: 90%;
}

Kleines Suchfeld:

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

Ändern der Hintergrundfarbe des Suchfelds

Ändern Sie die Eigenschaft background in den folgenden Selektoren.

Großes Suchfeld:

.search input[type=search] {
  background: #999;
}

Kleines Suchfeld:

.search-small input[type=search] {
  background: #999;
}

Ändern des Erscheinungsbilds des Suchtexts

Ändern Sie die Texteigenschaften in den folgenden Selektoren (bzw. fügen Sie sie hinzu).

Großes Suchfeld:

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Kleines Suchfeld:

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Ändern des Erscheinungsbilds der Überschrift der Ergebnisseite

Aus der Überschrift der Suchergebnisseite geht hervor, wie viele Ergebnisse zu einem Suchbegriff gefunden wurden. Beispiel: 9 Ergebnisse zu „Seriennummer“.

Fügen Sie den folgenden Selektor hinzu, wenn er noch nicht im Stylesheet vorhanden ist, und ändern Sie die Texteigenschaften (bzw. fügen Sie sie hinzu):

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

Ändern des Erscheinungsbilds der hervorgehobenen Schlüsselwörter in Suchergebnissen

Hervorgehobene Begriffe in Suchergebnissen sind im Container „.search-result-description“ durch das Inline-Element „<em>“ eingeschlossen. Wenn die hervorgehobenen Begriffe stattdessen fett mit gelbem Hintergrund erscheinen sollen, verwenden Sie Folgendes:

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Ändern des Erscheinungsbilds der Überschriften von Wissensdatenbank und Community

Ändern Sie die Texteigenschaften im folgenden Selektor (bzw. fügen Sie sie hinzu):

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Ändern des Abstands zwischen den Ergebnissen

Fügen Sie die Eigenschaft margin-bottom im folgenden Selektor hinzu:

.search-result {
  margin-bottom: 20px;
}

Ändern des Erscheinungsbilds des Ergebnistexts

Ändern Sie die Texteigenschaften im folgenden Selektor (bzw. fügen Sie sie hinzu):

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Ändern der Farbe der Ergebnislinks

Ändern Sie die Eigenschaft color im folgenden Selektor (bzw. fügen Sie sie hinzu):

.search-result a {
  color: #484;
}

Brotkrümel

Brotkrümel helfen Benutzern, durch die Inhalte in Ihrem Help Center zu navigieren. Bei Bedarf können Sie die Brotkrümel entfernen. Weitere Informationen finden Sie unter breadcrumbs (Helper) in der Help-Center-Vorlagendokumentation.

Zurück zum Inhaltsverzeichnis

Ändern des Abstands über und unter den Brotkrümeln

Ändern Sie die Eigenschaften padding im folgenden Selektor (bzw. fügen Sie sie hinzu):

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Ändern des Erscheinungsbilds des Brotkrümeltexts

Ändern Sie die Texteigenschaften im folgenden Selektor (bzw. fügen Sie sie hinzu):

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Ändern der Farbe der Brotkrümel-Links

Fügen Sie den folgenden Selektor und die folgende Eigenschaft hinzu:

.breadcrumbs li a {
  color: #484;
}

Ändern des Pfeilzeichens (>) in den Brotkrümeln

Ändern Sie die Eigenschaften color und content im folgenden Selektor:

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

Beitragslisten

Abhängig vom Design erscheinen Beitragslisten auf der Homepage, den Ausgangsseiten für Kategorien und den Ausgangsseiten für Abschnitte.

Zurück zum Inhaltsverzeichnis

Ändern des Abstands um Beitragslisten herum

Ändern Sie den folgenden Selektor und die Eigenschaften padding (bzw. fügen Sie sie hinzu):

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Ändern des Abstands zwischen den Beiträgen

Ändern Sie die Eigenschaft margin-bottom im folgenden Selektor:

.article-list > li {
  margin-bottom: 10px;
}

Ändern des Erscheinungsbilds der Beitragslinks

Ändern Sie die Texteigenschaften im folgenden Selektor (bzw. fügen Sie sie hinzu):

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Ändern der Farbe der Beitragslinks

Fügen Sie den folgenden Selektor und die folgende Eigenschaft hinzu:

.article-list li a {
  color: #FFF;
}

Beiträge in der Wissensdatenbank

Sie können das Erscheinungsbild der Beiträge in der Wissensdatenbank ändern.

Zurück zum Inhaltsverzeichnis

Ändern des Erscheinungsbilds von Beitragstiteln

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

Ändern des Erscheinungsbilds von Beitragstext

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Ändern der Farbe der Beitragslinks

Ändern Sie den folgenden Selektor und die folgende Eigenschaft (bzw. fügen Sie sie hinzu):

.article-body a {
  color: #930;
}

Ändern des Erscheinungsbilds des Autorennamens

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

Ändern des Erscheinungsbilds der Zeichenfolge „Zuletzt aktualisiert am“

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

Ändern des Erscheinungsbilds von „War dieser Beitrag hilfreich?“

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Ändern des Erscheinungsbilds des Stimmenzählers

Beispiel: „6 von 8 fanden dies hilfreich.“ Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

Ändern des Erscheinungsbilds von „Haben Sie Fragen? Anfrage einreichen.“

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

Ändern des Erscheinungsbilds des Kommentartitels

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

Ändern des Erscheinungsbilds des Kommentartexts

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

Fragen und Antworten in der Community

Sie können das Erscheinungsbild der Inhalte Ihrer Community anpassen.

Zurück zum Inhaltsverzeichnis

Ändern des Erscheinungsbilds der Fragentitel

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

Ändern des Erscheinungsbilds des Fragentexts

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Ändern der Farbe der Fragenlinks

Ändern Sie den folgenden Selektor und die folgende Eigenschaft (bzw. fügen Sie sie hinzu):

.question-text a {
  color: #484;
}

Ändern des Erscheinungsbilds des Namens des Autors der Frage

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern Sie den folgenden Selektor und die folgende Eigenschaft (bzw. fügen Sie sie hinzu), um die Farbe des Links zu ändern:

.question-author a {
  color: #484;
}

Da der Name des Autors der Frage, die Zeit seit der Veröffentlichung der Frage und der Link zum Teilen der Frage normalerweise zusammen auf einer Seite erscheinen, ist es sinnvoll, dass alle drei Elemente das gleiche Erscheinungsbild aufweisen. Verwenden Sie zu diesem Zweck den folgenden kombinierten Selektor:

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern des Erscheinungsbilds der Zeit seit Veröffentlichung

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern des Erscheinungsbilds des Links zum Teilen der Frage

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern des Erscheinungsbilds der Antwortüberschrift

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

Ändern des Erscheinungsbilds des Antworttexts

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

Ändern des Erscheinungsbilds des Namens des Autors der Antwort

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern Sie den folgenden Selektor und die folgende Eigenschaft (bzw. fügen Sie sie hinzu), um die Farbe des Links zu ändern:

.answer-author a {
  color: #484;
}

Da der Name des Autors der Antwort, die Zeit seit der Veröffentlichung der Antwort und der Link zum Teilen der Antwort normalerweise zusammen auf einer Seite erscheinen, ist es sinnvoll, dass alle drei Elemente das gleiche Erscheinungsbild aufweisen. Verwenden Sie zu diesem Zweck den folgenden kombinierten Selektor:

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern des Erscheinungsbilds der Zeit seit Veröffentlichung der Antwort

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Ändern des Erscheinungsbilds des Links zum Teilen der Antwort

Ändern Sie den folgenden Selektor und die folgenden Eigenschaften (bzw. fügen Sie sie hinzu):

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}