CSS für Survey-Anpassung verwenden
- 08 Nov 2024
- 3 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
CSS für Survey-Anpassung verwenden
- Aktualisiert am 08 Nov 2024
- 3 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
Die Codeansicht ermöglicht den Zugriff auf den CSS-Code der Survey-Vorlage. Verwenden Sie die Code-Ansicht für detaillierte visuelle Optimierungen, die mit den UI-Optionen nicht möglich sind. Die Code-Ansicht ist für jede von Ihnen ausgewählte Survey Vorlage verfügbar.
Your title goes here
Der CSS-Code für Surveys kann nicht gelöscht werden; er kann nur geändert oder mit einem neuen Code hinzugefügt werden. Wenn das aktuelle CSS gelöscht wird, wird es von den Standardeinstellungen für CSS überschrieben.
Bevor Sie Ihre Vorlage anpassen, als beste Methode, erstellen Sie eine Sicherungskopie des Codes. Dies verhindert einen unerwarteten Verlust von Inhalten.
Zugriff auf die Detailansicht des Codes der Vorlage
Zugriff auf die Code-Ansicht der Vorlage
Verwenden Sie die folgenden Schritte, um auf die Code-Ansicht der Survey-Vorlage zuzugreifen:
Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "image(322).png")
Klicken Sie Surveys.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "image(323).png")
Schweben Sie den Mauscursor über das Survey, das Sie benutzerdefiniert gestalten möchten, und klicken Sie dann auf das Symbol Bearbeiten.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "image(324).png")
Klicken Sie oben rechts in der Ecke auf das Symbol Codeansicht.
Your title goes here
Verwenden Sie die folgenden Schritte, um den HTML-Klassennamen des Elements zu finden, das Sie bearbeiten möchten:
Klicken Sie mit der rechten Maustaste auf das Element, das Sie bearbeiten möchten, und klicken Sie auf Untersuchen.
Im Elemente-Panel, suchen Sie das Element und kopieren Sie seinen Klassennamen.
Um diesen Klassennamen im Code-Ansicht zu finden, öffnen Sie die Suchleiste, indem Sie
Ctrl + F(unter Windows) oderCmd + F(unter Mac) drücken.
Nachdem Sie den Code bearbeitet haben, klicken Sie auf Run, um eine Vorschau der Änderungen anzuzeigen.
Your title goes here
Wenn Sie auf Zurücksetzen klicken, werden alle nicht gespeicherten Änderungen verworfen, und der Code wird auf seinen letzten gespeicherten Zustand zurückgesetzt.
Klicken Sie Speichern, um die Änderungen zu speichern.
Anwendungsfälle
Die Größe der Survey-Vorlage ändern
Um die Größe der Survey zu ändern, gehen Sie zur Codeansicht, suchen Sie die CSS-Klasse .survey-iframe-Container und passen Sie die Breite und Höhe an.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "ChangeSurveysize(2).png")
Zum Beispiel legt der folgende CSS-Code die Höhe und Breite des Surveys auf 500px fest:
.survey-iframe-container {
width: 500px;
height: 500px;
}Des Schriftstils ändern
Um den Schriftstil für alle Textelemente im Survey zu ändern, gehen Sie zur Codeansicht und suchen Sie den *-Selektor.
Your title goes here
Die Stile, die mit dem Universellen Selektor (
*) angewendet werden, beeinflussen alle Textelemente im gesamten Survey. Das bedeutet, dass alle Überschriften, Absätze, Buttons und anderer Text in der angegebenen Schriftart angezeigt werden. Wenn Sie die Schriftart für bestimmte Elemente anpassen möchten, tun Sie dies, indem Sie diese speziellen Elemente (zum Beispiel,h1,p,Button) im CSS-Code ansprechen.
Zum Beispiel ändert der folgende CSS-Code den Schriftstil aller Textelemente von ‚Inter, sans-serif‘ zu ‚Georgia, serif‘:
* {
font-family: 'Georgia', serif; /* Changed from 'Inter' to 'Arial' */
}Des Absenden Button anpassen
Um den Submit-Button anzupassen, wechseln Sie zur Codeansicht, suchen Sie die CSS-Klasse .button-root und ändern Sie Höhe, Breite und Radius der Ecken.
Zum Beispiel legt der folgende CSS-Code die Höhe auf 50px, die Breite auf 120px und den Border-Radius auf 10px fest:
.button-root {
width: 120px;
height: 50px;
border-radius: 10px;
}Die Survey-Hintergrundfarbe anspassen
Um die Hintergrundfarbe der Survey anzupassen, gehen Sie zur Codeansicht, suchen Sie den CSS-Selektor .survey-container .content-container und ändern Sie den Hintergrund.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "Surveybackground (1).png")
Zum Beispiel ändert der folgende CSS-Code die Hintergrundfarbe von grau (#f6f6f9) zu weiß (#ffffff):
.survey-container .content-container {
overscroll-behavior: contain;
overflow-y: auto;
padding: 16px 24px;
background: #ffffff;
flex-basis: 70%;
flex-grow: 1;
height: 100%;
}Größe der Survey Überschrift ändern
Um die Größe der Survey-Überschrift zu ändern, gehen Sie zur Codeansicht, suchen Sie die CSS-Klasse .header und passen Sie die min-height an.
.png?sv=2022-11-02&spr=https&st=2024-11-22T18%3A07%3A30Z&se=2024-11-22T18%3A17%3A30Z&sr=c&sp=r&sig=DPBBAJ0xoiFsHQOifx0orqTG%2BvvKrhJA1bMMPtxblq0%3D "Survey_header(1).png")
Zum Beispiel reduziert der folgende CSS-Code die minimale Höhe des Surveys von 92px auf 75px:
.header {
width: 100%;
height: auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: #ffffff;
padding: 12px 24px;
border-radius: 5px 5px 0px 0px;
min-height: 75px;
background-color: #C74900;
color: #ffffff;
}War dieser Artikel hilfreich?