Hallo, Felix,
wie schon geschrieben: Es sind bootstrap-buttons.
Da die smileys ja klein sind, ist hier die Einstellung "12 pro Zeile".
Mit größeren, wie im zweiten Beispiel, solltest Du auf "6 pro Zeile" gehen.
Und ist es auch möglich, die Reihenfolge der Ausprägungen zu drehen, also von positiv zu negativ?
Wie Du gleich sehen wirst, ist dies doch eibnfach nur Text - wie andere Antwortoptionen. Du kannst anordnen, wie Du willst.
Und dies ist das eingefügte css.
Vorbemerkung: Ich habe eine zudätzliche Klasse "mybtn" zugefügt, damuit dieses css NUR auf diese Buttons wirkt, nicht auf alle anderen der Seite.
Daher muss in das Feld "css-Klasse" dies eingetragen werden.
Code:
<style type="text/css">
.mybtn .btn-primary {
background-color:transparent;
/* Dies musst Du wohl je nach Deinen Bildchen anpassen */
height: 70px;
width:70px;
}
/* Im Falle, dass die ausgewählte Option eine andere Farbe - statt der default-Farbe - haben soll */
.mybtn .btn-primary.active {
background-color:yellow !important;
}
/* Und jetzt werden die Bilder als Hintergrund der Buttons eingefügt */
.mybtn .bootstrap-buttons-div:nth-child(1) .btn-primary {
/* Zunächst der Pfad zum Bild */
background-image: url("https://www.mafosurvey.de/userfiles/Smileys/smile5a.png");
background-repeat: no-repeat;
/* Das Bild wird so groß, dass es den Container - den Button - ausfüllt */
background-size: contain;
}
.mybtn .bootstrap-buttons-div:nth-child(2) .btn-primary {
background-image: url("https://www.myserver.de/userfiles/Smileys/smile4a.png");
background-repeat: no-repeat;
background-size: contain;
}
.mybtn .bootstrap-buttons-div:nth-child(3) .btn-primary {
background-image: url("https://www.myserver.de/userfiles/Smileys/smile3a.png");
background-repeat: no-repeat;
background-size: contain;
}
.mybtn .bootstrap-buttons-div:nth-child(4) .btn-primary {
background-image: url("https://www.myserver.de/userfiles/Smileys/smile2a.png");
background-repeat: no-repeat;
background-size: contain;
}
.mybtn .bootstrap-buttons-div:nth-child(5) .btn-primary {
background-image: url("https://www.myserver.de/userfiles/Smileys/smile1a.png");
background-repeat: no-repeat;
background-size: contain;
}
</style>
Das ist alles.
Bei Problemen, schick den lss-Export Deines Werkes.
Bis dann
Joffm
