easyComm — платный пакет для добавление в на ваш сайт блока с комментариями. Почитать более подробно о возможностях, преимуществах и поводах купить или не покупать данное дополнение на сайтах — https://docs.modx.pro/components/easycomm/ и https://modstore.pro/packages/utilities/easycomm.
Преимущества пакета из-за которых я готов его рекламировать бесплатно:)
- It just works (c)
- Настройка за несколько минут
- Если используете Bootstrap, то оформление уже готово. То есть опрятный внешний вид уже «из коробки».
- Удобный способ ответить на сообщение из админки
- Уведомления на почту админу и пользователю (в т.ч. при размещении ответа).
Мне дополнение понравилось! Рекомендую. Кстати, на этом сайте сейчас установлен именно этот пакет.
Но все таки должна быть индивидуальность (..или стандартизация)
Я люблю когда можно быстро скопировать и разместить на сайт готовый функционал. Тут представлен пример модуля для комментариев в том виде, в котором он существует сейчас на этом самом сайте. Какие-то чанки могут незначительно отличаться от оригинальных, или не отличаться вовсе. Я предпочитаю чтобы при выводе сниппета все чанки были видны, чтобы ими было легко управлять при помощи tagElementPlugin (Если вы новичок и впервые слышите об этом дополнении — не проходите мимо, оно сэкономит вам часы жизни и сделает разработку еще более счастливой).
Протестировать дополнение можно прямо на этой странице (крутите вниз).
Что необходимо для работы дополнения
- jQuery, Плагин jQuery Form
- CSS Bootstrap, хотя для представленных тут стилей будет достаточно только сетки.
- Системная настройка
emailsenderдолжна содержать существующий адрес. Туда будут приходить уведомления. Если хотите другой адрес, есть специфическая настрока у дополнения.
Вызов сниппета
<div class="review">
[[!ecForm?
&tplForm=`tpl.ecForm`
&tplFormReCaptcha=`tpl.ecForm.ReCaptcha`
&tplNewEmailManager=`tpl.ecForm.New.Email.Manager`
&tplNewEmailUser=`tpl.ecForm.New.Email.User`
&tplSuccess=`tpl.ecForm.Success`
&tplUpdateEmailUser=`tpl.ecForm.Update.Email.User`
&allowedFields=`user_name,user_email,user_contacts,subject,rating,text`
&antispamField=`address`
&requiredFields=`user_name,text`
&thread=`[[*id]]`
]]
[[!ecMessages?
&tpl=`tpl.ecMessages.Row`
&sortby=`date`
&sortdir=`DESC`
&limit=`10`
&thread=`[[*id]]`
]]
</div>
CSS
.ec-form {
margin-bottom: 50px;
margin-top: 30px;
}
.ec-input_wr{
position: relative;
margin-bottom: 20px;
}
.ec-input_wr .ec-error {
position: absolute;
font-size: 12px;
top: -8px;
right: -8px;
padding: 3px 8px;
color: #fff;
background-color: #c11313;
border-radius: 4px;
}
.ec-input_text{
width: 100%;
padding: 10px 20px;
border: 1px solid #d3c4c4;
border-radius: 3px;
outline: 0;
box-shadow: inset 0 4px 7px rgba(0, 0, 0, 0.05);
background-color: #fdfdfd;
}
.ec-input_text:focus{
box-shadow: none;
}
.ec-input_text::-webkit-input-placeholder {
color: #ccc;
}
.ec-input_text::-moz-placeholder {
color: #ccc;
}
.ec-input_text:-ms-input-placeholder {
color: #ccc;
}
.ec-input_text:-moz-placeholder {
color: #ccc;
}
.ec-rating_wr{
padding-top: 8px;
}
.ec-rating_wr label{
display: inline-block;
font-size: 16px;
font-weight: 600;
vertical-align: middle;
}
.ec-rating_wr .ec-rating{
display: inline-block;
vertical-align: middle;
}
.ec-rating-description {
float: none;
position: absolute;
top: -11px;
left: 125px;
}
.ec-action_go {
display: inline-block;
padding: 8px 17px;
color: #fff;
background-color: #32b595;
border: none;
border-radius: 5px;
outline:none;
}
.ec-form .ec-rating-stars span,
.ec-message .ec-stars span
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAoCAYAAADkDTpVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUxNEQ1QzE0MjQ3MTExRTg4MTdFOTZCQTNFN0EwRTE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUxNEQ1QzE1MjQ3MTExRTg4MTdFOTZCQTNFN0EwRTE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTE0RDVDMTIyNDcxMTFFODgxN0U5NkJBM0U3QTBFMTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTE0RDVDMTMyNDcxMTFFODgxN0U5NkJBM0U3QTBFMTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7qmMJKAAAD0klEQVR42rSWX0hTURzHd+52tSzn5qb4L9xQN1ttoaDTpltLCwZDQZEoxSQD+4sjhArqoeglSewPJD1I6YsvvtRLLz1ElCLSHygyhCAqiDCTkGrm3Ol7bXfsbjd3ZrcDP8499/zO73fu7/c753OJKnnbDGmEEMgDyOJaypRSyViToPD1oGR88vRU/fm+HVc5jqgv9L84fuOy854qhcYlU2hrNrXn5mwoNhrSi/a3mjtJ9ginmAOdaUxvKdXWiGNLSZZz+1ZdjmIO+k5s8+QaN5jEsSE7vfBQR5lXEQcIBdlZndMsxD76jqhIhT3bn0qYhCRbIWWiMyxeLYO0NI7fatW54xfYrLr6LG1aC/SWRL9ifUDeUnrntWSjo0N1w7vd+R61mpA/ZfZngtdwPBK7RW5XX+aXPi6Hwr8iXxUpTxV9NPF5Yt+hh50SB6G5zu8wnqFSoIXDNMgZRjZKcgDjt1QKNeTrdsI7xPIU+oP4xPn1Gsbab+gOQ47JVhGcjCKWdVB8uA7jT4S1eBxes0zh5A0U9/4MrlzBojCDYQrd61jTgOErpnMAJ8tnLz69i2StJHdAV85deibcS0spHTRvXX4LEs8zJFSzx1vQlupJ3uTYpm9kjb/dpvfiqzOZHQSO2qqKCjIsMvF+CXke/z4vd6P5TMBey+zA11jYxPNcepzOTSSyBiIYuhY7IYSywZPfzOygutJoidn1HLoDkOOQH5FkBgREYO6TqFdVYbAxO9BlpY2iew+5jx270I/JrBmPzAkV9AEX3/BaDsj/ZnLS1tHR4ZucnHw3NTX1Ac9NDOdDIknB4fP52g0GQ7Fery/y+/2dLBxnRmZmZqbeZDJFmWw2m50Wi0U5Jnd3d3uw+yiTdTpdYWtrq1cpB6SyshJM5mKYTIjNZvOnEqYEJkfYquLRSkpKEphcWlpaj9C1LC4uyjIZImVyf3//cG1trQc7lZSsRqPhkVhZJi8sLHwMhUK/4gtoenp6ore3V8rkmZkZMFmtEJPDQavVGs9ktYJM5hKZjLKLMJn+A5PpKpNh69hfr4rZ2dlyKA6hUHalaBxMJkdg/JXcVREtNyiAyWRvMBgEkykDkymFLphMGkTjSc8BFJcHBgbA5DATkwcHB+9hTWpMdjqdYLKagcmcxuVypc7k8vJyZiajJIVrg53JXV1dVXl5eTJMpmAyTWCy0Wg09/T0sDPZ7XY34QTLMJmAyUSGyWoet0Bzsrso2hwORwyT6RyM9iKJsdgMoJwfY06onvzVXxe7nZ3JWq02hsnEFWdcrLRxYU5kMi6+NZn8W4ABAON+QS5JOJHFAAAAAElFTkSuQmCC');
}
.ec-form .ec-rating-stars span{
width: 24px;
height: 20px;
background-position: 0 -20px;
background-repeat: no-repeat;
}
.ec-form .ec-rating-stars span.active-disabled {
background-position: 0 -20px;
}
.ec-message .ec-stars {
background: none;
width: initial;
height: initial;
zoom:0.5;
}
.ec-message .ec-stars span {
height: 20px;
}
.ec-message .ec-stars span.rating-0{width: 0;height: 0;}
.ec-message .ec-stars span.rating-1{width: 24px;}
.ec-message .ec-stars span.rating-2{width: 48px;}
.ec-message .ec-stars span.rating-3{width: 72px;}
.ec-message .ec-stars span.rating-4{width: 96px;}
.ec-message .ec-stars span.rating-5{width: 120px;}
.review .ec-message {
position: relative;
padding: 10px 20px;
background-color: #fff9ff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 10px;
border: 1px solid #eaeaea;
border-top: 1px solid #f9f9f9;
border-bottom: 1px solid #d4d4d4;
/* box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); */
}
/*
.ec-message-text{
white-space: pre-wrap;
}
*/
.ec-message .ec-message__reply {
margin-top: 20px;
background-color: #fff;
padding: 18px 24px;
border-radius: 3px;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.ec-message__reply p strong{
display: block;
margin-bottom: 10px;
color: #aa4829;
font-weight: 600;
font-size: 16px;
}
.ec-message_from {
margin-bottom: 5px;
}
.ec-message_from .ec-message__date{
color: #c2bdbd;
font-weight: normal;
}
.ec-message_from strong{
font-weight: 600;
font-size: 16px;
}
/*
.ec-message:after{
content:"";
position: absolute;
left: -6px;
top:38px;
width: 36px;
height: 31px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAfCAYAAACPvW/2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEzN0IxNjhGMjQ3NzExRThCNjdFQURCRkZFNTJDNTkxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEzN0IxNjkwMjQ3NzExRThCNjdFQURCRkZFNTJDNTkxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTM3QjE2OEQyNDc3MTFFOEI2N0VBREJGRkU1MkM1OTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTM3QjE2OEUyNDc3MTFFOEI2N0VBREJGRkU1MkM1OTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BwOitAAABqklEQVR42rRY0W2DMBBNTvyTLlAqdYB0g7JB6ARkBEboCB0hI9ANwgZkgCqkEyQb9Fw5lUHYfoevliys2Hl59+7eBVivEsft+6u0yz5/fL6m4mTCLx348sRzw3PrbtnPEQxz7sNimHXhbHeZgMyeL7VnuxWo885z59k7rEEyJpqBZ+458saEWlCdc+DIA4FRNQEyN4SMo45vfBqVCVSnCRxpBbVTx3AQhaqAOmYcFdT5wyEFoFZBnROna4gSss4qAkc60F17NCjSAkqoQYwQA73w5RXJe2INGpf2iEKxqEZACTijoCggc62QrnLyF7OMEFA7aLoQnBYh1KQSsipXEYzL3e5eQraYCynQgmKeDYr+Qx0BTo8QqpYAzXTm7ZLAaKYz5woKIerMtg1aoA7SfxarTBNX7BTShZjCqzIJo9JKF0QIBdJIVzhlAlcECTFOBZri4rttuStUog8fkYZYpgZFGjJrpeuXkMBdwYIWuCuIQ4KoVvbZLFWdIA4J8q5GKFSH2QToxPNqf3iw696CHCO3Gq5LO6dWRnjRLu+8vUh5A7KxNZQ8fgQYAEBksvnEb69TAAAAAElFTkSuQmCC');
}
*/
.ec-form > h2{
font-weight: normal;
}
.ec-form-success .alert {
background: #e6f5e9;
padding: 10px 30px;
border-radius: 4px;
margin-bottom: 25px;
font-size: 15px;
}
Чанки
tpl.ecForm
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ec-form" method="post" role="form" id="ec-form-[[+fid]]" data-fid="[[+fid]]" action="">
<h2 class="font_t2">Добавить комментарий</h2>
<input type="hidden" name="thread" value="[[+thread]]">
<div class="form-group ec-antispam">
<label for="ec-[[+antispam_field]]-[[+fid]]" class="control-label">[[%ec_fe_message_antismap]]</label>
<input type="text" name="[[+antispam_field]]" class="form-control" id="ec-[[+antispam_field]]-[[+fid]]" value="" />
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="ec-input_wr">
<input type="text" name="user_name" class="ec-input_text" id="ec-user_name-[[+fid]]" value="[[+user_name]]" placeholder="Ваше имя" />
<span class="ec-error" id="ec-user_name-error-[[+fid]]"></span>
</div>
</div>
[[-
<div class="col-xs-4">
<div class="ec-input_wr">
<input type="text" name="user_contacts" class="ec-input_text" id="ec-user_contacts-[[+fid]]" value="[[+user_contacts]]" placeholder="Телефон" />
<span class="ec-error" id="ec-user_contacts-error-[[+fid]]"></span>
</div>
</div>
<div class="col-xs-7">
<div class="ec-input_wr">
<input type="text" name="subject" class="ec-input_text" id="ec-subject-[[+fid]]" value="[[+subject]]" placeholder="Тема сообщения" />
<span class="ec-error help-block" id="ec-subject-error-[[+fid]]"></span>
</div>
</div>
]]
<div class="col-xs-12 col-sm-5">
<div class="ec-input_wr ec-rating_wr">
<label>Оцените статью</label>
<input type="hidden" name="rating" id="ec-rating-[[+fid]]" value="[[+rating]]" />
<div class="ec-rating ec-clearfix" data-storage-id="ec-rating-[[+fid]]">
<div class="ec-rating-stars">
<span data-rating="1" data-description="Ничего не понятно"></span>
<span data-rating="2" data-description="Хоть что-то"></span>
<span data-rating="3" data-description="[[%ec_fe_message_rating_3]]"></span>
<span data-rating="4" data-description="[[%ec_fe_message_rating_4]]"></span>
<span data-rating="5" data-description="Отлично!"></span>
</div>
<div class="ec-rating-description"></div>
</div>
<span class="ec-error help-block" id="ec-rating-error-[[+fid]]"></span>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="ec-input_wr">
<input type="text" name="user_email" class="ec-input_text" id="ec-user_email-[[+fid]]" value="[[+user_email]]" placeholder="Email" />
<span class="ec-error" id="ec-user_email-error-[[+fid]]"></span>
</div>
</div>
<div class="col-xs-12">
<div class="ec-input_wr">
<textarea type="text" name="text" class="ec-input_text" rows="5" id="ec-text-[[+fid]]" placeholder="Ваше сообщение (Теги MODX выводятся корректно)">[[+text]]</textarea>
<span class="ec-error help-block" id="ec-text-error-[[+fid]]"></span>
</div>
</div>
</div>
[[+recaptcha]]
<div class="ec-action_go_wr">
<input type="submit" class="ec-action_go" name="send" value="Добавить комментарий" />
</div>
</form>
<div id="ec-form-success-[[+fid]]" class="ec-form-success"></div>
tpl.ecForm.ReCaptcha
<div class="form-group">
<div class="ec-captcha" id="ec-captcha-[[+fid]]"></div>
<span class="ec-error help-block" id="ec-captcha-error-[[+fid]]"></span>
</div>
tpl.ecForm.New.Email.Manager
На сайте [[++site_url]] было оставлено новое сообщение: <br /> <br /> Автор: <span style="font-weight: bold">[[+user_name]]</span> <br/> &лектронная почта: <span style="font-weight: bold">[[+user_email]]</span> <br/> [[- Контактная информация: <span style="font-weight: bold">[[+user_contacts]]</span> <br/> <br/> Тема сообщения: <span style="font-weight: bold">[[+subject]]</span> <br/>]] Оценка: <span style="font-weight: bold">[[+rating]]</span> <br/> Текст сообщения: <br/> <br/> <div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div> <br /><br /> Сообщение было оставлено на странице <a target="_blank" href="[[~[[+resource_id]]?scheme=`full`]]">[[+resource_pagetitle]]</a> <br /> <br /> <a target="_blank" href="[[+site_manager_url]]?a=resource/update&id=[[+resource_id]]">Опубликовать или ответить на сообщение ></a>
tpl.ecForm.New.Email.User
Здравствуйте, <b>[[+user_name]]</b>! <br /> Вы оставили сообщение на сайте <b>[[++site_name]]</b> на странице <a target="_blank" href="[[~[[+resource_id]]?scheme=`full`]]">[[+resource_pagetitle]]</a>: <br /> <br /> Ваше сообщение будет опубликовано после проверки администратором. <br /> <br /> <div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div> <br /> ---------------- <br /> С уважением, [[++site_name]].
tpl.ecForm.Success
<div class="alert alert-success" role="alert">
[[%ec_fe_send_success]]
</div>
tpl.ecForm.Update.Email.User
Здравствуйте, [[+user_name]]! <br /> Вы оставляли сообщение на сайте [[++site_url]]: <br /> <br /> <div style="white-space:pre-line;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+text]]</div> <br /><br /> [[+no_reply_and_published]][[+reply_and_published]][[+reply_and_not_published]] <br /> <br /> С уважением, [[++site_name]]. [[-НЕ удаляйте HTML-комментари. Из них формируются живые плесхолдеры]] <!--ec_no_reply_and_published Ваше сообщение было опубликовано. Вы можете его просмотреть <a href="[[~[[+resource_id]]? &scheme=`full`]]#message-[[+id]]">здесь</a>. --> <!--ec_reply_and_published [[+reply_author]]<br /> <br /> <div style="white-space:pre;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+reply_text]]</div> <br /> Ваше сообщение с ответом на него опубликовано <a href="[[~[[+resource_id]]? &scheme=`full`]]#message-[[+id]]">здесь</a>. --> <!--ec_reply_and_not_published [[+reply_author]]<br /> <br /> <div style="white-space:pre;background: #f0f0f0;padding: 10px;border: solid 1px #eee;">[[+reply_text]]</div> --> <!--ec_reply_author <span style="font-weight:bold;">[[+reply_author]]</span> ответил на ваше сообщение:--> <!--ec_!reply_author На ваше сообщение дан ответ:-->
tpl.ecMessages.Row
Тут использован сниппет dateAgo
<div id="ec-[[+thread_name]]-message-[[+id]]" class="ec-message">
<p class="ec-message_from"><strong>[[+user_name]]</strong><span class="ec-message__date"> [[+date:dateAgo]]</span></p>
<div class="ec-stars">
<span class="rating-[[+rating]]"></span>
</div>
<p class="ec-message-text">[[+text]]</p>
[[+reply_text]]
</div>
[[-НЕ удаляйте HTML-комментари. Из них формируются живые плесхолдеры]]
<!--ec_reply_text <div class="ec-message__reply">[[+reply_author]]<p>[[+reply_text]]</p></div>-->
<!--ec_reply_author <p><strong>[[+reply_author]]</strong></p>-->
Отображение рейтинга
[[!ecThreadRating? &thread=`[[*id]]` &tpl=`tpl.ecThreadRating` ]]
tpl.ecThreadRating
<div class="res_rating">
<div class="base" title="Рейтинг [[+rating_simple]]">
<div class="set" style="width: [[+rating_simple_percent]]%"></div>
</div>
</div>
[[-
Доступные плейсхолдеры
[[+rating_wilson]]<br>
[[+rating_simple]]<br>
[[+rating_wilson_percent]]<br>
[[+rating_simple_percent]]<br>
[[+rating_max]]<br>
]]
CSS Для рейтинга
.res_rating .base{
height: 11px;
width: 65px;
position: relative;
background-color: #fff;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAALCAYAAAAgNOBPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkMyMkU5NEZDRTBBMTFFOEIwQ0NCMDU4NUUwNzJDNjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkMyMkU5NTBDRTBBMTFFOEIwQ0NCMDU4NUUwNzJDNjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQzIyRTk0RENFMEExMUU4QjBDQ0IwNTg1RTA3MkM2MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQzIyRTk0RUNFMEExMUU4QjBDQ0IwNTg1RTA3MkM2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkZkzdQAAAEUSURBVHjaYvz//z8DOnj27FkQkGKWkpJazUAkIEcPPe3Cp4cFh561UJqRBP+Qo4eeduHUw4QlxGKR2ElEhjLJeuhpFyE9jE+fPhUG0nxALA/EikDcD8T8UPkvQJwPxPeA+CEQfwImp7dAg0jWA3UAXewiVQ8oO6wEYmccgcgDxHOR+IeA2J5MPQx0tIskPaDsEAzVTAgcA+IAKJscPQx0tIskPYyw2gGYhOYBqUQcihcBk1k8lrxGsh562kWsHuSCsQtPiPXgECdHDz3tIkoPciB44NHgQaI4LeRopgc5EBKg9HEgtoPio1CxOBwGkaOHnnYRpYcFrTHRC8wni5HEbID5KhpIK+FpgJCqh552EaUHIMAATqfKezGX62cAAAAASUVORK5CYII=');
}
.res_rating .set{
position: absolute;
top:0;
left: 0;
height: 11px;
width: 0;
background-color: #fff;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAALCAYAAAAgNOBPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjhCRDQzNjRDRTBBMTFFOEFEOUE5MjQ1MTgwNzczNTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjhCRDQzNjVDRTBBMTFFOEFEOUE5MjQ1MTgwNzczNTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyOEJENDM2MkNFMEExMUU4QUQ5QTkyNDUxODA3NzM1NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyOEJENDM2M0NFMEExMUU4QUQ5QTkyNDUxODA3NzM1NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu0lnnYAAAESSURBVHjaYvz//z8DBpjLGAQkmRmS/69mIBaQo4eeduHRw4JDy1oozUiCd8jRQ0+7cOphwhJisUjsJCJDmXQ99LSLgB7G/3MYhIE0HxDLA7EiEPcDMT9U/gsQ5wPxPSB+CMSfgMnpLdAg0vVAHEAfu0jUA8oOK4HYGUcY8oCcjsQ/BMT2ZOphoKNdJOkBZYdgqGZC4BgQB0DZ5OhhoKNdJOlhhNcOcxnnAclEHIoXAZNZPJa8RroeetpFpB7kgrELT4j14BAnRw897SJKD3IgeODR4EGiOC3kaKYHORASoPRxILaD4qNQsTgcBpGjh552EaWHBa0x0QvMJ4uRxGyA+SoaSCvhaYCQqoeedhGlByDAADYHoZ+LMBegAAAAAElFTkSuQmCC');
}
Комментарии (1)
Не писать ответ