Umfragedesign via CSS anpassen

Die meisten Designeinstellungen (Farben, Schriften und Rahmen) können Sie über den Layoutkonfigurator ganz einfach einstellen. Doch manchmal sind spezielle Abstände, Positionen oder gar das Ausblenden von Elementen gewünscht. Wie Sie diese einstellen und auf welche Punkte Sie dabei achten müssen, erklären wir Ihnen hier.

Mit dem CSS-Editor können Sie alle bestehenden Befehle für den Aufbau und das Design eines Layout direkt überschreiben oder ändern. In einigen Layoutvorlagen finden Sie unten im CSS-Editor bereits hinterlegte Befehle, welche für das individuelle Design verantwortlich sind. Sobald unten im CSS-Editor, z.B. ein Farbwert für die Buttons hinterlegt worden ist, greifen die Farbangaben oben nicht mehr. Die Angaben im CSS-Editor haben somit die Oberen überschrieben.

 

CSS-Codebeispiele um Elemente in der Umfrage anzupassen

Logo verschieben
Je nach Header- und Logogröße ist es manchmal gewünscht das Logo mittiger auszurichten oder es in seiner Position zu verschieben. Um das Logo über den CSS-Editor anzusprechen, beginnen Sie mit: „header .pull-left {}“. In den geschweiften Klammern können wir nun diverse Befehle setzen, die das Logo betreffen:

 

header .pull-left { display: none; } = Logo ausblenden
header .pull-left { margin: 50px 0 0 0; } = Position um 50 Pixel nach unten verschieben
header .pull-left { margin: 50px 0 0 -20px; } = Position um 50 Pixel nach unten und 20 Pixel nach links verschieben

 

Margin ist der Außenabstand eines Elements zu seinen Nachbarelementen. In dem Margin-Befehl können 4 Werte zur Positionierung verwendet werden. Der erste ist der Abstand von Oben, der zweite von Rechts, der dritte von Unten und der vierte von Links (Reihenfolge der Werte im Uhrzeigersinn). Sobald Sie einen oder mehrere der Werte setzen, müssen Sie danach immer den Wert „px“ angeben und zum Schluss den Befehl mit einem Semikolon beenden. Sie können normale Werte vergeben oder diese mit einem Minuszeichen versehen um in die entgegengesetzte Richtung das Element zu verschieben.

 

Statusbalken verschieben und anpassen
Hier gelten die gleichen Befehle wie bei dem Logo, nur das wir zwei verschiedene einleitende Befehle benötigen um den Statusbalken anzupassen. Mit „header .pull-right {}“ können wir das Element an sich ansprechen, und mit „.progress“ die Attribute des Statusbalken. Um die Position zu ändern oder diesen auszublenden nutzen wir folgende Befehle:

 

header .pull-right { display: none; } = Statusbalken ausblenden
header .pull-right { margin: 100px 0 0 0; } = Statusbalken um 100 Pixel nach unten versetzt

 

Um das Element in sich anzupassen, müssen wir es direkt ansprechen. Dies tun wir mit „ .progress“. Jetzt können wir hier z.B. die Höhe oder den Außenradius verändern:

 

.progress {
height: 18px; = Höhe des Balkens
width: 250px; = Breite des Balkens
-webkit-border-radius: 9px; = Außenradius am Balken
-moz-border-radius: 9px; = Außenradius am Balken
border-radius: 9px; = Außenradius am Balken
}

 

Die Zahlenwerte können Sie nach belieben verändern. Damit der Radius auf allen Endgeräten und Browsern optimal angezeigt wird, ist es hier nötig diesen 3x zu definieren.

 

Button-Farbe bei Designvorlage Elegant, Modern und Clean ändern
Der Standard-Button in den Umfragen hat einen kleinen Verlauf, runde Ecken, einen Over-Effekt und einen Border (Rahmen). In den Designvorlagen Elegant, Modern und Clean haben wir diese Effekte ausgeblendet. Wenn Sie bei einer dieser Designvorlagen die Button-Farbe anpassen möchten, können Sie dies nur im CSS-Editor tun.

Im folgenden Code müssen Sie dafür an jeder Stelle wo der Farbcode für den Button auftaucht diesen durch den Neuen ersetzen. In diesem Beispiel muss überall „#0099cc“ ersetzt werden:

 

.btn {background-color:#0099cc;background-image:-moz-linear-gradient(top, #0099cc, #0099cc);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0099cc), to(#0099cc));background-image:-webkit-linear-gradient(top, #0099cc, #0099cc);background-image:-o-linear-gradient(top, #0099cc, #0099cc);background-image:linear-gradient(to bottom, #0099cc, #0099cc);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=“#0099cc“, endColorstr=“#0099cc“, GradientType=0);
*background-color:#0099ccfilter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:0px solid #0099cc;
*border:0;border-bottom-color:#a2a2a2;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;
}

 

 

Hintergrundbilder
Wenn Sie Hintergrundbilder nutzen möchten, sprechen Sie uns bitte an damit wir diese einbinden können. Wenn Sie diese selber einbinden kommt es zu einem Warnhinweis durch das SSL-Zertifikat für Ihre Teilnehmer. Dies liegt daran, weil das Bild von einer fremden URL in die Umfrage eingebettet wurde.

 

Höhe des Headers (Kopfbereich) verändern
Um den Header (Kopfbereich) der Umfrage in der Höhe zu verändern, müssen wir diesen mit „header {}“ ansprechen. In den geschweiften Klammern folgt dann der Befehl. Um die Höhe zu verändern geben Sie bitte folgenden Befehl im CSS-Editor ein:

 

header { height: 150px; } = Höhe des Headers 150 Pixel

 

Den Zahlenwert können Sie nach belieben anpassen.

 

Abschlussbalken (Footer) anpassen
Neben dem Header können Sie auch den Footer anpassen. Diesen können Sie in der Höhe verändern oder z.B. den Abstand nach unten zum Browserfenster definieren. Um den Footer anzusprechen benötigen wir den einleitenden Befehl: „footer {}“. In den geschweiften Klammer kommen dann die Befehle:

 

footer { height: 50px; } = Höhe des Footers 50 Pixel
footer { margin: 0 0 50px 0; } = Abstand nach dem Footer zum Browserfenster 50 Pixel

 

 

Info / Wichtig

Wenn Sie mehrere Befehle für ein Element vergeben möchten, können Sie diese in einem Befehl kombinieren. So wie es bei dem Ändern der Button-Farbe oder des Statusbalken zu sehen ist. Die Befehle können entweder hintereinander weg geschrieben werden oder pro Zeile ein Befehl.

footer { height: 50px; margin: 0 0 50px 0; }

oder

footer {
height: 50px;
margin: 0 0 50px 0;
}

Wichtig ist nur, dass nach jedem Befehl ein Semikolon gesetzt wird. Dieses beendet den Befehl. Wenn Sie dieses vergessen, können die Befehle nicht umgesetzt werden.