Перейти к содержимому


Отображение Звезд Рейтинга Товаров

#звезды #рейтинг

  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 02 Ноябрь 2019 - 16:27

Добрый день. Сейчас если у товаров есть отзывы, то звезды подкрашиваются по контуру. Для того чтобы звезды закрасить полностью зайдите в Редактор шаблонов-->forall.css и найдите:

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
.ratings {font-size: 11px;line-height: 1.25;margin: 3px 0;height: 14px;}
.rating-box {display: inline-block;position: relative;vertical-align: middle;width: 95px;height: 14px;font-size: 0;line-height: 0;text-indent: -999em;overflow: hidden;}
.rating-box:before {display: block;font-family: "FontAwesome";content: "\f005\20\f005\20\f005\20\f005\20\f005";width: 95px;height: 14px;line-height: 14px;font-size: 14px;color: #dce4e9;}
.rating-box .rating {position: absolute;float: left;height: 14px;left: 0;top: 0;overflow: hidden;}
.rating-box .rating:before {display: block;font-family: "FontAwesome";content: "\f005\20\f005\20\f005\20\f005\20\f005";width: 95px;height: 14px;line-height: 14px;font-size: 14px;color: #4c1e8b;}
.rating-cancel, .star-rating {display:block;float:left;width:16px;height:14px;text-indent:-999em;cursor:pointer;background:transparent;overflow:hidden}
.rating-cancel, .rating-cancel a {background:url('{FORALL_STYLES_PATH}jquery-ui-stars/4.11/delete.gif') no-repeat 0 -16px}
.star-rating, .star-rating a {background:url('{ASSETS_IMAGES_PATH}bkg_rating.png?design=tourism') repeat-x scroll 0 100% transparent}
.rating-cancel a, .star-rating a {display:block;width:14px;height:100%;background-position:0 0px;border:0}
.star-rating-on a {background-position:0 100%;}
.star-rating-hover a {background-position:0 100%;}
.star-rating-readonly a {cursor:default !important}
.star-rating {background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */

замените на:

/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
.ratings {display: inline-block;}
.ratings:after {content: ".";display: block;clear: both;font-size: 0;height: 0;line-height: 0;overflow: hidden;}
.rating-box {width: 100px;height: 20px; display: inline-block;position: relative;background-size: 20px 20px;background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9302' width='24' height='24'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}
.rating-box .rating{height: 20px;background-size: 20px 20px;background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9302' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}
.rating-cancel, .star-rating{display:block;float:left;width:24px!important;height:24px;text-indent:-999em;cursor:pointer;background:transparent;overflow:hidden}
.star-rating, .star-rating a {background:transparent;}
.rating-cancel a, .star-rating a {display:block;width:24px;height:100%;background-position:0 0px;border:0;margin:0!important;}
.star-rating-on a {background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9302' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}
.star-rating-hover a {background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9302' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}
.star-rating-readonly a {cursor:default !important}
/* END jQuery.Rating Plugin CSS */


далее зайдите в Редактор шаблонов-->main.css и найдите:

.goodsDataOpinionAddTable .goodsDataOpinionBlock {margin-bottom: 20px;width: 100%;max-width: 600px;overflow: hidden}
.goodsDataOpinionAddTable label {display: block;margin-bottom: 10px}
.goodsDataOpinionAddTable label.invalidInput {width: 100%}
.goodsDataOpinionAddTable {margin-top: 20px}
.goodsDataOpinionAddForm.bordered .goodsDataOpinionAddTable {margin:0;padding: 20px;}
.goodsDataOpinionRating {width: 90px;margin-top: 3px;}

замените на:
.goodsDataOpinionAddTable .goodsDataOpinionBlock {margin-bottom: 20px;width: 100%;max-width: 450px; overflow: hidden;}
.goodsDataOpinionAddTable label {display: block;margin-bottom: 10px;}
.goodsDataOpinionAddTable label.invalidInput {width: 100%;}
.goodsDataOpinionAddTable {margin-top: 20px;}
.goodsDataOpinionAddForm.bordered .goodsDataOpinionAddTable {margin:0;padding: 20px;}
.goodsDataOpinionAddTable .goodsDataOpinionRating {margin-bottom: 0px;float: left;width: 100%;width:120px;height:24px;
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9302' width='24' height='24'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");}

Сообщение отредактировал metry: 09 Июнь 2020 - 10:57


#2 webcrg

webcrg

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 23 Апрель 2020 - 16:06

Не проще ли взять другую вариацию fontawesome, чем дополнительно нагружать браузер отрисовкой svg
Шаблон техно и без того лагает на слабых машинах




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных