Like comme sur youtube

DarkLane

•

10 Mai, 2020

630 Vues

•

0 Commentaires

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.

Installation

Afficher / masquer le texte

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]

Et pour finir téléchargez le fichier rar et envoyez dans le bon thème

Les visiteurs du groupe Invités ne peuvent pas télécharger de fichiers sur le site.
Connectez-vous au site avec votre identifiant et mot de passe ou si vous êtes un nouvel utilisateur suivez le processus d'inscription sur le site.