Logo über Fragebogen-Titel/-Untertitel?!

[Gast]

Hallo liebes Supportteam,

leider fügt sich mein Logo jeweils direkt auf den Titel/Untertitel der Befragung ein, so dass dieser nicht mehr lesbar ist. Habt ihr einen fixen Code für mich, wie ich den Titel nach unten schieben kann?

Besten Dank vorab!

Gruß,
K.

[support]

Hallo K.!

Je nach gewählter Layout-Vorlage befindet sich der "Standard"-Platz für das Logo-Bild entweder über den Titel/Untertitel-Bereich, oder direkt darunter. Mit Hilfe des Layout-Template-Editors können Sie jedoch die Platzierung des Logos nahezu beliebig anpassen, oder den Logo gänzlich aus dem Layout des Fragebogens entfernen.

Ihrer Frage entnehme ich, dass Sie das Logo-Bild nicht entfernen möchten, sodass ich nun beschreibe, wie man das Problem der Überlappung auflösen kann. Eine Überlappung mit dem Titel-Bereich ist eigentlich nur in der Layout-Vorlage "!eq black-n-white" möglich. Daher wird es bei den weiteren Ausführungen davon ausgegangen, dass Sie diese Standard-Layout-Vorlage als Basis für Ihr Fragebogen-Layout gewählt haben.

Wenn die Verkleinerung der Schriftgröße im Titel- und Untertitel-Bereichen das Problem der Überlappung mit dem Logo-Bild nicht löst (weil z.B. der Titel zu lang ist), kann man diese auf folgende zwei Weisen eliminieren: 1) entweder kann die Breite des Text-Bereichs im Titel- und Untertitel-Feld verkleinert oder 2) das Logo-Bild nach unten verschoben werden.

Für beide Lösungen benötigen wir einige Vorbereitungen, die in beiden Fällen gleich sind:

Vorbereitungen

1) Gehen Sie auf das Layout-Ansicht. Klicken Sie hierzu auf dem Button "Layout anpassen" auf der Fragebogeneigenschaftenansicht

2) Erstellen Sie eine Kopie der gewünschten Layout-Vorlage. Da der HTML-Code der Standard-Layout-Vorlagen nicht angepasst werden kann, benötigen sie eine personalisierte Kopie der Layout-Vorlage, die Ihnen am besten gefällt. Die Kopien von Standard-Layout-Vorlagen können uneingeschränkt angepasst werden, d.h. wir können deren HTML- und CSS-Code beliebig ändern.

2a) Bitte wählen Sie zunächst im Dropdown-Feld oben links die Layout-Vorlage, die Ihnen am besten gefällt.
2b) Klicken Sie nun auf dem Button "Neues Layout". Es erscheint ein Dialog, in dem Sie Ihre neue Layout-Vorlage benennen können.
2c) Geben Sie für Ihre neue Layout-Vorlage (bzw. Kopie) einen Namen ein und bestätigen Sie Ihre Eingabe mit demKlick auf dem Button "OK".

Jetzt ist die Kopie der gewünschten Layout-Vorlage erstellt und kann angepasst werden.

3) Klicken Sie nun auf dem Button "HTML-Template bearbeiten", um den Code der Layout-Vorlage zur Bearbeitung im Layout-Template-Editor aufzurufen.

4) In dem Layout-Template-Editor schalten Sie auf die Registerkarte "CSS". Wir schalten damit in dem Bereich um, wo wir den CSS-Code - also die Styles einziger Elemente - feingradig anpassen können.

Ab jetzt unterscheiden sich die Vorgehen für die beiden oben vorgeschlagenen Lösungen:


Lösung 1 - Breite des Titel- und Untertitel-Bereiches verkürzen

5) Durchsuchen Sie den CSS-Code auf den Style-Namen "#header #header_text".

Diese Style-Definition ist für die Gestaltung vom Text im Titel-Bereich der Layout-Vorlage zuständig. Mit der Definition "padding-right" wird hier der Abstand des Text-Bereiches von rechts (wo sich das Logo befindet) definiert. Der "Standard"-Wert dieser Definition ist auf 100px (also 100 Pixel) gesetzt. Durch Vergrößerung dieses Abstandes schaffen wir mehr Raum zwischen den Text- und Logo- Bereichen. Wenn wir diesen Abstand auf 250 Pixel setzten möchten, müssen wir den Code wie folgt modifizieren:

6) Passen Sie den Wert der Definition des Rechts-Abstandes "padding-right" entsprechend Ihren Bedürfnissen an. Um den Rechts-Abstand auf 250 Pixel zu vergrößern, ersetzen Sie den Wert 100 bei "padding-right" mit 250. Das Ergebnis unserer Modifikationen im CSS-Code so aussehen:

Code: Alles auswählen

#header #header_text{
  padding: 25px 50px;
  padding-right: 250px;
}

7) Übernehmen Sie die Änderungen mit dem Klick auf "Übernehmen" und schließen Sie das Fenster des Layout-Template-Editors.



Lösung 2 - Verschieben des Logo-Bildes nach Unten

5) Durchsuchen Sie den CSS-Code auf den Style-Namen "#header #logo".

Dieser Style definiert die Position des Logo-Bildes im Titel-Bereich der Layout-Vorlage. Ähnlich wie im vorherigen Beispiel können wir hier den Abstand des Logo-Bildes von oben und von rechts anpassen. Hierzu müssen wir entsprechend die Eigenschaften "top" und "right" anpassen.


6) Passen Sie den Abstand von oben und von rechts entsprechend Ihren Bedürfnissen an.
Wenn Sie den Abstand von Oben auf 135 Pixel erhöhen und den Abstand von Rechts auf 10 Pixel verkleinern möchten, wird der CSS-Code der Logo-Style-Definition wie folgt aussehen:

Code: Alles auswählen

#header #logo {
  position: absolute;
  top: 135px;
  right: 10px;
  margin: 0;
  padding: 0;
}

7) Übernehmen Sie die Änderungen mit dem Klick auf "Übernehmen" und schließen Sie das Fenster des Layout-Template-Editors.

Nun können Sie bereits im Vorschau-Fenster der Layout-Ansicht das Ergebnis Ihrer Anpassungen sehen. Selbstverständlich können Sie die Schritte 3 bis 7 beliebig oft wiederholen, um die Positionen vom Text- und Logo-Bereichen zu justieren.

MfG,
Support