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 3977 fois • Version imprimable

Note : 3.1/5 (127 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 127 utilisateurs :

  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • 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 :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • Visiteur :  
  • 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.

| [^] | Répondre
Re: par rap le Mercredi 15/04/2009 à 19:13

rap C'est une bonne idée !

| [^] | Répondre
Re: par OlivierMG le Vendredi 17/04/2009 à 09:52

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

| [^] | Répondre
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 :

| [^] | Répondre
Re: par rap le Mardi 05/05/2009 à 18:57

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

| [^] | Répondre
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.

| [^] | Répondre
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).

| [^] | Répondre
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).

| [^] | Répondre

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

Discussions actives (+ commentaire)

Ailleurs sur ViaBloga

Derniers weblogs mis à jour :

21:11 - La ballade d'un tête en l'air
19:02 - P'tit truc
15:36 - Les Amis de Kervoyal
09:01 - Recettes de Cuisine - le blog
10:30 -
09:03 - Voleur d'âme
12:28 - Photos Promenade Numérique
16:14 - Les ciné-conseils de Laurent
03:32 - Les Kelloucq en voyage
17:15 - GRASSE A TOUS

Toutes les mises à jour

Archives par mois