Titel/Ãœberschrift-Feld durch ein Bild ersetzen

[chriswil]

Hallo,

ich möchte für meine Online-Befragung das Titelbild/-feld verändern. Es soll in Zukunft nicht mehr der Titel und der Untertitel der Befragung an oberster Stelle erscheinen, sondern an dieser Stelle soll nun ein breites, von mir gestaltetes Bild (jpeg) zu sehen sein. Kann ich solche Veränderungen vornehmen? Und falls ja, wie funktioniert das?

Grüße,
Christoph Wildemann

[support]

Hallo Christoph!

Ja, Sie können ein von Ihnen hochgeladenes Bild im Header Ihres Fragebogenlayouts platzieren.

Hierzu sind jedoch einige Änderungen an dem HTML-Code der Layout-Vorlage erforderlich. Das von Ihnen für die Nutzung im Header vorgesehene Bild muss selbstverständlich auch in eQuestionnaire hochgeladen sein.

Schritt-für-Schritt sehen die notwendigen Änderungen so aus:

1) gehen Sie auf die Layout-Ansicht und klicken Sie dort auf dem Button "HTML-Template bearbeiten" (es öffnet sich ein neues Fenster mit dem Dialog "Layout Template Editor")

2) Klicken Sie auf die Registerkarte "CSS"
(nun können Sie die Style-Definitionen Ihres Layouts bearbeiten)

3) suchen Sie nach dem Style "#header"
In der Layout-Vorlage "!eq bricks blue" sieht der Code dieser Style-Definition so aus:

Code: Alles auswählen

#header {
  background: #9fc0ff  url(http://templates.equestionnaire.de/bricks-blue/header-background1400x200.gif) no-repeat bottom right;
  background-repeat: no-repeat;
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  font-size: 150%;
  font-weight: bold;
  color: #fff;
  padding: 0;
  margin: 0;
}


4) in der Style-Definition für #header müssen Sie nun in der Direktive "background:" die Adresse, die bei "url" in klammern steht, mit dem Platzhalter für Ihr hochgeladenes Bild ersetzten und "&URL" an den Platzhalten anhängen.

Wenn Ihr hochgeladenes Bild z.B. den Platzhalter {IMG#12345} zugewiesen bekam, so sollte die Direktive wie folgt aussehen:

background: #9fc0ff url({IMG#12345}&URL) no-repeat bottom right;

Der gesamte Code-Abschnitt für die Style-Definition "#header" sieht dann entsprechend so aus:

Code: Alles auswählen

#header {
  background: #9fc0ff  url({IMG#12345}&URL) no-repeat bottom right;
  background-repeat: no-repeat;
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  font-size: 150%;
  font-weight: bold;
  color: #fff;
  padding: 0;
  margin: 0;
}


5) klicken Sie nun auf "Übernehmen" und schließen Sie den "Layout Template Editor"


MfG,
Support