Design-Funktionen: CSS-Befehle

Mittels CSS (Cascading Style Sheets) können Sie Ihren Online-Fragebogen nahezu unbegrenzt anpassen. LamaPoll bietet speziell dafür einen CSS-Menüpunkt innerhalb jeder Umfrage. Sie möchten Stern-Ratings vergrößern, Weiter-Buttons gezielt entfernen oder bestimmte Spalten einer Matrixfrage färben?

Hier finden Sie unsere Sammlung von CSS-Anweisungen:

• CSS-Befehle im Fragebogen hinterlegen
• a) CSS-Befehle für die gesamte Umfrage
• b) CSS-Befehle für einzelne Elemente
• CSS-Code-Sammlung: Liste von Beispielen für Ihren Fragebogen
• Globale Ausrichtung der Texte
• Weiter/Zurück/Beenden-Buttons anpassen
• Schriftart und Schriftgröße anpassen
• Zwei Fragen nebeneinander darstellen
• Anpassungen für Eingabefragen und Textblöcke
• Anpassungen für Auswahlfragen
• Anpassungen für Bewertungsfragen
• Anpassungen für Matrixfragen
• Anpassungen für Pflichtfragen
• Anpassungen für den "Später-fortsetzen"-Link
• Anpassungen für den Druck-Button
• Zeilenabstand für Fragentexte in der mobilen Ansicht anpassen

1. CSS-Befehle im Fragebogen hinterlegen

Damit Sie Ihre Umfrage auf Wunsch noch weiter individualisieren können, gibt es bei LamaPoll den Menüpunkt "CSS". Der Bereich befindet sich ganz oben unter "Erstellen" > "Inhalt & Layout". Klicken Sie auf den entsprechenden Menüpunkt und nutzen anschließend das Fenster, um einen Code einzugeben und abschließend zu speichern (siehe Abbildung 1). 

Abb. 1 - Klicken Sie auf das CSS-Menü, um CSS-Codes in das entsprechende Fenster zu kopieren.

Alle über den Menüpunkt eingebundenen Codes gelten automatisch für die gesamte Umfrage. Alternativ gibt es auch die Möglichkeit, CSS-Befehle gezielt für einzelne Fragen zu verwenden. 

a) CSS-Befehle für die gesamte Umfrage

Alle CSS-Codes, die Sie wie in Abbildung 1 über den Menüpunkt "CSS" einbinden, werden automatisch auf die komplette Umfrage angewandt. Wenn Sie beispielsweise die Größe der Sterne eines Sterne-Ratings per CSS anpassen, greift diese Änderung für sämtliche Stern-Ratings innerhalb Ihrer Umfrage. 

b) CSS-Befehle für einzelne Elemente

Damit sich ein CSS-Code nur auf ein Frageelement und nicht auf die gesamte Umfrage beschränkt, benötigen Sie zuerst die entsprechende Fragen-ID. Dazu navigieren Sie innerhalb des Fragebogens zum Element Ihrer Wahl und klicken auf das Bleistift-Symbol zu "Frage bearbeiten". Nachdem sich das Fenster geöffnet hat, sehen Sie direkt oben in der Überschrift eine Zahlenfolge – das ist die Fragen-ID (siehe Abbildung 2). Kopieren Sie sich die Zahlenfolge.

Abb. 2 - Öffnen Sie das Frageelement Ihrer Wahl über "Frage bearbeiten" und entnehmen die Frage-ID ganz oben in der Überschrift. 

Anschließend benötigen Sie einen Code, der diese Fragen- ID enthält. Dieser sieht zunächst so aus: 

.poll #question_NUMMER/ID   

Ersetzen Sie den Part "NUMMER/ID" nun mit der kopierten ID aus Ihrem Fragenelement.

Für das Beispiel aus Abbildung 2 hätten Sie nun folgenden Code: .poll #question_31643850

Kombinieren Sie diesen Code nun mit einem CSS-Befehl, kopieren dies anschließend in den CSS-Menüpunkt und speichern Sie ab.

