fivestar - widgets
Eingetragen von ronald (3783)am 23.10.2015 - 13:51 Uhr in
Wer hat tiefere Erfahrung mit fivestar?
Insbesondere interessiert mich der widget renderer.
Es werden diverse widget templates mitgeliefert. Ich will aber ein eigenes haben, das völlig andere Symbole verwendet.
Wenn ich jetzt genauer wüßte, wie ich die Struktur dafür anlegen muss, ginge es erheblich schneller.
Natürlich kann ich versuchen den Sourcecode zu analysieren. Aber vielleicht weiß jemand etwas, dass ich mir dies ersparen kann?
- Anmelden oder Registrieren um Kommentare zu schreiben
Hab ich vor Kurzem gerade
am 25.10.2015 - 19:01 Uhr
Hab ich vor Kurzem gerade gemacht:
Ich hab ein eigenes Modul angelegt und im Modul folgenden Hook geschrieben:
<?php
/**
* Implementation of hook_fivestar_widgets().
*
* This hook allows other modules to create additional custom widgets for
* the fivestar module.
*
* @return array
* An array of key => value pairs suitable for inclusion as the #options in a
* select or radios form element. Each key must be the location of a css
* file for a fivestar widget. Each value should be the name of the widget.
*
* @see fivestar_fivestar_widgets()
*/
function myfivestarmodule_fivestar_widgets() {
// Letting fivestar know about my Cool and Awesome Stars.
$widgets = array(
'sites/default/modules/myfivestarmodule/flags.css' => 'Flags',
);
return $widgets;
}
Weiterhin dann die flags.css Datei im Modulordner angelegt
.fivestar-flags div.fivestar-widget-static .star {
background-image: url(flag.png);
}
.fivestar-flags div.fivestar-widget-static .star span.on {
background-image: url(flag.png);
}
.fivestar-flags div.fivestar-widget-static .star span.off {
background-image: url(flag.png);
}
/* Javascript Star Version */
.fivestar-flags div.fivestar-widget .cancel,
.fivestar-flags div.fivestar-widget .cancel a {
background-image: url(cancel.png);
}
.fivestar-flags div.fivestar-widget .star,
.fivestar-flags div.fivestar-widget .star a {
background-image: url(flag.png);
}
.fivestar-flags div.fivestar-widget div.hover a,
.fivestar-flags div.rating div a:hover {
background-image: url(flag.png);
}
Man beachte, dass sich in der css-Datei der Name des Widget (in diesem Fall also Flags) wiederspiegelt (.fivestar-flags). Und als Besonderheit wenn der Name ein Leerzeichen hat z. B. "Nice Flags" würde es im CSS nur .fivestar-nice heißen.
Und dann noch eine flag.png (ergibt sich aus der CSS-Datei) und cancel.png in den Ordner kopieren. Die flag.png ist 16x48 Pixel und enthält dreimal das Icon (16x16 Pixel), für die Zustände Off, On, Hover (in dieser Reihenfolge von oben nach unten). cancel.png ist 16x32 mit Off und Hover. Wenn man gar keine cancel-Funktion will kann man auch einfach die Default cancel.png reinkopieren.
klingt nicht schlecht
am 24.10.2015 - 10:06 Uhr
muss ich ausprobieren.
Leider muss es noch ein bisschen warten, weil etwas anderes, wichtigers, dazwischen gekommen ist.
So ist das manchmal im Projektgeschäft ;-)
Grüße
Ronald