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.

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

 

 

Ampel-Frage

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>

 

Ü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">

Info Button

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

 

Linke Matrix-Spalte (Item-Texte) breiter machen

<style type="text/css">
.poll .matrix-question .scale th:first-child { width:50% !important; }

</style>

 

Alle Texte Rechtsbündig

<style type="text/css">

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

</style>

 

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

 

}

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>

 

Eigener 'Weiter'-Button: Einfacher 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>

 

Eigener normaler Button

<div style="text-align:center;"><a class="button" href="URLZURVERLOSUNG" rel="noreferrer" style="font-size:16pt;" target="_blank">&nbsp;&laquo;&nbsp;zur Verlosung&nbsp;&raquo;&nbsp;</a></div>

 


 

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 {background:none}
.poll .poll-page .input-question.hori .inputfield{background:none}
</style>

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>

Absenden Button entfernen

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

 

Umfrage zentrieren

<style type="text/css">.poll * {
text-align:center !important;
margin:auto
}
</style>

 

Haben Sie Fragen zu dem hier aufgeführten Thema CSS-Codierung? Unser kompententes Fachpersonal beantwortet Ihnen gern Ihre Frage

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.