Wichtig: Der Code mit der Fragen-ID (.poll #question_NUMMER/ID) muss überall da eingebaut werden, wo ein CSS-Befehl mit ".poll" startet. 

Weitere Anwendungsbeispiele für CSS-Codes für individuelle Fragen finden Sie hier: Einzelne Fragen mit CSS-Codes anpassen

2. CSS-Code-Sammlung: Beispiele für Ihren Fragebogen

Achten Sie beim Kopieren von CSS-Befehlen immer auf alle Zeichen und auch Leerzeichen: CSS-Befehle beginnen in den meisten Fällen mit einem Punkt ".".

2.1 Globale Ausrichtung der Texte

Globale Styles wirken sich automatisch auf die gesamte Umfrage aus. 

2.1.1 Umfrage zentrieren bzw. alle Texte mittig ausrichten

.poll * {text-align:center !important;margin:auto}

2.1.2 Alle Texte rechtsbündig ausrichten

.poll{ text-align:right!important; }

Abb. 3 - Beispiel einer Bewertungsfrage mit rechtsbündig ausgerichteten Texten

2.2 Weiter/Zurück/Beenden-Buttons anpassen

CSS-Einstellungen für die Buttons können entweder auf allen Seiten, bestimmten Seiten oder nur auf der letzten Seite vorgenommen werden.

2.2.1 Beenden-Button auf der letzten Seite entfernen

.poll .poll-page #formbuttons .right #lp-finish-button {display:none!important}

2.2.2 Weiter-Button auf allen Seiten entfernen

.poll .poll-page #formbuttons .right #lp-next-button {display:none!important}

2.2.3 Weiter-Button auf einer bestimmten Seite entfernen

.poll .poll-page-2 #formbuttons .right #lp-next-button {

display:none !important

}

Die "2" markiert hier beispielhaft die zweite Seite. Tauschen Sie die Seitenzahl mit der entsprechenden Seitenzahl innerhalb Ihres Fragebogens aus.

2.2.4 Zurück-Button auf allen Seiten entfernen

#formbuttons .left .button{ display:none!important }

2.2.5 Buttons verkleinern und vergrößern

#formbuttons .button {font-size:.8em}

Ändern Sie die "font-size", um die Größe der Buttons anzupassen.

2.3. Schriftart und Schriftgröße anpassen

Sie können die Schriftart Ihres Fragebogens über "Design" > "Schriftart" global anpassen. Für individuelle Änderungen nutzen Sie die nachfolgenden CSS-Codes.

2.3.1 Seitenüberschriften ändern

.poll .poll-page .page-title {font-size:20pt;font-family:arial}

2.3.2 Fragentexte ändern

.poll .poll-page .question-text-container .question-text {font-size:20pt;font-family:arial}

2.3.3 Antworten ändern

.poll .choice-option {font-size:20pt;font-family:arial}

2.3.4 Ihre Hausschrift für den gesamten Fragebogen verwenden

.poll, .poll * {font-family:'Times New Roman' !important}

Sie können Ihre Hausschrift (oder jede andere beliebige Schriftart) für Ihre Fragebögen verwenden. Bitte beachten Sie: Falls Umfrageteilnehmer diese Hausschrift nicht installiert haben, kann sie auch nicht dargestellt werden. Ihre Hausschrift können wir auf Wunsch gern im Tool integrieren, sofern diese noch nicht vorhanden ist. Wenden Sie sich dafür gerne an unseren Support.

2.4. Zwei Fragen nebeneinander darstellen

Damit Sie zwei Fragen nebeneinander darstellen können (siehe Abbildung 4), benötigen Sie die jeweiligen Fragen-IDs. Ersetzen Sie die IDs innerhalb des Codes. 

#
pageitem_Fragen-ID1, #pageitem_FragenID2 {
display:inline-block;
width:49%;
vertical-align:top
}

Abb. 4 - Zwei Auswahlfragen, die beispielhaft nebeneinander dargestellt werden

