Design einer interaktiven Grafik über CSS anpassen

Über die Nutzung des offenen CSS-Codes können Sie Ihre Interaktive Grafik auch im kleinsten Detail optisch anpassen. Da hierfür CSS-Kenntnisse notwendig sind, haben wir es Ihnen bereits etwas einfacher gemacht und folgend für Sie die gängigsten CSS-Befehle zusammengetragen. Sollen wir für Sie weitreichendere Designanpassungen vornehmen, kommen Sie hierzu einfach nochmal auf uns zu.

CSS-Reiter aufrufen

Im Editorbereich der Interaktiven Grafik finden Sie den Reiter “CSS”. Dieser ist anfangs leer und kann von Ihnen mit entsprechenden CSS-Befehlen versehen werden, die das Design bis ins kleinste Detail verändern können. Anbei finden Sie einen Screenshot für eine mögliche Umsetzung, anschließend folgen die gängigsten CSS-Befehle, um das Design an Ihre Grafik anzupassen.

Größe der Klickbereiche verändern und Position verschieben

Nicht immer passt das Design und die Position der integrierten Klickbereiche zu Ihrer hochgeladenen Hintergrundgrafik. Über folgende CSS-Befehle können Sie das Standarddesign ausblenden, die Position der Türchen ändern und ihre Größe anpassen.

a) Ausgangssituation

Anfangs legen sich unsere Standardtürchen noch in einer festen Anordnung über Ihr hochgeladenes Bild. Bitte denken Sie bereits bei Bilderstellung daran, dass Ihre Klickbereiche und Texte groß genug sind, um auch bei Bedienung mit Smartphones gut sichtbar zu sein.

b) Klickbereiche verschieben und Größe ändern

Das Verschieben der Türchen ist über unsere Drag & Drop-Funktion möglich oder über folgende CSS-Anleitung. Falls Sie unsere Drag & Drop-Funktion nutzen möchten, ist dies erst nach manueller Freischaltung durch uns möglich. Kommen Sie hier bitte auf uns zu, wenn Sie diese gebucht haben und Ihr finales Hintergrundbild der Interaktiven Grafik bereits hochgeladen wurde.

Die Position Ihrer Klickbereiche kann aber auch ohne Drag & Drop-Funktion über folgende CSS-Befehle geändert werden. Anbei finden Sie ein typisches Beispiel für CSS-Befehle. Im Beispiel werden damit die Klickbereiche an eine andere Stelle verschoben und vergrößert.

——————————————————

BITTE FOLGENDE ZEILEN IN REITER CSS KOPIEREN UND ANPASSEN

——————————————————

.calendar-view .calendar .door-container .door { position:absolute; margin:0; }

.calendar-view .calendar .door-container .door.door-1 { left:5%; top:48%; width:10%; height:10%; }
.calendar-view .calendar .door-container .door.door-2 { left:20.42%; top:42.75%; width:10%; height:10%; }
.calendar-view .calendar .door-container .door.door-3 { left:35%; top:36.45%;  width:10%; height:10%; }
.calendar-view .calendar .door-container .door.door-4 { left:50.85%; top:33.45%;  width:10%; height:10%; }
.calendar-view .calendar .door-container .door.door-5 { left:67.32%; top:33.57%;  width:10%; height:10%; }
.calendar-view .calendar .door-container .door.door-6 { left:82.54%; top:33.7%;  width:10%; height:10%; }

————————–

ALLGEMEINE ERKLÄRUNGEN

  • Die Bezeichnung “.calendar-view .calendar .door-container .door.door-1″ beschreibt, dass der erste Klickbereich (door-1) angepasst wird.
  • Die Bezeichnung “{ left:5%; top:48%; width:10%; height:10%; }” beschreibt die Position und die Größe des Klickbereiches im Verhältnis zu Ihrer hochgeladenen Grafik
  • Wollen Sie weniger oder mehr Klickbereiche anpassen, fügen Sie einfach eine entsprechende zusätzliche Zeile ein und ändern die Zahlen (z.B. door-7)

Türchenabstand vom linken Rand      = left: + Prozentangabe
Türchenabstand vom oberen Rand    = top: + Prozentangabe
Türchenbreite                                       = width: + Prozentangabe
Türchenhöhe                                         = height: + Prozentangabe

——————————————————

Beispiel CSS vorher:     .calendar-view .calendar .door-container .door.door-3 { left:8%; top:10%; width:18%; height:10%; }
Wenn Sie das Türchen 3 nach rechts unten verschieben möchten und anschließend schmaler und höher gestalten möchten, dann wäre bspw. folgender CSS-Befehl passend
Beispiel CSS nachher:    .calendar-view .calendar .door-container .door.door-3 { left:24%; top:32%; width:11%; height:23%; }  

c) Zahlen ausblenden

Lassen Sie unsere Standard-Türchenzahlen am besten so lange stehen, bis Sie alle Klickbereiche der Türchen korrekt positioniert haben. So unterlaufen Ihnen keine versehentlichen Fehler. Sind Sie fertig mit dem Positionieren, blenden Sie die Türchenzahlen über folgenden CSS-Befehl aus.
Nummern der Türchen anschalten / ausschalten

ANSCHALTEN =     .door-number { display: true }
AUSSCHALTEN =   .door-number { display: none }

d) Türchenhintergrund und Rahmen ausblenden

Den Rahmen und den Hintergrund der Türchen sollten Sie erst ganz zum Schluss ausblenden, damit Sie beim Bearbeiten der Türchenposition noch die volle Ansicht zur Orientierung nutzen können. Haben Sie Ihre Türchen richtig positioniert und in der Größe angepasst, blenden Sie gerne auch die Standardschattierung und den Rahmen der Türchen aus.
CSS-Befehl

.calendar-view .calendar .door-container .door { background-color: transparent; border:0}

Beispiel für fertiges CSS

.calendar-view .calendar .door-container .door { position:absolute; margin:0; }

.calendar-view .calendar .door-container .door.door-1 { left:5%; top:48%; width:13%; height:17%; }
.calendar-view .calendar .door-container .door.door-2 { left:20.42%; top:42.75%; width:12.5%; height:17%; }
.calendar-view .calendar .door-container .door.door-3 { left:35%; top:36.45%;  width:12.5%; height:17%; }
.calendar-view .calendar .door-container .door.door-4 { left:50.85%; top:33.45%;  width:12.5%; height:17%; }
.calendar-view .calendar .door-container .door.door-5 { left:67.32%; top:33.57%;  width:12.9%; height:17%; }
.calendar-view .calendar .door-container .door.door-6 { left:82.54%; top:33.7%;  width:12.5%; height:17%; }

.door-number { display: none}
.calendar-view .calendar .door-container .door { background-color: transparent; border:0}