S'identifier - S'inscrire - Ecrire un article - Contact

Des étoiles plus petites sur les pages de rubrique

Par rap • Suggestions • Mardi 14/04/2009 • 8 commentaires  • Lu 2351 fois • Version imprimable

Note : 3.5/5 (35 notes)


J'ai une suggestion de fonctionnalité qui ne servira pas à tout le monde mais qui reste intéressante.

On peut déjà afficher la barre de notation sur les pages de rubrique mais dès qu'on "bouleverse" l'affichage des articles pour en faire une liste (cf. mon site), la barre devient très vite encombrante.

C'est pourquoi, j'aimerais afficher les étoiles de notation en miniature et sans la possibilité de noter l'article (ba oui parce qu'on peut pas le noter si on l'a pas lu !).

En fait je voudrais afficher un truc dans ce genre :

C'est une idée piquée à Dailymotion, du coup ma page ressemblerait plus à ça :



Cette suggestion a été adoptée par 35 utilisateurs :

  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • OlivierMG :  
  • isabelle :  
  • rap :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  

Les utilisateurs qui ont voté pour cette suggestion ont voté également pour :


Commentaires

par Stephane le Mercredi 15/04/2009 à 12:07

Stephane

C'est pourquoi, j'aimerais afficher les étoiles de notation en miniature et sans la possibilité de noter l'article (ba oui parce qu'on peut pas le noter si on l'a pas lu !).

Pas bête du tout. :-) Le mieux serait d'ajouter un choix d'affichage des étoiles dans le menu présentation du contenu : petit, grand, votable ou non.


Re: par rap le Mercredi 15/04/2009 à 19:13

rap C'est une bonne idée !


Re: par OlivierMG le Vendredi 17/04/2009 à 09:52

OlivierMG  oui, très bonne suggestion ! :-)


Re: par rap le Vendredi 17/04/2009 à 11:38

rap

J'ai commencé les tests : http://www.generap.com/hiphop.shtml

Tout marche bien, la notation est impossible, mais le seul problème c'est qu'il y a 15 étoiles au lieu de 5 !

Comment réparer ça ?

Voici le code html :

<div id="rating-small"><attribute rating_bar></div>


Et le CSS :

/*  styles for the unit rater     */
#rating-small .ratingblock {
 display:block;
 padding-bottom:8px;
 margin-bottom:8px;
 }

#rating-small .loading {
 display:none;
 }
 
#rating-small .unit-rating { /* the UL */
 list-style:none;
 margin: 0px;
 padding:0px;
 height: 12px;
 position: relative;
 background: url('/images/mini-star.gif') top left repeat-x; 
 }

#rating-small .unit-rating li{
    text-indent: -90000px;
 padding:0px;
 margin:0px;
 /*\*/
 float: left;
 /* */
 }
 
#rating-small .unit-rating li a {
 display:none;
 }
 
#rating-small .unit-rating li a:hover{
 display:none;
 }

#rating-small .unit-rating a.r1-unit{left: 0px;}
#rating-small .unit-rating a.r1-unit:hover{width:10px;}
#rating-small .unit-rating a.r2-unit{left:10px;}
#rating-small .unit-rating a.r2-unit:hover{width: 20px;}
#rating-small .unit-rating a.r3-unit{left: 20px;}
#rating-small .unit-rating a.r3-unit:hover{width: 30px;}
#rating-small .unit-rating a.r4-unit{left: 30px;} 
#rating-small .unit-rating a.r4-unit:hover{width: 40px;}
#rating-small .unit-rating a.r5-unit{left: 40px;}
#rating-small .unit-rating a.r5-unit:hover{width: 50px;}
#rating-small .unit-rating a.r6-unit{left: 50px;}
#rating-small .unit-rating a.r6-unit:hover{width: 60px;}
#rating-small .unit-rating a.r7-unit{left: 60px;}
#rating-small .unit-rating a.r7-unit:hover{width: 70px;}
#rating-small .unit-rating a.r8-unit{left: 70px;}
#rating-small .unit-rating a.r8-unit:hover{width: 80px;}
#rating-small .unit-rating a.r9-unit{left: 80px;}
#rating-small .unit-rating a.r9-unit:hover{width: 90px;}
#rating-small .unit-rating a.r10-unit{left: 90px;}
#rating-small .unit-rating a.r10-unit:hover{width: 100px;}

#rating-small .unit-rating li.current-rating {
 background: url('/images/mini-star.gif') left bottom;
 position: absolute;
 height: 10px;
 display: block;
 text-indent: -9000px;
 z-index:1;
 margin-top:1px;
 //margin-left:-75px;
 }

#rating-small .voted {display:none;}

#rating-small .rated_news_list li {
 padding-height:3px;
 padding-bottom:3px;
}

#rating-small .thanks {display:none;}

Et les étoiles :


Re: par rap le Mardi 05/05/2009 à 18:57

rap Serait-il possible d'avoir une réponse ?


Re: par Stephane le Mercredi 06/05/2009 à 19:36

Stephane Le problème c'est la taille des éléments auquel tes petites étoiles de background s'appliquent :

<ul id="unit_ul2741" class="unit-rating" style="width: 150px;"> <li class="current-rating" style="width: 105px;">

les 150px et 105px correspondent à des étoiles de 30px, pas de 10px. Il faut un changement du coté viabloga pour que les tailles soient calculées pour des étoiles de 10px.


Re: par rap le Jeudi 07/05/2009 à 18:23

rap Est-ce que tu pourrais le faire ? Ca serait vraiment pratique je pense de pouvoir choisir la taille de ses étoiles (petite, moyenne ou grande).


Re: par rap le Dimanche 10/05/2009 à 15:12

rap Sinon il y a une solution très simple. On met le paramètre "width=150px" dans la class "unit-rating" ; et pour le width="???px" de "current-rating", on le transforme en %.

De cette façon on peut spécifier la largeur des 5 étoiles avec un css externe grâce à

#div .unit-rating {width=80px}
Et le % s'indexe sur la valeur entrée.

Reste à savoir si on peut exprimer le "current-rating" en pourcentage sans fausser les valeurs.

Ou bien l'autre solution est de choisir la largeur des 5 étoiles dans le menu "Présentation du contenu" (ou de choisir le type d'étoiles).



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Ailleurs sur ViaBloga

Derniers weblogs mis à jour :

15:00 - L'écho de CORNECUL
14:59 - OREEAT
13:04 - 5 Bio's
12:11 -
09:15 - Voleur d'âme
08:51 - Everitouthèque
08:33 -
07:45 - Les actions citoyennes à Grez-Doiceau
00:48 - Asnières-sur-mon-blog
18:05 - Le blog d'Asnières-sur-Vègre

Toutes les mises à jour

Archives par mois