Pure CSS3 digital rating for DLE

Introducing the Pure CSS3 Numeric Rating for DLE 10.4 hack, a new design for the standard pure CSS3 DataLife Engine rating without using images. After these simple movements, your rating will be like on the screen! The beautiful design of rating (type 3) on pure css3 or rating (TYPE 3) on pure CSS3 for DLE 10.4 or higher Dle 10.5 by 9koala.com looks pretty nice. Installing Pure CSS3 Digital Rating Hack for DLE 10.4! In the dle template, find the shortstory.tpl and fullstory.tpl files in the code 

Find:

[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="/templates/Default/images/ratingminus.png" title="Не нравится" alt="Не нравится" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="/templates/Default/images/ratingplus.png" title="Нравится" alt="Нравится" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]

Заменяем на

[rating-type-3]
<div class="mwrating" style="margin: 10px 0px 0px 0px;">    <div class="wmminus">[rating-minus]-[/rating-minus]</div>    <div class="mwrat">{rating}</div>    <div class="wmplus">[rating-plus]+[/rating-plus]</div>
</div>
[/rating-type-3]

В engine.css добавляем

/*----new raring 3-----*/

.mwrating {    display: inline-block;    width: 96px;    height: 28px;
}

.wmminus, .wmplus {    width: 22px;    height: 28px;
}

.mwrat {    width: 42px;    height: 28px;
}

.wmminus, .mwrat, .wmplus {    display: inline-block;    float: left;    text-align: center;    line-height: 28px;    position: relative;
}

.wmminus a {    transition: all 0.2s;    display: block;    position: absolute;    top: 0px;    left: 0px;    width: 22px;    height: 28px;    line-height: 28px;    text-align: center;    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);    border-top-left-radius: 3px;    border-bottom-left-radius: 3px;    border: 1px solid #D60A07;    border-right: 0px;    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);    font-family: 'Tahoma';    font-size: 24px;    font-weight: 400;    color: #fff;    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.62);
}

.wmplus a {    transition: all 0.2s;    display: block;    position: absolute;    top: 0px;    left: 0px;    width: 22px;    height: 28px;    line-height: 28px;    text-align: center;    background: linear-gradient(to bottom, #97d624 0%,#7cbc0a 100%);    border-top-right-radius: 3px;    border-bottom-right-radius: 3px;    border: 1px solid #7EBE0C;    border-left: 0px;    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);    font-family: 'Tahoma';    font-size: 18px;    font-weight: 700;    color: #fff;    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.33);
}

.wmminus a:hover, .wmplus a:hover {    text-decoration: none;    text-shadow: 0px 0px 5px #fff;
}

.wmminus a:active, .wmplus a:active {    opacity: 0.5;
}

.mwrat {    background: linear-gradient(to bottom, #F0F0F0 0%,#D5D5D5 100%);    border-top: 1px solid #DDD;    border-bottom: 1px solid #C3C3C3;    box-shadow: inset 0px 1px 0px #fff;    font-family: 'Arial';    font-weight: 600;    font-size: 14px;    text-shadow: 0px 1px 1px #fff;
}

Ready!

Attention!
In the panel for Settings >>News display settings >> you must select

Post rating
type Specify the type of rating for posts that can be posted by site visitors. The following types can be used:

Rating - This type uses a five-star rating for the publication. Visitors can rate the news from 1 to 5 and the rating is displayed as an average rating.

Only 'Like' - with this type, the visitor can set that he likes this publication (like system) and displays the number of users who liked your publication.

'Like' or 'Dislike' - with this type, visitors mark whether they like the publication or not. In this case, the total rating value is displayed, for example, +20 or -10, etc.

You need to set 'Like' or 'Dislike' , that is, the 3rd type of rating will then be displayed, the third type of rating, as in the screenshot. DataLife Engine