Themenbereich: Umfrage aufbauen
CSS-Editor

Der CSS-Editor ermöglicht Ihnen weitergehende Optimierungen an dem Umfrage-Layout vorzunehmen. Sie können damit nahezu jedes Element noch individueller gestalten.

Info
Alle im CSS-Editor gemachten Angaben ersetzen die Sonstigen. Bei den Layoutvorlagen sind bereits bestimmte Bereiche über den CSS-Editor angepasst. So auch teilweise die Farben der Buttons. Wenn Sie nun über den Farbwähler die Buttonfarbe ändern, wird sich diese immernoch an den Angaben im CSS-Editor orientieren. Der CSS-Editor unterliegt einer höheren Instanz als die normalen Layouteinstellungen.

Nachfolgend ein paar Beispiele, wie Sie mit dem CSS-Editor Eigenschaften ändern:
 

Hintergrundfarbe des Headers (Kopfbereich)
 
header { background-color: #FFFFFF; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Um die Hintergrundfarbe des Headers zu ändern, muss der Hexadezimalwert (#FFFFFF) durch einen anderen ersetzt werden.
 

Hintergrundfarbe und Höhe des Headers (Kopfbereich)
 
header { background-color: #FFFFFF; height: 100px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Um die Höhe des Headers zu verändern, muss die Höhenangabe (100px) durch einen anderen numerischen Wert ersetzt werden.
 

Hintergrundfarbe, Höhe und Abstand des Headers (Kopfbild)
 
header { background-color: #FFFFFF; height: 100px; margin: 30px 0px 0px 0px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Für die Abstände ist das „margin“ verantwortlich. Der erste Wert für oben, der Zweite für rechts, der Dritte für unten und der Vierte für links. Die Angabe erfolgt numerisch gefolgt von einem px. In diesem Beispiel wird der Header um 30px nach unten versetzt.
 

Logo nach unten versetzen
 
header .pull-left { margin: 20px 0px 0px 0px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Mit dem folgenden Befehl wird nur das Logo angesprochen und um 20px nach unten versetzt. Nach belieben kann das Logo mit den anderen Werten in eine andere Richtung versetzt werden. Minus-Werte sind ebenfalls erlaubt.
 

Satusbalken versetzen
 
header .pull-right { margin: 50px 20px 0px 0px; }
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Mit folgendem Befehl wird der Statusbalken um 50px nach unten und 20px nach links versetzt.
 


Spezielle CSS-Anpassungen für verschiedene Bildschirmauflösungen

Mit der automatischen Anpassung auf kleinere Bildschirme (Tablet & Smartphone) wird das Umfrage-Layout der jeweiligen Größe angepasst. Wenn Sie nun über den CSS-Editor Anpassungen vornehmen, wirken sich diese auch auf die optimierte Darstellung für kleine Bildschirme aus und können zu unerwünschtem Verhalten führen.
Um dies zu verhindern, können Sie mit speziellen CSS-Befehlen Anpassungen nur auf bestimmte Bildschirmauflösungen ausrichten.

Beispiel:
In der normalen (Desktop-)Ansicht möchten Sie den Statusbalken um 50px nach unten versetzen. Sobald die Umfrage auf einem Tablet aufgerufen wird nur noch um 10px, und wenn die Umfrage auf einem Smartphone aufgerufen wird, soll sich der Statusbalken nicht nach unten versetzen.

In diesem Fall sieht der CSS-Code folgendermaßen aus:
 
header .pull-right { margin: 50px 0px 0px 0px; }

@media (max-width:767px) {
    header .pull-right { margin: 10px 0px 0px 0px; }
}

@media (max-width:360px) {
header .pull-right { margin: 0px 0px 0px 0px; }
}
(Kopieren Sie den Code und fügen Sie diesen in dem CSS-Editor ein.)

Mit folgendem Befehl wird der Statusbalken bei der normalen (Desktop-)Ansicht um 50px nach unten versetzt, bei einer Bildschirmauflösung von unter 768px um 10px und bei einer Bildschirmauflösung von unter 361px um 0px nach unten versetzt.

Der Befehl
@media (max-width:XXXpx) {

}

definiert die Bildschirmgröße bei welcher die gesetzten Einstellungen greifen sollen. Alle Befehle zwischen den geschweiften Klammern greifen nur bis zu der angegebenen Bildschirmauflösung.


Hinweis
Jede Eingabe kann zu Fehlern führen für die wir keine Haftung übernehmen. Lassen Sie sich bei speziellen Änderungen beraten oder von einem Experten helfen.