Например у нас есть две собственные картинки звезд для рейтинга товара:- /images/redstar.gif - активная звезда
- /images/blackstar.gif - неактивная звезда
Размер звезды - 12х12 px.
Стиль стандартных системных звезд рейтинга определен в файле /published/SC/html/scripts/css/general.css.
Для того, чтобы не менять этот файл, можно просто переопределить стили, указав нужные нам файлы со звездами и размеры.
CSS | 1
2
3
4
5
6
7
8
9
10
11
12
13
| .unit-rating { background-image: url(/images/hairpro/blackstar.gif)!important; height: 12px!important; width: 60px!important; }
.unit-rating li.current-rating { background-image: url(/images/blackstar.gif)!important; width: 60px!important; height: 12px!important; }
.unit-rating li a { width: 12px!important; height: 12px!important; }
.unit-rating li a:hover { background-image: url(/images/redstar.gif)!important; }
.unit-rating a.r1-unit:hover { width: 12px!important; }
.unit-rating a.r2-unit { left: 12px!important; }
.unit-rating a.r2-unit:hover { width: 24px!important; left: 0!important; }
.unit-rating a.r3-unit { left: 24px!important;}
.unit-rating a.r3-unit:hover { width: 36px!important; left: 0!important; }
.unit-rating a.r4-unit { left: 36px!important; }
.unit-rating a.r4-unit:hover { width: 48px!important; left: 0!important; }
.unit-rating a.r5-unit { left: 48px!important; }
.unit-rating a.r5-unit:hover { width: 60px!important; left: 0!important; } |
|
|