Farbe der Trennlinie zwischen Auswahloptionen und Ausweichoption

Question

Guten Tag,

ich habe eine Frage zum Fragentyp "Skala (Zwischenwerte beschriftet)" mit Ausweichoption.

Durch eine Anpassung der Sekundärfarben im Fragebogen-Layout ist nun das Problem aufgetreten, dass die Trennline zwischen den regulären Auswahloptionen und der Ausweichoption nicht mehr sichtbar ist.

Ich würde nun gerne die Trennlinie dunkler machen, so dass sie wieder deutlich sichtbar ist. Leider ist mir nicht klar, an welcher Stelle im Fragebogen-Layout ich eine entsprechende Anpassung vornehmen muss, um dies zu bewerkstelligen. Könnten Sie mir diesbezüglich bitte weiterhelfen?

Herzlichen Dank und beste Grüße

Comments

Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, kann ich Ihnen den passenden CSS-Code für den <style>-Bereich im Layout mitteilen.

---

Guten Morgen,

herzlichen Dank für Ihr promptes Feedback - ein passender CSS-Code wäre super!
Anbei - wie erbeten - der Prestest-Link zu einer Seite, bei der das geschilderte Problem auftritt:

https://survey.unibw.de/absolv2021v_2/index.php?i=VHMZIOF4O8D6&rnd=PKTW

Herzlichen Dank, beste Grüße und schönes Wochenende

Answer 1

Der CSS-Code, welcher aktuell die Farbe festlegt ist folgender:

div.print table.question th.separateR,
div.print table.question td.separateR,
div.s2sepV,
div.s2options.s2horizontal > div.s2separator {
    border-left: 2px solid #CCCCCC;
}

Auf Ihrer Seite ist aktuell nur die Klasse div.s2sepV aktiv. Sie könnten also im Layout in der HTML-Vorlage im <style>-Bereich z.B. ergänzen:

div.s2sepV {
  border-color: #ED6E00;
}

Comments

Hallo,

besten Dank für die rasche Antwort. Leider konnte ich in der HTML-Vorlagedie Klasse "div.s2sepV" nicht finden. Stattdessen findet sich dort die Klasse div.s2t - ich vermute nun, dass ich da Änderungen vornehmen muss, weiß aber nicht, welche.

Hier der entsprechende Auszug aus der HTML-Vorlage:

div.s2t-outer {
    max-width: %width%; min-width: 320px; margin: 16px auto; box-sizing: border-box;
    display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    border-left: 2px solid %color.4%;
    border-right: 2px solid %color.4%;
}
div.s2t-left {
  width: 200px;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  background-color: #EEEEEE; max-width: 240px;
  border-right: 1px solid %color.4%; padding: 24px 10px; box-sizing: border-box;
}
div.s2t-content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    background-color: #FFFFFF; padding: 24px 30px;
}

Es wäre super, wenn Sie mir weiterhelfen könnten!

Herzlichen Dank und beste Grüße

---

> Leider konnte ich in der HTML-Vorlagedie Klasse "div.s2sepV" nicht finden.

Sollen Sie auch nicht ... das ist automatisch generierter Code. Wenn Sie ihn finden wollten, müssten Sie hier schauen: https://survey.unibw.de/view/css-464-QNE8DSHY-L.css

Nein, bitte ergänzen Sie das, was ich als zweites geschrieben habe (die drei Zeilen) einfach im Layout.

---

Hallo,

wiederum besten Dank für das schnelle Feedback.

Ich habe die Ergänzung vorgenommen - leider ohne das gewünschte Ergebnis zu erhalten, d.h. die Trennlinie ist immer noch nicht sichtbar.

Woran kann das liegen?

Beste Grüße

---

Es könnte daran liegen, dass ich oben versehentlich zwei Doppelkreuze zur Definition der Farbe geschrieben hatte (##ED6E00). Nun ist das korrigiert:

div.s2sepV {
  border-color: #ED6E00;
}

---

Perfekt - nun hat es funktioniert und sieht sehr schön aus!

Herzlichen Dank für den - wie immer großartigen - Support!