Hallo,

ich nutze LimeSurvey Version 3.15.5+181115 und arbeite mit einer Erweiterung der Fruity Vorlage. Ich würde die Farben der Vorlage gerne an unser Corporate Design anpassen und wenn möglich, das grün an sämtlichen Stellen durch einen unserer Farbwerte ersetzen (d.h. Fortschritttsbalken, Schaltflächen, Radiobuttons, etc.).
Ist es möglich, dies über CSS auf einen Schlag zu tun oder müsste ich alle Elemente einzeln ausfindig machen und ändern?
Sowohl für die Variante "auf einen Schlag" als auch für das schrittweise Vorgehen, wäre ich für Hinweise dankbar, wie hier vorzugehen ist.

Vielen Dank im Voraus und viele Grüße
Natascha

Hallo, Natascha,

es gibt wie üblich ein "Jein".

1. Da Du an Euer spezielles Corporate Design anpassen willst, reicht eine einfache Variation des "grün" wohl nicht aus.

Diese Variationen ließen sich allerdings auch anpassen.
Sind in "themes/admin/[theme]/lime-admin-colors.css"

2. Gerade beim Basistheme "fruity" hast Du viele Möglichkeiten, in den "Vorlage-Optionen" Dinge zu ändern.
Allerdings ist dies an die spezielle Studie gebunden.


3. Und ansonsten, wirklich nur

• Theme erweitern
• Händisch anpassen

Dies ist aber gar nicht so problematisch, da ja meist nur eine Farbe in eine andere geändert wird.
Also könntest Du alle Klassen, die irgendwie involviert sind, von theme.css nach custom.css kopieren.
Da viele Farben von bootstrap kommen, müssen diese Deine neuen Farben hinzugefügt werden.
Aber das kann man ganz gut "pasten".
Auf "einen Schlag" würde hier ja so etwas bedeuten wie "Suchen&Ersetzen". Ist auch - bei einem von einem Basistheme abgeleiteten weniger - möglich.
Ich mache es immer so.
Ich habe mir ein Theme gebaut, und mit Suchen&Ersetzen kann ich dann die jeweiligen Farben schnell ändern.


4. Moderne Browser verstehen ein css, welches "Variablen" enthält.
So etwas:
Und dann:
Wer nicht? Internet Explorer, klar.

Bis dann
Joffm

Lieber Joffm,
vielen Dank für die schnelle Rückmeldung.
Leider muss ich gestehen, dass ich mich mit den verschiedenen Stellschrauben, die Limesurvey inzwischen bietet noch nicht so gut zurecht finde. Ich habe zuletzt vor 2 Jahren mit dem alten Editor gearbeitet und tue mich noch schwer mit der Umstellung - auch wenn es sich allgemein sicherlich um eine Vereinfachung handelt.

Die Anpassungen über die "einfache Option" hatte ich bereits gefunden und ausprobiert. Das hat auch für die Schriftfarbe gut funktioniert.

Und auch die Fruity Variation habe ich getestet. Die Varianten passen aber farblich nicht so optimal zu unserem CD, deshalb würde ich gerne manuell nachsteuern, zumindest was die zentralen Stellen wie Weiter-Button und Fortschrittsbalken betrifft.

Könntest du mir noch eine weitere Hilfestellung geben, was die Vorgehensweise betrifft? Vielleicht am Beispiel des Fortschrittbalkens. Muss ich nur im custom.css arbeiten oder muss ich auch an twig Veränderungen vornehmen? Mir ist die Vorgehensweise leider wegen meiner nur rudimentären html und css-Kenntnisse nicht wirklich klar.

Für jegliche weitere Hilfe wäre ich sehr dankbar! Wenn die Anpassungen nur für eine Studie gelten und nicht als allgemeine Vorlage umsetzbar sind, wäre das nicht so tragisch.

Besten Dank im Voraus und viele Grüße,
Natascha

Hallo, Natascha,
nein Du musst nicht mit den ".twig" Dateien arbeiten.
Einfach ein Theme erweitern, und die "custom.css" benutzen.

Ich empfehle immer ein Webdevelopment-Tool, das ja in jedem modernen Browser enthalten ist.
Damit untersucht man dann die Seite.
Zum Beispiel hier im Chrome-Browser:


Wie Du vielleicht siehst, ist hier die Hintergrundfarbe des Buttons schon in der custom.css geändert, nämlich von #263238 in #95A5A6.
Ändern wir einmal hier die Hintergrundfarbe, so gibt es:


Wenn die Änderung gefällt, weißt Du, dass in die "custom.css" hinzuzufügen ist:
.btn-primary {background-color: mediumvioletred;}

Zum Beispiel hier ein paar Klassen:
/* ProgressBar */
.progress { border-radius: 5px;}
.progress-bar { background-color: #375d81; }


/* Buttons */
.btn-primary {
background-color: #375d81;
border-color: #183152;
}
.btn-primary:hover {
background-color: #c4d7ed;
border-color: #183152;
}

.btn-primary:active,
.btn-primary.active {
background-color: #183152 !important;
border-color: #183152 !important;
}

Wie Du siehst, muss man auch die verschiedenen Zustände eines Buttons berücksichtigen:
Normal,
Fährt man mit der Maus darüber
Ist er gedrückt
Ist er gedrückt und man fährt mit der Maus darüber


Also, es ist schon ein bisschen Arbeit. Aber sie lohnt sich.
Und zusätzlich lernt man dabei auch noch die rudimentären Begriffe von css.

Viel Erfolg
Joffm

Wenn wir schon vom Anpassen des "Weiter"-Buttons sprechen...

Gibt es eine Möglichkeit, den letzten "Weiter"-Button anders zu benennen?

Wir fänden "Absenden" angebrachter.

Der letzte Button heißt "Absenden".


Er heißt nur dann "Weiter", wenn es nicht die letzte Frage ist.
Dies kann vorkommen, wenn durch eine Bedingung die letzte Frage nicht angezeigt wird.
Das kann man dann ja entsprechend umbauen, mit irgendeiner Dummy Frage am Schluss.

Joffm