You are here

MEMO.txt in Star Rating 8.2

Same filename and directory in other branches
  1. 8.4 css/MEMO.txt
  2. 8 css/MEMO.txt
  3. 8.3 css/MEMO.txt
1. .css file has to have the name (icon_type).css. (icon_type) is defined in the module file.


2. .css file has to have the 5 div entiries.

 div.(icon_type)(icon-color)-on    ... used for displaying the rating icon
 div.(icon_type)-off               ... used for displaying the blank icon

 These div element should define the following attributes.

 div.(icon_type)(icon_color)-on {
   float: left;  /* use 'right' for the RTL languages */
   width: ??px;  /* width of the icon */
   height: ??px; /* height of the icon */
 }

For example, in case of the icon type 'star', div.star1-on, div.star2-on ... and div.star-off should be defined in the CSS file. 


3. Additional classes

The star rating div tags has following additional classese so that users can customize the result by defining/overriding CSS style.

  even, odd
  s1, s2, s3, s4, s5  (for 5 star rating)
  s1, s2, ....... s10 (for 10 star rating)


4. Icon image

Below is the figure of icon image used. However, it's depends on the CSS file and not neccesarry to be like below.

 (0,0)           (width, 0)
  +-------------+
  |             |
  |             |
  | Blank icon  | 
  |             |
  |             |
  +-------------+ (width, height)
  |             |
  |             |
  | Normal icon |
  |  (color 1)  |
  |             |
  |             |
  +-------------+ (width, height x 2)
  |             |
  |             |
  | Normal icon |
  |  (color 2)  |
  |             |
  |             |
  +-------------+ (width, height x 3)
  |             |
         :
         :
  |             |
  +-------------+
  |             |
  |             |
  | Normal icon |
  |  (color 7)  |
  |             |
  |             |
  +-------------+

File

css/MEMO.txt
View source
  1. 1. .css file has to have the name (icon_type).css. (icon_type) is defined in the module file.
  2. 2. .css file has to have the 5 div entiries.
  3. div.(icon_type)(icon-color)-on ... used for displaying the rating icon
  4. div.(icon_type)-off ... used for displaying the blank icon
  5. These div element should define the following attributes.
  6. div.(icon_type)(icon_color)-on {
  7. float: left; /* use 'right' for the RTL languages */
  8. width: ??px; /* width of the icon */
  9. height: ??px; /* height of the icon */
  10. }
  11. For example, in case of the icon type 'star', div.star1-on, div.star2-on ... and div.star-off should be defined in the CSS file.
  12. 3. Additional classes
  13. The star rating div tags has following additional classese so that users can customize the result by defining/overriding CSS style.
  14. even, odd
  15. s1, s2, s3, s4, s5 (for 5 star rating)
  16. s1, s2, ....... s10 (for 10 star rating)
  17. 4. Icon image
  18. Below is the figure of icon image used. However, it's depends on the CSS file and not neccesarry to be like below.
  19. (0,0) (width, 0)
  20. +-------------+
  21. | |
  22. | |
  23. | Blank icon |
  24. | |
  25. | |
  26. +-------------+ (width, height)
  27. | |
  28. | |
  29. | Normal icon |
  30. | (color 1) |
  31. | |
  32. | |
  33. +-------------+ (width, height x 2)
  34. | |
  35. | |
  36. | Normal icon |
  37. | (color 2) |
  38. | |
  39. | |
  40. +-------------+ (width, height x 3)
  41. | |
  42. :
  43. :
  44. | |
  45. +-------------+
  46. | |
  47. | |
  48. | Normal icon |
  49. | (color 7) |
  50. | |
  51. | |
  52. +-------------+