Drupal example source code file (craft.css)

This example Drupal source code file (craft.css) is included in the DevDaily.com "Drupal Source Code Warehouse" project. The intent of this project is to help you "Learn Drupal by Example".

PHP - Drupal tags/keywords

31px, 9px, background-image, background-position, star, star-10, star-2, star-3, star-4, star-5, star-8, width

The craft.css Drupal example source code

/**
 * Settings for all stars.
 */
div.fivestar-widget-static .star,
div.fivestar-widget .star,
div.fivestar-widget div.on a {
  height: 31px;
}

div.fivestar-widget .star,
div.fivestar-widget .star a,
div.fivestar-widget-static .star,
div.fivestar-widget-static .star span.on {
  background: no-repeat 0 -62px;
}

/**
 * Unique default setting for each star.
 */
div.fivestar-widget .star-1,
div.fivestar-widget .star-1 a,
div.fivestar-widget-static .star-1,
div.fivestar-widget-static .star-1 span.on {
  width: 8px;
  background-image: url(craft-01.png);
}
div.fivestar-widget .star-2,
div.fivestar-widget .star-2 a,
div.fivestar-widget-static .star-2,
div.fivestar-widget-static .star-2 span.on {
  width: 9px;
  background-image: url(craft-02.png);
}
div.fivestar-widget .star-3,
div.fivestar-widget .star-3 a,
div.fivestar-widget-static .star-3,
div.fivestar-widget-static .star-3 span.on {
  width: 9px;
  background-image: url(craft-03.png);
}
div.fivestar-widget .star-4,
div.fivestar-widget .star-4 a,
div.fivestar-widget-static .star-4,
div.fivestar-widget-static .star-4 span.on {
  width: 10px;
  background-image: url(craft-04.png);
}
div.fivestar-widget .star-5,
div.fivestar-widget .star-5 a,
div.fivestar-widget-static .star-5,
div.fivestar-widget-static .star-5 span.on {
  width: 10px;
  background-image: url(craft-05.png);
}
div.fivestar-widget .star-6,
div.fivestar-widget .star-6 a,
div.fivestar-widget-static .star-6,
div.fivestar-widget-static .star-6 span.on {
  width: 12px;
  background-image: url(craft-06.png);
}
div.fivestar-widget .star-7,
div.fivestar-widget .star-7 a,
div.fivestar-widget-static .star-7,
div.fivestar-widget-static .star-7 span.on {
  width: 15px;
  background-image: url(craft-07.png);
}
div.fivestar-widget .star-8,
div.fivestar-widget .star-8 a,
div.fivestar-widget-static .star-8,
div.fivestar-widget-static .star-8 span.on {
  width: 16px;
  background-image: url(craft-08.png);
}
div.fivestar-widget .star-9,
div.fivestar-widget .star-9 a,
div.fivestar-widget-static .star-9,
div.fivestar-widget-static .star-9 span.on {
  width: 22px;
  background-image: url(craft-09.png);
}
div.fivestar-widget .star-10,
div.fivestar-widget .star-10 a,
div.fivestar-widget-static .star-10,
div.fivestar-widget-static .star-10 span.on {
  width: 27px;
  background-image: url(craft-10.png);
}

/**
 * Some specific settings for the 5-star count version.
 */
div.fivestar-widget-5 .star-2,
div.fivestar-widget-5 .star-2 a,
div.fivestar-widget-static-5 .star-2,
div.fivestar-widget-static-5 .star-2 span.on {
  width: 9px;
  background-image: url(craft-03.png);
}
div.fivestar-widget-5 .star-3,
div.fivestar-widget-5 .star-3 a,
div.fivestar-widget-static-5 .star-3,
div.fivestar-widget-static-5 .star-3 span.on {
  width: 15px;
  background-image: url(craft-07.png);
}
div.fivestar-widget-5 .star-4,
div.fivestar-widget-5 .star-4 a,
div.fivestar-widget-static-5 .star-4,
div.fivestar-widget-static-5 .star-4 span.on {
  width: 16px;
  background-image: url(craft-08.png);
}
div.fivestar-widget-5 .star-5,
div.fivestar-widget-5 .star-5 a,
div.fivestar-widget-static-5 .star-5,
div.fivestar-widget-static-5 .star-5 span.on {
  width: 27px;
  background-image: url(craft-10.png);
}


/**
 * Dynamic rollovers.
 */
div.fivestar-widget-static .star span.on,
div.fivestar-widget-static .star span.on a,
div.fivestar-widget div.on a {
  background-position: 0 0;
}
div.fivestar-widget div.hover a,
div.rating div a:hover {
  background-position: 0 -31px;
}
div.fivestar-widget-static .star span.off {
  background-position: 0 -62px;
}

/**
 * Cancel button.
 */
div.fivestar-widget .cancel,
div.fivestar-widget .cancel a {
  width: 9px;
  height: 31px;
  background: url(craft-cancel.png) no-repeat 0 0;
}
div.fivestar-widget .cancel a:hover {
  width: 9px;
  height: 31px;
  background-position: 0 -31px;
}