2.5. Anpassungen für Eingabefragen und Textblöcke

2.5.1 Eingabefrage: Feld für Texteingaben größer oder kleiner darstellen 

.poll .inputfield div:first-child {width:50% !important}

.poll .poll-page .inputfield .input-wrapper {width:5em !important}

Ändern Sie die Angabe "width", um den Textbereich zu vergrößern oder zu verkürzen.

Abb. 5 - Eingabefrage mit verkürztem Feld für Texteingaben (width sind hier 50%)

2.5.2 Eingabefrage: Pfeile aus der Zahlenfrage entfernen

.poll .spinbox .spinbox-button {display:none}

Die Zahleneingabe-Ffrage finden Sie bei den Spezialfragen innerhalb des Tools. 

2.5.3 Textblöcke: Zeilenhöhe ändern

Dazu muss der Befehl "line-height: 2.5" direkt im Quellcode über die spitzen Klammern des Textelements ergänzt werden (siehe Gif). Die Höhe von "2.5" ist hier nur ein Beispiel und kann beliebig vergrößert oder verkleinert werden.  Eine genaue Anleitung dazu finden Sie hier: Zeilenhöhe bei Textelementen anpassen

Gif - Die Zeilenhöhe lässt sich direkt im Quellcode des Textelements anpassen.

2.6. Anpassungen für Auswahlfragen

2.6.1 Auswahlfrage: Eingabefeld breiter machen oder verkürzen 

.poll .choice-question .choice-inputfield {
width:50% !important
}

Ändern Sie die Prozentangabe nach "width:", um das Eingabefeld zu vergrößern oder zu verkürzen.

Abb. 6 - Ein um 50% verkürztes Eingabefeld bei einer Auswahfrage.

2.6.2 Einzelne Auswahlfrage: Eingabefeld breiter machen oder verkürzen

.poll #question_NUMMER/ID .choice-inputfield {
width:50% !important
}

Für diesen Code bitte die Fragen-ID aus dem Dialogfenster bei "Frage bearbeiten" kopieren und an entsprechender Stelle im Code ersetzen. Um das Eingabefeld bei der entsprechenden Auswahlfrage zu verbreitern oder zu verkürzen, ändern Sie einfach die Prozentangabe nach "width:".

2.7. Anpassungen für Bewertungsfragen

2.7.1 Bewertungsfrage: Radiobuttons einfärben 

Abb. 7: Bewertungsfrage mit farbigen Radio-Buttons

#question_NUMMER/ID .scale .radiobutton label {

width:2.4em;

height:2.4em

}

#question_NUMMER/ID .scale .radiobutton label:before {

border:0.5em solid;

width:2.4em;

height:2.4em

}

#question_NUMMER/ID .scale .radiobutton label:after {

top:50%;

left:50%;

color:#fff

}

#question_NUMMER/ID .scale:nth-child(3) .radiobutton:nth-child(2) label:before {

border-color:#99d5f2

}

#question_NUMMER/ID .scale:nth-child(3) .radiobutton:nth-child(3) label:before {

border-color:#91cae6

}

#question_NUMMER/ID .scale:nth-child(3) .radiobutton:nth-child(4) label:before {

border-color:#89bed9

}

#question_NUMMER/ID .scale:nth-child(3) .radiobutton:nth-child(5) label:before {

border-color:#81b3cc

}

#question_NUMMER/ID .scale:nth-child(3) .radiobutton:nth-child(6) label:before {

border-color:#79a8bf

}

#question_NUMMER/ID .scale:nth-child(5) .radiobutton:nth-child(2) label:before {

border-color:#99f2d4

}

#question_NUMMER/ID .scale:nth-child(5) .radiobutton:nth-child(3) label:before {

border-color:#91e6c9

}

#question_NUMMER/ID .scale:nth-child(5) .radiobutton:nth-child(4) label:before {

border-color:#89d9be

}

#question_NUMMER/ID .scale:nth-child(5) .radiobutton:nth-child(5) label:before {

