Voici un hack pour DLE afin d'avoir une belle note comme sur youtube sans éditer le moteur. Le hack est facile à installer dans le template.
Remplace la note DLE like-dislike standard, est visuellement spectaculaire et la transforme en un look intéressant sur l'exemple d'une note Youtube. La méthode d'installation n'affecte en rien les fichiers du moteur, est entièrement compatible avec n'importe quelle version, en fait, et utilise toutes les fonctionnalités DLE standard.
Ouvrez le fichier main.tpl de votre thème cherchez</head>
et ajoutez au dessus<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/fe271d92aa.js"></script>
<script defer type="text/javascript" src="{THEME}/js/new_rating.js"></script>
Ouvrez le fichier style de votre thème et ajoutez tout en bas/*new_rating*/
.frate {height:40px; line-height:24px; width:180px; position:relative; opacity:0;
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.frate.done {opacity:1;}
.rate-data {display:none;}
.rate-plus, .rate-minus {cursor:pointer;}
.frate .fa {color:#3c0; display:inline-block; vertical-align:top; font-size: 24px; margin-right:10px;}
.rate-minus .fa {color:#f20404; position: relative;}
.frate div:hover .fa {animation: bounceRate 0.3s infinite linear; animation-direction: alternate;}
.rbar {height:6px; overflow:hidden; background-color:#f20404; border-radius:3px; position:absolute; left:0; bottom:0; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#3c0; transition:width 1s linear;}
.rate-perc {font-size: 18px; font-weight: 700;}
.rate-perc.high {color:#3c0;}
.rate-perc.low {color:#f20404;}
@keyframes bounceRate {
from {transform: translate(0,0%);}
to {transform: translate(0,-50%);}
}
Maintenant ce qui suis est une expliquation certain thème personnalisez ont ceci
[rating-type-1]
Le code rating à l'interieur
[/rating-type-1]
[rating-type-2]
Le code rating à l'interieur
[/rating-type-2]
[rating-type-3]
Le code rating à l'interieur
[/rating-type-3]
Donc suivant ce que vous avez
ajoutez dans shortsory.tpl et fullstory.tpl (si rien ne s'affiche remplacez type-1 par type-2 ou type-3)[rating-type-1]<div class="frate ignore-select" id="frate-{news-id}">
<div class="rate-plus" id="pluss-{news-id}" onclick="doRateLD('plus', '{news-id}');"><span class="fa fa-thumbs-up"></span><span class="rcount">{likes}</span></div>
<div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><span class="fa fa-thumbs-down"></span><span class="rcount">{dislikes}</span></div>
<div class="rate-data">{rating}{vote-num}</div>
</div>[/rating-type-1]
Commentaires (0)