User login

Home ›
 Overriding Fivestar star images with just CSS (and, well, graphics)

Overriding Fivestar star images with just CSS (and, well, graphics)

Submitted by Benjamin Melançon on March 21, 2008 - 2:13am
in

Copy this (from fivestar's CSS) into your theme's styles.css file, and change the background url to match your own graphic file:

div.fivestar-widget-static .star {
  float: left;
  width: 17px;
  height: 15px;
  overflow: hidden;
  text-indent: -999em;
  background: url(widgets/default/star.gif) no-repeat 0 0px;
}

div.fivestar-widget-static .star span.on {
  display: block;
  width: 100%;
  height: 100%;
  background: url(widgets/default/star.gif) no-repeat 0 -32px;
}

div.fivestar-widget-static .star span.off {
  display: block;
  width: 100%;
  height: 100%;
  background: url(widgets/default/star.gif) no-repeat 0 0px;
}

div.fivestar-widget .star, div.fivestar-widget .star a {
  background: url(widgets/default/star.gif) no-repeat 0 0px;
}

Resolution

Comments

Where is the second star?

Submitted by Visitor on May 24, 2008 - 4:45pm.

Where is the second star? Should read background-position:-16px somewhere...no?

div.fivestar-widget div.on a

Submitted by Visitor on May 24, 2008 - 4:46pm.

div.fivestar-widget div.on a {background -16px

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.