Ja, diese Möglichkeit gibt es. LamaPoll bietet Ihnen verschiedene Optionen, um ein Stern-Rating nach Belieben farbig anzupassen. Dies geht entweder über das Farben-Menü des Fragebogens oder über CSS-Codes. Im Folgenden stellen wir Ihnen drei Varianten vor.
1.) Sterne über „Farben“ anpassen
Um ein Stern-Rating einheitlich einzufärben, können Sie die Füllfarbe der Bedienelemente im Menüpunkt „Farben“ anpassen.
Klicken Sie dazu einfach in den hier grau hinterlegten Bereich (siehe Abbildung 1), wählen anschließend eine geeignete Farbe bzw. nutzen einen konkreten Farbcode und speichern ab. Das Resultat: Sämtliche Sterne erhalten zunächst einen Rand in der gewählten Farbe. Sobald Sie über die Sterne hovern oder diese anklicken, werden sie komplett mit der entsprechenden Farbe gefüllt (siehe Abbildung 2).
Beachten Sie: Wenn Sie die Füllfarbe der Bedienelemente auf diese Weise anpassen, werden nicht nur alle Stern-Ratings des gesamten Fragebogens geändert, sondern auch weitere Bedienelemente. Dazu gehören z. B. sämtliche Auswahlfelder oder Schieberegler.
2.) Sterne per CSS-Code anpassen
Die Nutzung von CSS-Codes im Bereich „CSS“ ermöglicht es Ihnen, Stern-Ratings gezielt anzupassen. Das hat nicht nur den Vorteil, dass andere Bedienelemente unberührt bleiben, sondern ermöglicht zudem Farbanpassungen für einzelne Sterne innerhalb des Ratings.
2.1. Einfarbiges Stern-Rating
Um ein einfarbiges Stern-Rating einzubinden, nutzen Sie den nachfolgenden CSS-Code:
.poll .poll-page .scale-question.stars .star:before {
font-size:2.5em;
color:#ffea00 !important
}In unserem Beispiel (siehe Abbildung 3) haben wir zudem einen Code zum Vergrößern der Sterne eingebunden. Wollen Sie dies nicht, dann entfernen Sie „font-size:2.5em;“ aus dem Code oder verändern die Zahl der font-size nach Wunsch. Um die Farbe der Sterne anzupassen, ändern Sie einfach den Farbcode hinter „color“.
Dieser CSS-Code färbt sämtliche Stern-Ratings Ihrer Umfrage ein. Wollen Sie hingegen eine konkrete Frage mit Stern-Rating einfärben, müssen Sie die Fragen-ID innerhalb des Codes ergänzen.
.poll #question_NUMMER/ID .scale-question.stars .star:before {
font-size:2.5em;
color:#ffea00 !important
}Die Fragen-ID entnehmen Sie nach einem Klick auf „Frage bearbeiten“. Ersetzen Sie den Part „NUMMER/ID“ des CSS-Codes mit der entsprechenden Fragen-ID und speichern Sie ab. Nutzen Sie gerne unsere genaue Anleitung zur Anpassung einzelner Fragen mit individuellen CSS-Befehlen: Einzelne Fragen individuell mit CSS-Codes anpassen
2.2. Stern-Rating mit Farbverlauf
Neben einfarbigen Stern-Ratings gibt es auch die Möglichkeit, einen Farbverlauf wie bei einer Ampel darzustellen. Der Farbverlauf wird deutlich, sobald Sie über die einzelnen Sterne hovern oder diese anklicken (siehe Abbildung 4).
Verwenden Sie hierfür den nachfolgenden CSS-Code:
.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
}Das hier beispielhaft hinterlegte Farbschema lässt sich natürlich individuell anpassen. Ändern Sie dazu die Farbcodes des CSS-Befehls.
Wie auch beim Beispiel des einfarbigen Stern-Ratings wirkt sich der CSS-Code für den Farbverlauf auf alle Stern-Ratings innerhalb des Fragebogens aus. Soll sich der Code nur auf eine bestimmte Frage beziehen, benötigen Sie erneut die Fragen-ID, die Sie überall einsetzen, wo die „Nummer/ID“ auftaucht:
.poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(1).selected:before, .poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(1).active:before {
color:#b22222 !important
}
.poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(2).selected:before, .poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(2).active:before {
color:#dc143c !important
}
.poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(3).selected:before, .poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(3).active:before {
color:#ff4500 !important
}
.poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(4).selected:before, .poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(4).active:before {
color:#ffd700 !important
}
.poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(5).selected:before, .poll #question_NUMMER/ID .scale-question.stars .star-icons i:nth-child(5).active:before {
color:#32cd32 !important
}Übrigens: Beide CSS-Befehle für Stern-Ratings mit Farbverlauf färben fünf Sterne ein. Das erkennen Sie jeweils an den Code-Parts „i:nth-child(1)“ usw. Um mehr als fünf farbige Sterne darzustellen, kopieren Sie sich einfach einen Code-Block und passen die entsprechende Zahl innerhalb der Klammern fortlaufend an. Um einen sechsten Stern einzufärben, ergänzen Sie somit:
.thV5 .scale-question.stars .star-icons i:nth-child(6).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(6).active:before {
color:#32cd32 !important
}Für weitere praktische CSS-Codes schauen Sie gern in unserem Helpdesk vorbei: Design-Funktionen CSS-Befehle