Захотелось изменить шаблон рейтинга, сделать его более минималистичным, картинку тут не вставить, но попробую изобразить что хочу:
[(-)(0)(+)]
т.е. будет прямоугольник / овал где по краям кнопки для изменения рейтинга, а в центре рейтинг по клику на который появятся голосовавшие.
Однако посмотрев код плагина я немного испугался и забил...
Вопрос: можно ли это как то реализовать без изменения кода плагина?
Если только стилями то так:
.rcl-box-rating {
position: relative;
}а потом другие внутренние дивы двигаешь при абсолютном позиционировании
В код не смотрел. Но уверен, можно блок отменить и вывести свой, написав свою верстку
по типу 3-го сниппета
p.s. тему переношу в кастомизации
Что то отдаленно похожее сделал, но все таки это немного кривовато. буду на досуге код плагина смотреть. Вообще было бы круто если бы получилось вывести кнопку плюса, минуса и итоговой оценки через 3 функции. Или получить эти 3 параметра в массиве как то, тогда проще было бы кастомизировать.
Не претендую на истину, но на мой вкус пример который я привел выглядит лучше, чем рейтинг в одном углу, а кнопки для голосования в другом
.rcl-box-rating {
position: relative;
}а потом другие внутренние дивы двигаешь при абсолютном позиционировании
подскажите,всё таки как рейтинг засунуть между плюсом и минусом,поподробнее
.rcl-box-rating {
overflow: hidden;
clear: both;
font: 14px arial;
margin: 5px 0;
}
.rcl-box-rating a:link { /*++Twenty16++*/
border: none;
box-shadow: none;
}
.rcl-box-rating .buttons-rating{
float: right;
line-height: 1;
position: relative;
}
.rcl-box-rating .buttons-rating a > i{
font-size: 24px;
}
.rcl-box-rating .buttons-rating .rating-minus{
margin: 0 2px 0 3px;
}
.rcl-box-rating .buttons-rating .rating-plus {
float: left;
margin: 0 5px 0 0;
что нужно поменять или добавить ?
Otshelnik-Fm сказал(а)
Тот вариант, что я показал на своем скриншоте - отвратителен.
Поэтому я по нему не дам консультаций. Стыдобу такую распространять
минусы и плюсы заменил на лайки
да мне просто позиции поменять,рейтинг в центр как на вашей кртинке,как ни стараюсь не получается,помогите что поменять нужно?
В общем изыскания таковы - если делать через фильтры - то там два фильтра и они затрагивают 6 функций. Но я столкнулся с бедой - при голосовании js убивает блок (он же на его место значение рейтинга вставляет). Так вот этот блок убивается и только перезагрузка страницы позволяет увидеть как мы хотим. В общем костыль это и слишком глубоко копать приходится.
Вариант 2 - через стили. Я его не рекомендую использовать никому - т.к. костыль тот еще, хоть и меньший. И данный ниже css я поддерживать не буду.
Вот что вышло:
ВНИМАНИЕ! Этот css я даю в образовательных целях. Не применяйте его на рабочих проектах. И ответственности за его использование вами я не несу. Как впрочем и не буду разбирать вопросы - "съехало", "не работает", "не там где надо".
В общем as is.
.rcl-box-rating {
min-height: 30px;
overflow: visible;
position: relative;
}
.rcl-box-rating .buttons-rating {
align-items: center;
border: 1px solid #ddd;
display: flex;
height: 35px;
justify-content: space-between;
overflow: hidden;
padding: 0;
width: 105px;
}
.rcl-box-rating .buttons-rating a {
padding: 0 5px;
}
.rcl-box-rating .buttons-rating .fa-plus-square-o::before {
content: "f067";
font-family: fontawesome;
}
.rcl-box-rating .buttons-rating .fa-minus-square-o::before {
content: "f068";
font-family: fontawesome;
}
.rcl-box-rating .buttons-rating a.rating-plus {
float: right;
}
/*двигаем блок*/
.rcl-box-rating .rating-value-block {
position: absolute;
right: 5px;
top: 8px;
z-index: 3;
}
.rating-title {
display: none;
}
.rating-value-block .rating-value.rating-null {
position: absolute;
right: 45px;
}
.rcl-box-rating .buttons-rating a.rating-cancel::after {
align-items: center;
content: "удалить";
display: flex;
font-size: 12px;
height: 30px;
padding: 5px;
}
.rcl-box-rating .buttons-rating a.rating-cancel {
font-size: 0;
margin: 0;
padding: 0;
}
.votes-window {
min-width: 205px;
right: -10px;
}
.votes-window .close {
right: -3px;
}
