LamaPoll Logo
Home Features Erstellen CSS-Befehle

Design-Funktionen: CSS-Befehle

Mittels CSS (Cascading Style Sheets)) können Sie den online Fragebogen/ die online Umfrage fast unbegrenzt anpassen. LamaPoll bietet speziell dafür einen CSS-Menüpunkt für jede Umfrage. Sie möchten einen Info-Button in erkärenden Texten einbauen, Buttons oder bestimmte Spalten einer Matrix-Farbe färben?

Hier finden Sie unsere Sammlung von CSS-Anweisungen:

 

1. CSS-Befehle hinterlegen: CSS-Menüpunkt oder Quellcode-Button bei jedem Element

Der CSS Code kann entweder a) im Menüpunkt "CSS" eingegeben werden (dann gilt er für die gesamte Umfrage) oder b) in jedem einzelnen Element über dem Button "Quellcode" - in diesem Fall gilt der CSS-Befehl nur für das jeweilige Element.

a) CSS-Menüpunkt - CSS-Befehle für die gesamte Umfrage

Jede Umfrage hat einen Menüpunkt für CSS: Öffnen Sie dazu bitte Ihren Fragebogen und navigieren oben zu "CSS". Es erscheint ein Feld, in dem Sie den CSS-Befehl eintragen können:

Menüpunkt "CSS" bei jeder Umfrage oben in der horizontalen NavigationsleisteAbb. 1 - Menüpunkt CSS

b) Quellcode-Icon im Editor - CSS-Befehle für bestimmte Elemente (Fragen, Items ...)

Quellcode-Icon im Editor bei jedem Element

Abb. 2 - Quellcode-Button im Editor bei jedem Element

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

 

2. CSS-Code-Sammlung: Beispiele für Ihren Fragebogen

Achten Sie beim Kopieren von CSS-Befehlen immer auf alle Zeichen und auch Leerzeichen: CSS-Befehle beginnen in den meisten Fällen mit einem Punkt ".".

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 den untenstehenden Code ein. Den Bereich "...Ihr Text hier..." zwischen den zwei spitzen Klammern ersetzen Sie durch Ihren Text.

<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.1 Anpassen:

.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.2 oder entfernen:

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

 

6) Alle Texte Rechtsbündig

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

 

7) Fragen - Trennlinien

7.1 Ränder entfernen:

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

7.2 Abstand entfernen

.poll .poll-page .choice-question {margin-top:0 !important;margin-bottom:0 !important}

8) Weiter und Zurück-Button

8.1 Einfacher eigener Weiter-Button:

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

8.2 Weiter-Button mit Sprung zu bestimmter Seite:

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

8.3 Absenden-Button entfernen:

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

8.4 Weiter-Button entfernen:

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

8.5 Buttons verkleinern und vergrößern:

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

 

9) Umfrage zentrieren/ alles mittig

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

9.1 Bestimmte Fragen 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.1 Farbe:

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

11.2 Text 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.1 Seitenüberschriften:

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

13.2 Fragentexte:

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

13.3 Antworten:

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

13.4 Eigene 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.1 Linke Matrix-Spalte (Item-Texte) breiter machen:

<style type="text/css">

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

14.2 Letzte Matrix-Spalte färben:

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

.matrix-question .last-cell {

background:#cde3ed}

14.3 Letzte Spalten optisch abtrennen: 

Abstand:

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

Trennstrich:

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

14.4 Zeilen Labels/ Items/ Linke Spalte:

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

14.5 Matrix - ungerade Zeilen:

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

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

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

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

14.8 Bestimmte 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.9 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}

14.10 Block färben ohne Überschrift

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

14.11 Block färben inkl. Ü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.1 Sternchenfrage 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

Beispiel einer Ampel-Bewertungsfrage mit eckigen Buttons

Abb. 3 - Beispiel Ampel-Bewertungsfrage mit eckigen Buttons

 

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

 

Jetzt kostenfrei starten!

Für unsere Testversion brauchen Sie lediglich eine E-Mail-Adresse und ein Passwort

nach oben