border-color:#81ccb3

}

#question_NUMMER/ID .scale:nth-child(5) .radiobutton:nth-child(6) label:before {

border-color:#79bfa8

}

Mit diesem Code können alle Standard-Bewertungsfragen einer Umfrage eingefärbt werden. Die Farbcodes (erkennbar am #-Zeichen) können Sie ganz individuell verändern

2.7.2 Bewertungsfrage: Farbige Ampel mit eckigen Buttons

Abb. 8 - Ampel-Bewertungsfrage mit eckigen Buttons

.poll #question_NUMMER/ID .scale-question .radiobutton {

font-size:1.5em !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton label:before {

border-radius:0.25em !important;

border-color:#aaa !important;

border-bottom-width:3px

}

.poll #question_NUMMER/ID .scale-question .radiobutton input:checked + label:before {

background:#fff !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton input:checked + label:after {

color:#333 !important;

text-shadow:none !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton:nth-child(1) label:before {

border-bottom-color:#FF0000 !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton:nth-child(2) label:before {

border-bottom-color:#fc9f26 !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton:nth-child(3) label:before {

border-bottom-color:#f7ff00 !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton:nth-child(4) label:before {

border-bottom-color:#afedaf !important

}

.poll #question_NUMMER/ID .scale-question .radiobutton:nth-child(5) label:before {

border-bottom-color:#0bba2b !important

}

.poll #question_NUMMER/ID .scale-question.radios .custom-label-lower-left .bubble {

color:#b22222 !important;

border:0;

background:transparent;

box-shadow:none !important;

font-weight:700

}

.poll #question_NUMMER/ID .scale-question.radios .custom-label-lower-right .bubble {

color:#32cd32 !important;

border:0;

background:transparent;

box-shadow:none !important;

font-weight:700

}

.poll #question_NUMMER/ID .scale-question.radios .custom-label-lower-left .bubble:before, .scale-question.radios .custom-label-lower-left .bubble:after, .scale-question.radios .custom-label-lower-right .bubble:before, .scale-question.radios .custom-label-lower-right .bubble:after {

display:none

}

