0 votes
in SoSci Survey (dt.) by s155355 (130 points)

Hallo,

Ich würde für meine Umfrage gerne das Layout „SoSci Survey Neutral“ verwenden, allerdings mit Fortschrittsbalken oben (neben dem Logo) anstelle unten rechts. Ich habe schon einiges in der "HTML-Vorlage des Layouts" bezüglich des Platzhalters %progress% ausprobiert, leider hat bisher nichts zum Erfolg geführt. Wie kann ich die Verschiebung des Balkens erreichen? Zudem würde ich gerne den Balken mit abgerundeten Ecken verwenden, den entsprechenden Befehl (border-radius) habe ich bereits entdeckt, jedoch konnte ich noch nicht herausfinden, an welcher Stelle ich diesen einfügen muss.

Beste Grüße und vielen Dank.

1 Answer

0 votes
by s091203 (1.2k points)

Ich habe schon einiges in der "HTML-Vorlage des Layouts" bezüglich des Platzhalters %progress% ausprobiert

Um den Fortschrittsbalken nach oben rechts, neben das Logo zu versetzen, müssen Sie sich bei der HTML-Vorlage die ganze Zeile mit dem Platzhalter suchen. Im Layout heißt dieser:

<div id="s2t-progress">%progress%</div>

Nun müssen Sie diese Zeile ausschneiden und weiter oben im Code einfügen. Um genau zu sein, als 2. Zeile unter dem "body"

...
 <body>
     <div class="questionary">
     <div id="s2t-progress">%progress%</div>
     <div id="s2t-logo">%logo%</div>
...

Um den Forschrittsbalken abzurunden, müssen Sie im oberen Teil der HTML-Vorlage den Teil mit dem "div.progressbar" aufsuchen und die Eigenschaften dazu ändern. Sie müssen als letzte Eigenschaft in dieser Zeile den " border-radius: 5px" eingeben. Um auch das Innere des Fortschrittsbalkens abzurunden (optional) müssen Sie außerdem noch eine Zeile "div.progressbar div.progress" einfügen und ebenfalls die Eigenschaft " border-radius: 5px" vergeben.
Das Ganze sollte dann folgendermaßen aussehen (die 2. Zeile, ist die Zeile, in der Sie bearbeiten müssen und die letzte Zeile müssen Sie hinzufügen):

... 
.buttonControl { padding-top: 0; padding-bottom: 16px }
div.progressbar { height: 20px; border-color: #AAAAAA; border-radius: 5px }
div.progressbar div.progresstext { top: 4px } 
div.progressbar div.progress {border-radius: 5px}
...

Wenn Ihnen die Rundung zu stark oder zu schwach ist, geben Sie einfach einen anderen Wert der Pixel ein.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...