CSS Anweisungen für LamaPoll

CSS Beispiele für Ihren Fragebogen

Mittels CSS können Sie den online Fragebogen / die online Umfrage fast unbegrenzt anpassen.

CSS Code kannn entweder im Menüpunkt "CSS" eingegeben werden (dann gilt er für die gesamte Umfrage) oder in jedem einzelnen Element über den Button "Quellcode":

 

 

Flache Elemente

.poll .poll-page .progress-bar, .poll .poll-page .progress-pixel, .poll .poll-page .button, .poll .poll-page .ui-slider-range, .poll .poll-page .input-element, .poll .poll-page .ranking-option, .poll .poll-page .spinbox-button { box-shadow:none !important }

 

 

Ampel

Sie legen eine Single Choice Fage ohne Antworttexte an, vertikal.

 

<style type="text/css">.choice-question {text-align:center;font-size:2em}.choice-group {background-color:#000;border-radius:6px;border:5px solid #000}.modern-radio label:before {box-shadow:none !important}.choice-option:nth-child(1) .modern-radio label:before {background-color:#FF0000 !important;border-color:#FF0000 !important}.choice-option:nth-child(2) .modern-radio label:before {background-color:#ff0 !important;border-color:#ff0 !important}.choice-option:nth-child(3) .modern-radio label:before {background-color:#0f0 !important;border-color:#0f0 !important}

 

</style>

 

Ampel - Bewertungsfrage und eckig

<style type="text/css">.scale-question .radiobutton { font-size:1.5em !important } .scale-question .radiobutton label:before { border-radius:.25em !important; border-color:#aaa !important; border-bottom-width:3px } .scale-question .radiobutton input:checked + label:before { background:#fff !important } .scale-question .radiobutton input:checked + label:after { color:#333!important; text-shadow:none!important } .scale-question .radiobutton:nth-child(2) label:before { border-bottom-color:#b22222 !important } .scale-question .radiobutton:nth-child(3) label:before, .scale-question .radiobutton:nth-child(4) label:before, .scale-question .radiobutton:nth-child(5) label:before, .scale-question .radiobutton:nth-child(6) label:before, .scale-question .radiobutton:nth-child(7) label:before { border-bottom-color:#b22222 !important } .scale-question .radiobutton:nth-child(8) label:before, .scale-question .radiobutton:nth-child(9) label:before { border-bottom-color:#ffd700 !important } .scale-question .radiobutton:nth-child(10) label:before, .scale-question .radiobutton:nth-child(11) label:before { border-bottom-color:#32cd32 !important } .scale-question.radios .custom-label-lower-left .bubble { color:#b22222 !important; border:0; background:transparent; box-shadow:none !important; font-weight:700 } .scale-question.radios .custom-label-lower-right .bubble { color:#32cd32 !important; border:0; background:transparent; box-shadow:none !important; font-weight:700 } .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 }</style>

 

Fragen - Trennlinien

Ränder entfernen: .poll .question{ border-top:0!important } .poll .lp-ps-textblock{ border-top:0!important }

 

 

Abstand entfernen: .poll .question{ padding-top:0!important } .poll .lp-ps-textblock{ padding-top:0!important }

Überschriften, Fragen, Antworten anpassen

 

<style type="text/css">

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

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

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

</style>

Eigene Schriftart für den gesamten Fragebogen

 

<style type="text/css">

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

<style type="text/css">

Alle Texte Rechtsbündig

 

<style type="text/css">

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

</style>

 

Info Button

 

<div class="css-info-button"><span class="icon-info">&thinsp;</span> <span class="info-text">...Ihr Text hier...</span></div>

Eingabefrage - linker Textbereich kleiner / größer

 

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

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

Matrix Frage

Linke Matrix-Spalte (Item-Texte) breiter machen

 

<style type="text/css">

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

 

Matrix- ungerade Zeilen

 

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

 

Für das Hover (Mouse-over):

 

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

Letzte Matrix Spalte immer färben

(bspw. für "keine Antwort" Spalte)

 

<style type="text/css">.matrix-question .last-cell {

background:#cde3ed}

</style>

 

Bestimmte Spalten färben:

 

(A=Block/Skala, B=Spalte)

 

<style type="text/css">.matrix-question .col_A_B, .matrix-question .col_2_2 {

background:#cde3ed}

</style>

 

Bestimmte Spalten schmaler/breiter

 

.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%;}

 

Spaltenüberschriften:

 

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

 

 Zeilen Labels / Items / Linke Spalte:

 

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

 

Block färben

 

.matrix-question .colScale_1{

background:#cde3ed !important

}

Sternchenfrage

/* Sternchen (größe + farbe) */ .poll .poll-page .scale-question.stars .star:before { font-size:1.25em; color:#ffea00 !important }

 

/* X / Cancel (größe + farbe) */

 

.poll .poll-page .scale-question.stars .rating-cancel:before{color:#ffea00 !important;font-size:0.75em;}

 

/* Sternchen (außenabstand) */ .scale-question.stars .star { width:1.25em; height:1em }

 

/* X / Cancel (außenabstand) */scale-question.stars .rating-cancel {width:1em; height:1em}

Sternchen bei Pflichtfragen innerhalb des Fragebogens

 

<style type="text/css">

 

.poll .poll-page .question-text-container .duty-marker {margin-left:0;padding-left:0.2em;padding-right:0.2em}

 

.poll .poll-page .question-text-container .duty-marker:after {display:none}

 

</style>

 

 oder entfernen:

 

<style type="text/css">.duty-marker {display:none !important}

</style>

 

 

Sternchen Frage Kreuz entfernen

 

<style type="text/css">.rating-cancel {display:none !important}

</style>

Logo rechts, Fortschrittsbalken links

 

<style type="text/css">

.poll .progress-bar {float:left !important}

.poll .logo-wrapper {float:right !important}

.poll .poll-title, .poll .page-title-container, .poll .languages { clear:both !important }

</style>

 

Hintergründe von geraden und ungeraden Items angleichen

 

<style type="text/css">

.poll .poll-page .scale-question .even-bg {background:none}

.poll .poll-page .choice-question .choice-option {background:none}

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

.poll .poll-page .input-question.hori .inputfield{background:none}

</style>

Weiter und Zurück-Button

 

Einfacher eigener Weiter-Button

 

<a class="button lp-alt-next">Seite 3</a>

 

 

Weiter-Button mit Sprung zu bestimmter Seite

 

<a class="button lp-alt-next" href="#jump-to-page=3">Weiter zu Seite 3</a>

 

Absenden Button entfernen

 

 <style type="text/css">.poll .poll-page #formbuttons .right .button { display:none; }</style>

Weiter Button entfernen

 

<style type="text/css">#formbuttons .right .button{ display:none!important }</style>

 

Buttons verkleinern und vergrößern

 

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

 

Umfrage zentrieren / alles mittig

 

 

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

 

Bestimmte Frage zentrieren / mittig

 

.poll #question_NUMMER/ID .choice-question{ text-align:center }

 

.poll   #question_NUMMER/ID .choice-question{ text-align:center }

Warum LamaPoll?

Mehr als 10.000 Unternehmen erstellen bereits Online Umfragen mit unserem Umfragetool.
Bekannt aus:

 

 Kontakt

Schreiben Sie uns!

Unser Support-Team hilft bei Fragen oder Problemen gern weiter.