{"id":16938,"date":"2025-05-16T11:27:22","date_gmt":"2025-05-16T09:27:22","guid":{"rendered":"https:\/\/www.lamapoll.de\/blog\/?p=16938"},"modified":"2025-05-16T06:27:50","modified_gmt":"2025-05-16T04:27:50","slug":"einzelne-fragen-individuell-mit-css-codes-anpassen","status":"publish","type":"post","link":"https:\/\/www.lamapoll.de\/blog\/einzelne-fragen-individuell-mit-css-codes-anpassen\/","title":{"rendered":"Kann man einzelne Fragen individuell mit CSS-Codes anpassen?"},"content":{"rendered":"\n

Ja, einzelne Fragen lassen sich per CSS-Code individuell anpassen. Daf\u00fcr ben\u00f6tigen Sie zun\u00e4chst einmal die Fragen-ID der Frage, die mit einem CSS-Code versehen werden soll. Um die entsprechende ID innerhalb Ihrer LamaPoll<\/a>-Umfrage zu finden, nutzen Sie die Option „Frage bearbeiten“, die mit einem Bleistift-Symbol gekennzeichnet ist. Nach einem Klick auf „Frage bearbeiten“ \u00f6ffnet sich ein Fenster, dem Sie die ID entnehmen k\u00f6nnen (siehe Abbildung 1).<\/p>\n\n\n\n

\"\"<\/a>
Abb. 1 – Die Frage-ID k\u00f6nnen Sie nach einem Klick auf „Frage bearbeiten“ entnehmen. <\/em><\/figcaption><\/figure>\n\n\n\n

Im n\u00e4chsten Schritt brauchen Sie zum einen den CSS-Code, den Sie f\u00fcr die Anpassung Ihrer Frage nutzen wollen und zum anderen einen Code, der die Fragen-ID enth\u00e4lt. Letzterer sieht folgenderma\u00dfen aus:<\/p>\n\n\n\n

.poll #question_NUMMER\/ID   <\/code><\/pre>\n\n\n\n
Ersetzen Sie die „NUMMER\/ID“ mit der Frage-ID, die Sie kopiert haben. In unserem Beispiel h\u00e4tten Sie dann den folgenden Code:<\/p>\n\n\n\n
.poll #question_25373568<\/code><\/pre>\n\n\n\n
Diesen Befehl kombinieren Sie anschlie\u00dfend mit dem CSS-Code Ihrer Wahl. Eine \u00dcbersicht \u00fcber s\u00e4mtliche Design-Funktionen finden Sie \u00fcbrigens in unserem Helpdesk: Design-Funktionen CSS-Befehle<\/a> <\/p>\n\n\n\n
Ein Beispiel, wie eine einzelne Frage per CSS-Code inkl. Fragen-ID angepasst werden kann<\/strong>: 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.<\/p>\n\n\n\n
.poll #question_25373568 .scale-question.stars .star:before {\nfont-size:1.25em;\ncolor:#ffea00 !important\n}<\/code><\/pre>\n\n\n\n
Kopieren Sie den Code in den Men\u00fcpunkt „CSS“ und speichern anschlie\u00dfend ab (siehe Abbildung 2). <\/p>\n\n\n\n
\"\"<\/a>
Abbildung 2 – Hinterlegen Sie den CSS-Code mit der Fragen-ID. Speichern nicht vergessen!<\/em><\/figcaption><\/figure>\n\n\n\n
Die Bewertungsfrage mit Sternerating, deren Frage-ID im CSS-Code enthalten ist, wird nun wie gew\u00fcnscht angezeigt (siehe Abbildung 3).<\/p>\n\n\n\n
\"\"<\/a>
Abb. 3 – Im direkten Vergleich: Frage 9 enth\u00e4lt den individuellen CSS-Code f\u00fcr gelbe Sterne und Frage 10 nicht. <\/em><\/figcaption><\/figure>\n\n\n\n
Nat\u00fcrlich k\u00f6nnen Sie dieses Vorgehen auf diverse CSS-Befehle \u00fcbertragen und so zum Beispiel bestimmte Fragen mittig ausrichten. Entscheidend ist immer, dass Sie den Code f\u00fcr die Fragen-ID \u00fcberall und an jeder Stelle einbinden, wo der CSS-Code mit „.poll“ beginnt. 
F\u00fcr eine konkrete Bewertungsfrage, die Sie mit eckigen Buttons und unterschiedlichen Farben versehen wollen (siehe Abbildung 4), w\u00fcrde der Code dann wie folgt aussehen:<\/p>\n\n\n\n
.poll #question_NUMMER\/ID .scale-question .radiobutton {\nfont-size:1.5em !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton label:before {\nborder-radius:0.25em !important;\nborder-color:#aaa !important;\nborder-bottom-width:3px\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton input:checked + label:before {\nbackground:#fff !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton input:checked + label:after {\ncolor:#333 !important;\ntext-shadow:none !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton:nth-child(1) label:before {\nborder-bottom-color:#FF0000 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton:nth-child(2) label:before {\nborder-bottom-color:#fc9f26 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton:nth-child(3) label:before {\nborder-bottom-color:#f7ff00 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton:nth-child(4) label:before {\nborder-bottom-color:#afedaf !important\n}\n\n.poll #question_NUMMER\/ID .scale-question .radiobutton:nth-child(5) label:before {\nborder-bottom-color:#0bba2b !important\n}\n\n.poll #question_NUMMER\/ID .scale-question.radios .custom-label-lower-left .bubble {\ncolor:#b22222 !important;\nborder:0;\nbackground:transparent;\nbox-shadow:none !important;\nfont-weight:700\n}\n\n.poll #question_NUMMER\/ID .scale-question.radios .custom-label-lower-right .bubble {\ncolor:#32cd32 !important;\nborder:0;\nbackground:transparent;\nbox-shadow:none !important;\nfont-weight:700\n}\n\n.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 {\ndisplay:none\n}<\/code><\/pre>\n\n\n\n
\"\"<\/a>
Abb. 4 – Eine Bewertungsfrage mit farbig hinterlegten, eckigen Buttons.<\/em><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Ja, einzelne Fragen lassen sich per CSS-Code individuell anpassen. Daf\u00fcr ben\u00f6tigen Sie zun\u00e4chst 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“ \u00f6ffnet sich ein […]<\/p>\n","protected":false},"author":1,"featured_media":1434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,156],"tags":[2412,2415,2489,2454],"class_list":["post-16938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-feedbackmanagement","category-frage-der-woche","tag-css-befehl-fuer-einzelne-frage","tag-css-befehl-fuer-nur-eine-frage","tag-darstellung-einzelner-fragen-aendern","tag-design-anpassungen-mit-css"],"_links":{"self":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/16938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/comments?post=16938"}],"version-history":[{"count":24,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/16938\/revisions"}],"predecessor-version":[{"id":19256,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/16938\/revisions\/19256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media\/1434"}],"wp:attachment":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media?parent=16938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/categories?post=16938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/tags?post=16938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}