| Suite | Growth, Professional, Enterprise oder Enterprise Plus |
| Support mit | Guide Professional oder Enterprise |
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.
Weitere Informationen zur Bearbeitung des CSS 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
- Ändern der Hintergrundfarbe von Kopf- und Fußbereich
- Ändern der Höhe von Kopf- und Fußbereich
- Ändern des Abstands über oder unter dem Kopf- und Fußbereich
- Ändern des Erscheinungsbilds der gewählten Sprache
- Ändern des Erscheinungsbilds des Links „Anfrage einreichen“
- Ausblenden des Links „Anfrage einreichen“
- Ändern des Erscheinungsbilds des Links „Anmelden“
- Ändern der Logoabmessungen
Suche
- Ändern der Höhe oder Breite des Suchfelds
- Ändern der Hintergrundfarbe des Suchfelds
- Ändern des Erscheinungsbilds des Suchtexts
- Ändern des Erscheinungsbilds der Überschrift der Ergebnisseite
- Ändern des Erscheinungsbilds der hervorgehobenen Schlüsselwörter in Suchergebnissen
- Ändern des Erscheinungsbilds der Überschriften von Wissensdatenbank und Community
- Ändern des Abstands zwischen den Ergebnissen
- Ändern des Erscheinungsbilds des Ergebnistexts
- Ändern der Farbe der Ergebnislinks
Brotkrümel
Beitragslisten
Beiträge in der Wissensdatenbank
- Ändern des Erscheinungsbilds von Beitragstiteln
- Ändern des Erscheinungsbilds von Beitragstext
- Ändern der Farbe der Beitragslinks
- Ändern des Erscheinungsbilds des Autorennamens
- Ändern des Erscheinungsbilds der Zeichenfolge „Zuletzt aktualisiert am“
- Ändern des Erscheinungsbilds von „War dieser Beitrag hilfreich?“
- Ändern des Erscheinungsbilds des Stimmenzählers
- Ändern des Erscheinungsbilds von „Haben Sie Fragen? Anfrage einreichen.“
- Ändern des Erscheinungsbilds des Kommentartitels
- Ändern des Erscheinungsbilds des Kommentartexts
Fragen und Antworten in der Community
- Ändern des Erscheinungsbilds der Fragentitel
- Ändern des Erscheinungsbilds des Fragentexts
- Ändern der Farbe der Fragenlinks
- Ändern des Erscheinungsbilds des Namens des Autors der Frage
- Ändern des Erscheinungsbilds der Zeit seit Veröffentlichung
- Ändern des Erscheinungsbilds des Links zum Teilen der Frage
- Ändern des Erscheinungsbilds der Antwortüberschrift
- Ändern des Erscheinungsbilds des Antworttexts
- Ändern des Erscheinungsbilds des Namens des Autors der Antwort
- Ändern des Erscheinungsbilds der Zeit seit Veröffentlichung der Antwort
- Ändern des Erscheinungsbilds des Links zum Teilen der Antwort
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.
So ändern Sie die Logogröße
- Klicken Sie in der Seitenleiste von Wissensadministrator 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;
}
0 Kommentare
Melden Sie sich an, um einen Kommentar zu hinterlassen.