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

 

 

Falls Sie CSS Code nicht oben im dafür vorgesehenen Bereich platzieren, sondern im Quellcode einzelner Seiten oder Fragen, muss der Code immer starten mit <style type="text/css"> und enden mit </style>

1.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 }

2.Info Button

Öffnen Sie das Element, in welchem der Info-Button dargestellt werden soll. In der Werkzeug-Leiste klicken Sie auf “Quellcode” und fügen diesen Code ein:

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

3.Logo rechts, Fortschrittsbalken links

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

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

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

4.Hintergründe von geraden und ungeraden Items angleichen

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

5.Sternchen – Marker bei Pflichtfragen

5.1Anpassen:

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

5.2oder entfernen:

.poll .duty-marker {display:none !important}

6.Alle Texte Rechtsbündig

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

7.Fragen - Trennlinien

7.1Ränder entfernen:

.poll .question{ border-top:0!important } .poll .lp-ps-textblock{ border-top:0!important }

7.2Abstand entfernen:

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

8.Weiter und Zurück-Button

8.1Einfacher eigener Weiter-Button

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

8.2Weiter-Button mit Sprung zu bestimmter Seite

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

8.3Absenden Button entfernen

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

8.4Weiter Button entfernen

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

8.5Buttons verkleinern und vergrößern

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

9.Umfrage zentrieren / alles mittig

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

9.1Bestimmte Frage zentrieren / mittig

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

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

10.Linke Texte verschieben

(bspw. um Bewertungsfragen anzugleichen)

 

.poll .left-text{width:200px;}

11.Sprachleiste

11.1Farbe

.poll-header .languages { background-color:#A2A }

11.2Text in der Sprachleiste

.languages a { color:#A2A!important }

12.Bearbeitung später fortsetzen – Link: Größe anpassen

.resume-link-container .resume-link {font-size:18px}

13.Schriftart und Schriftgröße

13.1Seitenüberschriften:

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

13.2Fragentexte:

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

13.3Antworten:

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

13.4Eigene Schriftart für den gesamten Fragebogen

Achtung: falls der Teilnehmer diese Schriftart nicht installiert hat, kann er sie auch nicht darstellen. Falls Sie eine eigene Schriftart benötigen, sprechen Sie uns an.

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

14.Matrix Frage

14.1Linke Matrix-Spalte (Item-Texte) breiter machen

<style type="text/css">

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

14.2Letzte Matrix Spalte färben

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

.matrix-question .last-cell {

background:#cde3ed}

14.3Letzte Spalten optisch abtrennen

14.3.1Abstand:

.poll .matrix-table tr th:nth-last-child(3), td:nth-last-child(3) {
border-right:20px solid #f9f9f9}

14.3.2Trennstrich:

.poll .matrix-table tr th:nth-last-child(3), td:nth-last-child(3) {
border-right:1px solid #a0a0a0}

14.4Zeilen Labels / Items / Linke Spalte:

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

14.5Matrix- ungerade Zeilen

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

14.6Für das Hover (Mouse-over):

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

14.7Bestimmte 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>

14.8Bestimmte Spalten schmaler/breiter

<style type="text/css">.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%;} </style>

14.9Spaltenü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}

14.10Block färben ohne Überschrift

.matrix-question .colScale_1{background:#cde3ed !important}

14.11Inklusive Überschrift:

.matrix-question .colScale_1, .matrix-question .col-head.first-scale{background:#cde3ed !important}

15.Schieberegler ohne Füllfarbe

.poll .poll-page .horizontal-slider {
box-shadow:none !important
}

.poll .poll-page .horizontal-slider.ui-widget.ui-widget-content {
border:none !important
}

.poll .poll-page .horizontal-slider .ui-slider-handle {
background:#fff !important;
border:#fff !important
}

.poll .poll-page .horizontal-slider .ui-slider-range-min {
background:#fff !important;
box-shadow:none !important
}

16.Sternchenfrage anpassen

/* 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}

16.1Sternchenfrage Kreuz entfernen

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

</style>

17.Eingabefrage - linker Textbereich kleiner / größer

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

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

18.Eingabe- Zahlenfrage Pfeile entfernen

.poll .spinbox .spinbox-button {display:none}

19.Ampel

Sie legen eine Single Choice Frage 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>

20.Ampel - Bewertungsfrage und eckig

Bewertungsfrage Ampel

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

 

 

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

Warum LamaPoll?

Leistungen für die Konzeption eines erfolgreichen Fragebogens mit LamaPoll

© alphaslit

Online Umfragen mit LamaPoll

  • Einfach & intuitiv
  • Attraktives Design
  • 100% Datenschutz
unverbindlich Free Account erstellen

 

Wir beraten Sie gern!
Rufen Sie uns an!
 030 120 885 12
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.