Ja, einzelne Fragen lassen sich per CSS-Code individuell anpassen. Dafür benötigen Sie zunächst einmal die Fragen-ID der Frage, die mit einem CSS-Code versehen werden soll. Um die entsprechende ID innerhalb Ihrer LamaPoll-Umfrage zu finden, nutzen Sie die Option „Frage bearbeiten“, die mit einem Bleistift-Symbol gekennzeichnet ist. Nach einem Klick auf „Frage bearbeiten“ öffnet sich ein Fenster, dem Sie die ID entnehmen können (siehe Abbildung 1).
Im nächsten Schritt brauchen Sie zum einen den CSS-Code, den Sie für die Anpassung Ihrer Frage nutzen wollen und zum anderen einen Code, der die Fragen-ID enthält. Letzterer sieht folgendermaßen aus:
.poll #question_NUMMER/ID Ersetzen Sie die „NUMMER/ID“ mit der Frage-ID, die Sie kopiert haben. In unserem Beispiel hätten Sie dann den folgenden Code:
.poll #question_25373568Diesen Befehl kombinieren Sie anschließend mit dem CSS-Code Ihrer Wahl. Eine Übersicht über sämtliche Design-Funktionen finden Sie übrigens in unserem Helpdesk: Design-Funktionen CSS-Befehle
Ein Beispiel, wie eine einzelne Frage per CSS-Code inkl. Fragen-ID angepasst werden kann: Zur Verdeutlichung wollen wir nun eine konkrete Bewertungsfrage mit Sternerating mittels CSS so anpassen, dass die Sterne eine „font-size“ von 1.25 haben und statt blau jetzt gelb hinterlegt sind. Wichtig ist, dass Sie den Code mit der Fragen-ID inkludieren. Lassen Sie diesen weg, wird jede Bewertungsfrage mit Sternerating innerhalb Ihrer Umfrage im neuen Design angezeigt.
.poll #question_25373568 .scale-question.stars .star:before {
font-size:1.25em;
color:#ffea00 !important
}Kopieren Sie den Code in den Menüpunkt „CSS“ und speichern anschließend ab (siehe Abbildung 2).
Die Bewertungsfrage mit Sternerating, deren Frage-ID im CSS-Code enthalten ist, wird nun wie gewünscht angezeigt (siehe Abbildung 3).
Natürlich können Sie dieses Vorgehen auf diverse CSS-Befehle übertragen und so zum Beispiel bestimmte Fragen mittig ausrichten. Entscheidend ist immer, dass Sie den Code für die Fragen-ID überall und an jeder Stelle einbinden, wo der CSS-Code mit „.poll“ beginnt.
Für eine konkrete Bewertungsfrage, die Sie mit eckigen Buttons und unterschiedlichen Farben versehen wollen (siehe Abbildung 4), würde der Code dann wie folgt aussehen:
.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
}