Mit diesem Code können Sie alle Standard-Bewertungsfragen anpassen. Die Farbcodes (erkennbar am #-Zeichen) lassen sich bei Bedarf verändern.

2.7.3 Bewertungsfrage: Schieberegler ohne Füllfarbe

Abb. 9 - Der Schieberegler lässt sich auch ohne Füllfarbe regulär verwenden.

.poll .poll-page .horizontal-slider {
box-shadow:none !important
}

.poll .poll-page .horizontal-slider.ui-widget.ui-widget-content {
border:none !important
}

.poll .poll-page .horizontal-slider .ui-slider-handle {
background:#fff !important;
border:#fff !important
}

.poll .poll-page .horizontal-slider .ui-slider-range-min {
background:#fff !important;
box-shadow:none !important
}

2.7.4 Bewertungsfrage: Stern-Rating farbig anpassen und vergrößern

.poll .poll-page .scale-question.stars .star:before { font-size:2.25em; color:#e6b8cd !important }

Alle Farbcodes (#-Zeichen) sowie die font-size können Sie nach Belieben verändern.

Abb. 10 - Beispielhaft eingefärbtes Stern-Rating mit vergrößerten Sternen

2.7.5 Bewertungsfrage: Stern-Rating mit Farbverlauf und Hover-Effekt

Gif - Stern-Rating mit Ampel-Farbverlauf und einem Hover-Effekt

.thV5 .scale-question.stars .star-icons i:nth-child(1).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(1).active:before {

color:#b22222 !important

}

.thV5 .scale-question.stars .star-icons i:nth-child(2).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(2).active:before {

color:#dc143c !important

}

.thV5 .scale-question.stars .star-icons i:nth-child(3).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(3).active:before {

color:#ff4500 !important

}

.thV5 .scale-question.stars .star-icons i:nth-child(4).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(4).active:before {

color:#ffd700 !important

}

.thV5 .scale-question.stars .star-icons i:nth-child(5).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(5).active:before {

color:#32cd32 !important

}

Sämtliche Farbcodes (#-Zeichen) lassen sich ganz individuell verändern.

2.8. Anpassungen für Matrixfragen

Alle nachfolgend verwendeten Farbcodes können individuell angepasst und individualisiert werden.  

2.8.1 Matrixfrage: Linke Matrix-Spalte (Item-Texte) verbreitern 

.poll .matrix-question .scale th:first-child { width:50% !important; }

Die jeweilige Breite können Sie über die Prozentangabe nach "width:" anpassen. 

Abb. 11 - Per CSS-Code wurde die linke Spalter einer Matrixfrage um 50 % erweitert.

2.8.2 Matrixfrage: Letzte Matrix-Spalte färben

.matrix-question .last-cell {

background:#cde3ed}

Abb. 12 - Eingefärbte letzte Spalte einer Matrixfrage

2.8.3 Matrixfrage: Alle 5 Spalten der Standard-Matrix einfärben:

Abb. 13 - Beispielhaft blau eingefärbte Standard-Matrix

.matrix-question .choice-cell:nth-child(2) {
background:#cee6f2
}
.matrix-question .col-head:nth-child(2) {
background:#cee6f2 !important
}
.matrix-question .choice-cell:nth-child(3) {
background:#cee6f2
}
.matrix-question .col-head:nth-child(3) {
background:#cee6f2 !important
}
.matrix-question .choice-cell:nth-child(4) {
background:#cee6f2
}
.matrix-question .col-head:nth-child(4) {
background:#cee6f2 !important
}
.matrix-question .choice-cell:nth-child(5) {
background:#cee6f2
}
.matrix-question .col-head:nth-child(5) {
background:#cee6f2 !important
}

.matrix-question .choice-cell:nth-child(6) {
background:#cee6f2
}
.matrix-question .col-head:nth-child(6) {
background:#cee6f2 !important
}

2.8.4 Matrixfrage: Linke Spalte komplett einfärben

.poll .poll-page .matrix-question .left-text {background:#e6b8cd!important}

Abb. 14 - Matrixfrage mit komplett eingefärbter linken Spalte

2.8.5 Matrixfrage: Ungerade Zeilen einfärben

.poll .poll-page .matrix-question tr.even-bg td {background:#e6b8cd}

Abb. 15 - Matrixfrage mit farbigen ungeraden Zeilen

2.8.6 Matrixfrage: Farbiger Hover-Effekt für gerade Zeilen

.poll .poll-page .matrix-question tr.even-bg:hover td {background:#e6b8cd}

Gif - Farbiger Hover-Effekt innerhalb einer Matrixfrage

2.8.7 Matrixfrage: Bestimmte Spalten schmaler oder breiter machen

.matrix-table .scale th:nth-child(2){width:10%;}

 .matrix-table .scale th:nth-child(3){width:10%;}

 .matrix-table .scale th:nth-child(4){width:10%;} 

Ändern Sie die "width", um die Spalten schmaler oder breiter zu machen. Außerdem: Die Zahl in den Klammern "th:nth-child(2)" gibt an, welche Spalte angesprochen wird. Verändern Sie einfach die Positionsnummer, um eine andere Spalte zu wählen ( z. B. steht die 2 für die zweite Spalte usw.).

2.8.8 Matrixfrage: Spaltenüberschriften einfärben

.poll .poll-page .matrix-question .col-head {background:#e6b8cd!important}

Abb. 16 - Matrixfrage mit eingefärbten Spaltenüberschriften

2.8.9 Matrixfrage: Matrix-Block ohne Überschrift einfärben

.matrix-question td.choice-cell {

background:#e6b8cd !important

}

Abb. 17 - Eingefärbter Matrixblock ohne farbige Überschriften

2.8.10 Matrixfrage: Matrix-Block inkl. Überschrift einfärben

.matrix-question * {

background:#e6b8cd !important

}

Abb. 18 - Komplett eingefärbte Matrixfrage

2.8.11 Matrixfrage: Matrixspalten und Antwort-Buttons mit Farbverlauf

Die farbigen Antwort-Buttons werden direkt nach dem Klick sichtbar. Es handelt sich nicht um ein Hover-Effekt. 

Abb. 19 - Matrixfrage mit Farbverlauf und farbigen Antwort-Buttons

#question_NUMMER/ID .col-head:nth-child(2), #question_31648110 .choice-cell:nth-child(2) {

background:#d9f9d9

}

#question_NUMMER/ID td.choice-cell:nth-child(2) :checked + label:before {

background:#28dd28;

border-color:#28dd28

}

#question_NUMMER/ID .col-head:nth-child(3), #question_31648110 .choice-cell:nth-child(3) {

background:#f0fbd9

}

#question_NUMMER/ID td.choice-cell:nth-child(3) :checked + label:before {

background:#bada55;

border-color:#bada55

}

#question_NUMMER/ID .col-head:nth-child(4), #question_31648110 .choice-cell:nth-child(4) {

background:#fffbe5

}

#question_NUMMER/ID td.choice-cell:nth-child(4) :checked + label:before {

background:#ffc107;

border-color:#ffc107

}

#question_NUMMER/ID .col-head:nth-child(5), #question_31648110 .choice-cell:nth-child(5) {

background:#fde5e5

}

#question_NUMMER/ID td.choice-cell:nth-child(5) :checked + label:before {

background:#f36c6c;

border-color:#f36c6c

}

#question_NUMMER/ID .col-head:nth-child(6), #question_31648110 .choice-cell:nth-child(6) {

background:#f8d9d9

}

