Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Hallo Frank,

soweit ich weiß sind diese Checkboxen - wie übrigens auch die Radio Buttons - in ihrem Aussehen an den jeweils verwendeten Browser gebunden -Gleiches gilt für die horizontalen und vertikalen Bildlaufleisten. Ein direktes Eingreifen ins Erscheinungsbild dieser Elemente scheint also nicht möglich.

Allerdings bin ich verschiedentlich auf Websites gestoßen, auf welchen statt der Standardversionen eigene Grafiken Verwendung fanden, was natürlich stylisch großartig aussehen und einer Seite das I-Tüpfelchen aufsetzen kann.

In unserem Fall ist so ein Unterfangen selbstverständlich mit einem Template-Eingriff verbunden, und zwar im Template-Element "Neuen Beitrag schreiben - Umfrage anhängen" (Business). Da müssten irgendwo eindeutige Einträge zu finden sein, dass an betreffender Stelle Checkboxen ausgegeben werden sollen.

Wenn dort die korrekte Anweisung für eine darüber zu legende Grafik eingetragen wird, sind die Checkboxen quasi in ihrem Erscheinen gehindert - nicht aber in ihrer Funktion.

Suche mal im Netz nach diesbezüglichen Anleitungen und Lösungsansätzen (bin gerade nur über ein Tablet online). Ich bin sicher, dass du das schnell hinbekommst.

LG. Romulus

Ich habe eine Anleitung mit überdeckenden Grafiken gefunden.
http://emelpe.de/css3-checkboxen-stylen/

Diese habe ich dann ein wenig angepasst und getestet.
Ich weiß aber nicht ob es mit Chrome funktioniert.
Habe hier nur den FF.

Im Beispiel wurde nur eine Grafik verwendet von der über die Pixelangaben jeweils der linke oder der rechte Teil gezeigt wird.
Man könnte es aber auch mit zwei getrennten, eigenen Grafiken lösen.

Per CSS werden die eigentlichen Checkboxen ausgeblendet.
Im Test habe ich sie aber mal eingeblendet gelassen um sehen zu können,
daß ein Klick auf eine Grafik wirklich den Status einer Checkbox verändert.
Es funktioniert.

Lange Rede, kurzer Sinn.
Hier nun was ich gemacht habe.
In Admin - Layout - Fußzeile habe ich folgendes eingefügt.

<script>
$(".checkbox").each(function(index) {
var CheckboxId = "box" + index;
$(this).attr("id", CheckboxId);
$(this).after("<label for=" + CheckboxId + "><span></span></label>");
});
</script>
 

Ich habe damit jeder Checkbox eine eigene ID verpasst und anschliessend die Labels erzeugt und zugewiesen.
Auf den Text im Label habe ich verzichtet.

In Admin - Layout - CSS habe ich folgendes eingefügt.

input[type="checkbox"] {
    display: none;
}
 
input[type="checkbox"] + label span {
    display: inline-block;
    width: 45px;
    height: 23px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url("http://emelpe.de/demos/img/checkbox_sprite.png") 1px -1px no-repeat;
    cursor: pointer;
}
 
input[type="checkbox"]:checked + label span {
    background: url("http://emelpe.de/demos/img/checkbox_sprite.png") -44px -1px no-repeat;
}
 

Hier habe ich die URL zum Beispielbild erweitert damit man das Ergebnis sofort sehen kann.
Hier meine Testumfrage:
http://einifox.xobor.de/t4f6-testumfrage.html

Und ja - wie man sieht, geht es auch ohne Plugin.
Aber mich reizt es mit dem Teil noch weiter zu experimentieren.
Und da macht es für mich mehr Sinn ein Plugin zu erstellen.

Kleiner Nachtrag:

Wenn man mehrere Antworten zulässt, so werden Kästchen (type=checkbox) dargestellt.
Wenn man nur eine Antwort zulässt, so werden Kreise (type=radio) dargestellt.
Für diesen Fall muss die CSS noch zusätzlich angepasst werden.

Ich habe mich in meinem Testforum mal weiter umgesehen.
Die neuen Formatierungen greifen natürlich bei allen Boxen und Kreisen.
Sieht ganz interessant aus :-)