Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Bild als Hintergrund in Bootstrap Buttons einstellen

  • Balrog
  • Balrog's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 weeks 1 day ago #264975 by Balrog
Bild als Hintergrund in Bootstrap Buttons einstellen was created by Balrog
LimeSurvey version: Cloud Version 6.5.9
Survey theme/template: fruity
==================
Hallo zusammen, 

Wir haben Limesurvey als Cloud Lösung in Verwendung, eine managed Umgebung, also ich als Umfrage "Admin" habe keinen vollen Zugang zu allen Admin Bereichen im Webportal. 
Bisher habe ich mich in den verschiedenen Foren zurecht gefunden, aber zu folgender Frage habe ich noch keine Antwort gefunden (oder vielleicht nur falsch gesucht): 
Bei einer Frage möchte ich bei zwei Bootstrap Buttons ein Hintergrundbild einfügen, also wirklich nur im Button das Bild, nicht in der Frage. Das Bild kann ich noch einfügen, aber wie stelle ich es in den Hintergrund, so dass der Button-Text drauf liegt/im Vordergrund ist und nicht alles nebeneinander? 
Möglicherweise eine einfache Einstellung und nur ich finde die Option dafür nicht oder wenn es nur per Code lösbar ist, weiß ich noch nicht, wie man es realisiert.
Screenshot kann ich nicht einfügen, weil es nicht hilft (Ein Bild und ein Text nebeneinander, die im Button Design übereinander liegen sollten). 
Zur Info noch: 
Das Webportal wird immer im Edge Browser (Version 125.0.... aktuell) geöffnet, andere Browser sind auf unserer Terminalserver nicht erlaubt, auch die Entwicklungsoptionen sind gesperrt, eigentlich so ziemlich alles gesperrt, ich kann also nur direkt in der Umfrage die Einstellungen anpassen. 

Danke im Voraus und liebe Grüße

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 weeks 1 day ago - 3 weeks 1 day ago #264985 by Joffm
Replied by Joffm on topic Bild als Hintergrund in Bootstrap Buttons einstellen
Hallo,
wie Du die Farben änderst, findest Du ja hier.
[url] forums.limesurvey.org/forum/design-issue...strap-buttons#263175 [/url]

Dann habe ich statt "background-color" einfach einmal "background-image" probiert.
Und den generischen button noch weiter "verschönt".

Kann dann so aussehen.
 

Ich habe es so gemacht. Ist sicher noch nicht der Weisheit letzter Schluss, aber für Dich sicher eine Arbeitsgrundlage.
Code:
<style type="text/css">
.mybtn .btn-primary {
    background-color:GoldenRod;
    color:red;
    height: 100px;
    font-size:28px;
    font-weight:bold;
}
  
.mybtn .btn-primary:hover {
    color: yellow !important;
}
.mybtn .btn-check:checked + .btn-primary {
    color: navy !important;
 
  }
.mybtn .bootstrap-buttons-div:nth-child(1) .btn-primary {
    background-image: url("https://www.myServer.de/userfiles/Boot001_klein.jpg");
}
.mybtn .bootstrap-buttons-div:nth-child(2) .btn-primary {
    background-image: url("https://www.myServer.de/userfiles/Boot002_klein.jpg");
}
.mybtn .bootstrap-buttons-div:nth-child(3) .btn-primary {
    background-image: url("https://www.myServer.de/userfiles/Boot003_klein.jpg");
}
</style>


Wie Du siehst, sind meine Bilder irgendwo auf meinem Server; Du wirst sie wohl in die Umfrage laden.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 weeks 1 day ago by Joffm.

Please Log in to join the conversation.

  • Balrog
  • Balrog's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 weeks 1 day ago #264987 by Balrog
Replied by Balrog on topic Bild als Hintergrund in Bootstrap Buttons einstellen
Hallo Joffm, 

danke für die schnelle Antwort und Hilfe! Es schaut schon versprechend aus, leider konnte ich es aber nicht umsetzen. Code kann ich nur direkt im Bearbeitungsfeld des Buttons einfügen, so hat es aber keine Änderung bewirkt. 
Wo du im anderen Topic über die Farbänderung schreibst, steht, dass eine neue CSS Klasse eingefügt werden sollte. Ich vermute, dass bei mir da das Problem liegt, ich weiß nicht, wo ich das machen könnte. 
Wie schon am Anfang erwähnt, habe ich nicht alle Berechtigungen im Portal. Die einzige Stelle, wo ich CSS überhaupt sehe, ist direkt in der jeweiligen Frage rechts bei den Anzeigeeinstellungen: 

 

Sollte es einen CSS Editor oder sonstiges geben, kannst du mir bitte zeigen, wo es liegt, damit ich unserem Admin weitergeben kann, was er mir freischalten sollte?

....sollte ich was komplett falsch machen, bitte um Verzeihung, ich bin noch ziemlich neu in Limesurvey...

LG
Balrog

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 weeks 1 day ago - 3 weeks 1 day ago #264988 by Joffm
Replied by Joffm on topic Bild als Hintergrund in Bootstrap Buttons einstellen
Hallo,
genau, an dieser - markierten - Stelle trägst Du die zusätzliche Klasse mybtn ein.
Dies dient nämlich dazu, dass nicht alle Buttons plötzlich umgestylt werden, sondern nur diese.

Und das css-snippet?
Das schreibst Du in den Fragentext - im Quellcode-Modus.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 weeks 1 day ago by Joffm.

Please Log in to join the conversation.

  • Balrog
  • Balrog's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 weeks 3 days ago #265086 by Balrog
Replied by Balrog on topic Bild als Hintergrund in Bootstrap Buttons einstellen
Hallo Joffm, 

Danke nochmal für die Hilfe! Meine Kollegen haben eine größere Anpassung der betroffenen Umfrage angefordert, somit konnte ich deine Empfehlungen leider nicht mehr umsetzen, habe mir aber die Antwort gemerkt und werde es bei der nächsten Gelegenheit ausprobieren!
Es wird sicher klappen, deine Bilder waren ein super Beispiel dafür!

Vielen Dank für die Bemühungen! 
LG
Balrog

Please Log in to join the conversation.

Moderators: Joffm

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source