#question_NUMMER/ID td.choice-cell:nth-child(6) :checked + label:before {

background:#dd2828;

border-color:#dd2828

}

2.9. Anpassungen für Pflichtfragen

2.9.1 Größe des Pflichtfragen-Sternchens ändern 

.poll-page .question-text-container .question-text .duty-question-title:after {

font-size:2em

}

Die "font-size" können Sie individuell anpassen.

Abb. 20 - Ein vergrößertes Pflichtfragen-Sternchen mit der font-size 4em

2.9.2 Pflichtfragen-Sternchen entfernen

.thV5 .poll-page .duty-question-title:after {
display:none !important
}

2.10. Anpassungen für den "Später fortsetzen"-Link

2.10.1 "Später fortsetzen"-Link: Textgröße und Farbe ändern 

.mobile-hide .resume-link-container .resume-link {
font-weight:700 !important;
font-size:1.5em !important;
border-color:#FFF !important;
color:#FFF !important
}

Abb. 21 - Beispiel: Vergrößerter "Später-fortsetzen"-Link mit grüner Schrift und rosa Unterstrich

Mit der "font-weight" ändern Sie die Dicke des Textes, die "font-size" ändert die Textgröße. Nutzen Sie die "border-color", um die Farbe des unterliegenden Strichs anzupassen und "color" für Anpassungen an der Textfarbe.

2.10.2 "Später-fortsetzen"-Link: Farbe ändern

div.mobile-hide .resume-link {
color:#008000 !important
}

2.11. Anpassungen für den Druck-Button: Button vergrößern

.poll .poll-page .icon-print { font-size:30px }

Vergrößern oder verkleinern Sie den Zahlenwert der "font-size" an der entsprechenden Stelle, um die Größe des Druck-Buttons anzupassen. 

2.12. Zeilenabstand für Fragentexte in der mobilen Ansicht anpassen 

@media screen and (max-width: 767px) {

.thV5 .poll-page .question-text-container h2.question-text-wrapper {

line-height:0.8

}

}

Vergrößern oder verkleinern Sie den Zahlenwert der "line-height", um den Zeilenabstand ensprechend anzupassen.

Jetzt kostenfrei starten!

Für unsere Testversion brauchen Sie lediglich eine E-Mail-Adresse und ein Passwort

nach oben