[RÉGLÉ] Indicateur d'état d'avancement

[claire61]

Bonjour tout le monde

J'aimerais ajouter au titre de certains article de mon site quelque chose qui indiquerait l'état d'avancement de projets.
Voilà l'adresse de mon site :

https://www.imag-inn.be

Dans la page "programme 2012-2016" il y a des titres d'article. J'aimerais beaucoup qu'il y ai un indicateur au bout de ces titre.
Par exemple, en pourcentage, ou bien des couleurs du rouge au vert ou autre

Existerait-il une extension pour cela ?

Merci d'avance et à bientôt

[XdiZ]

Re : Indicateur d'état d'avancement

Bonjour,

A ma connaissance, il n'existe pas de barre de progression ou d'état d'avancement qui peut s'afficher en mode "liste des articles d'une catégorie".
Il faudrait développer un plugin pour cela...

Vous pouvez toujours essayer cette extension (module) : http://www.progressbar.vipartas.lt/ qui permet d'afficher une barre de progression.

Cdt

[claire61]

Re : Indicateur d'état d'avancement

Merci beaucoup!
Je vais regarder ça !!

a++

[lesergei]

Re : Indicateur d'état d'avancement

Bonjour,

Pas compatible avec Joomla 2.5.X

[claire61]

Re : Indicateur d'état d'avancement

Pas compatible avec Joomla 2.5.X

Il semble qu'il y ait une version pour joomla 1.6 qui fonctionne sur 2.5

Je sais afficher les paramètres et faire des changements mais, de toute façon, je comprends rien





A++

[lesergei]

Re : Indicateur d'état d'avancement

Il semble qu'il y ait une version pour joomla 1.6 qui fonctionne sur 2.5

J'avoue ne pas avoir essayé, je me suis fié au message sur le site des extensions Joomla.org

[XdiZ]

Re : Indicateur d'état d'avancement

Oui en effet cela fonctionne pour la version 2.5.

Autre astuce (voir cette démo), gérer manuellement la barre d'avancement en CSS3 :
1. rajouter dans votre fichier template.css :

.meter {
    background: none repeat scroll 0 0 #555555;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3) inset;
    height: 20px;
    margin: 60px 0 20px;
    padding: 10px;
    position: relative;
}
.meter > span {
    background-color: #2BC253;
    background-image: -moz-linear-gradient(center bottom , #2BC253 37%, #54F054 69%);
    border-radius: 20px 8px 8px 20px;
    box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.meter > span:after, .animate > span > span {
    animation: 2s linear 0s normal none infinite move;
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
    border-radius: 20px 8px 8px 20px;
    bottom: 0;
    content: "";
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.animate > span:after {
    display: none;
}
.orange > span {
    background-color: #F1A165;
    background-image: -moz-linear-gradient(center top , #F1A165, #F36D0A);
}
.red > span {
    background-color: #F0A3A3;
    background-image: -moz-linear-gradient(center top , #F0A3A3, #F42323);
}
.nostripes > span > span, .nostripes > span:after {
    animation: 0s ease 0s normal none 1 none;
    background-image: none;
}

2. rajouter dans votre article ce code html (voir la démo) :

<div class="meter">
	<span style="width: 25%"></span>
</div>

[claire61]

Re : Indicateur d'état d'avancement

Merci Xdiz

C'est super !!
C'est vraiment ça que je voulais et, en plus, ce n'est pas trop difficile d'utilisation.
J'ai rajouté une class "blue"
Je n'ai malheureusement pas l'animation, mais ce n'est vraiment pas grave

Merci encore 1000 fois

a++