Avoir un forum "Annonces" visuellement différent des autres forums

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,
Nombre de réponses : 10
Merci pour cette astuce.

Du coup, j'ai essayé de "hacker" le CSS de façon à faire apparaître l'icône de mon choix en remplacement de l'icône normale de forum.

J'ai trouvé le code suivant qui fonctionne avec mon image de remplacement (24 x 24px) :
#section-0 .forum:first-child img.activityicon  {
object-position: -99999px 99999px;
background: url() no-repeat left;
}
L'idée est d'écarter l'icône suffisamment de façon à faire apparaître en image de background l'icône de remplacement.
Dites-moi si vous avez une solution plus orthodoxe.


Patrick
Moyenne des évaluations  -
En réponse à Patrick Viney

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Erwan Gallenne,
Avatar Développeurs de plugins

Bonjour Patrick,

Peux tu nous faire une copie d'écran de ce que tu souhaites ?

Erwan

Moyenne des évaluations  -
En réponse à Erwan Gallenne

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,

En fait, le résultat que je veux est bien atteint avec le code que j'ai indiqué ci-dessus (sauf que je constate qu'il ne fonctionne pas avec Internet Explorer) :

Du fait que le forum Annonces est une activité particulière (Il apparaît par défaut sur tous les cours / les étudiants ne peuvent pas l'utiliser comme forum : cf aussi cette discussion), je voulais le distinguer visuellement des autres activités forums. D'où ce changement d'icône souhaité (qui garde la même forme mais avec une couleur différente).

Moyenne des évaluations  -
En réponse à Patrick Viney

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Sébastien Mehr,
Avatar Développeurs Avatar Testeurs

Bonjour,

J'avais trouvé 2 solutions pour remplacer une image en CSS, la première qui est la plus simple est celle-ci :

http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css#answer-11484688

Le problème c'est qu'elle ne fonctionne pas sous Firefox et IE incertain

La deuxième est celle-ci :

https://css-tricks.com/replace-the-image-in-an-img-with-css/

Elle est, en revanche, plus "intrusive" que la première car elle modifie la propriété display de l'image. Il faudra donc bien veiller à ce qu'elle ne génère pas d'effets indésirables sur l'affichage globale du thème, que ce soit sur les différents navigateurs et sur les périphériques mobiles.


Seb

Moyenne des évaluations  -
En réponse à Sébastien Mehr

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,

J'ai fait une demande d'amélioration sur le tracker Moodle pour avoir une icône de forum Annonces visuellement différente des autres forums. Merci de voter pour cette demande si cela vous intéresse aussi :

https://tracker.moodle.org/browse/MDL-61510

Moyenne des évaluations  -
En réponse à Patrick Viney

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs

Salut

J'ai voté

Mais je pense que ce sera compliqué dans la mesure où, même si c'est bien distinct fonctionnellement du forum classique, ça reste le même "mod" moodle...

A voir.

Moyenne des évaluations  -
En réponse à Luiggi Sansonetti

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,

Je fais remonter ce sujet car je ne suis pas loin de mettre en prod cette petite modification de CSS facile à mettre en œuvre et d'une très bonne compatibilité :

#section-0 .forum:first-child img.activityicon{
filter: hue-rotate(320deg);
}
#section-0 .forum:first-child .activityinstance a {
    color:#da940c!important;
}


Le filtre "hue-rotate" permet de faire en CSS une rotation dans le cercle des couleurs de l'image de l'icône concernée. En mettant ce paramètre sur 320 degrés, j'obtiens ce résultat qui correspond assez bien à mes attentes.

Le seul problème qui ne pourra pas être résolu est que ce filtre ne s'applique que si le forum "Annonces" est bien tout en haut de la section 0, en tant que première activité affichée sur la page.

Qu'en pensez-vous ?

Moyenne des évaluations Utile (3)
En réponse à Patrick Viney

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Lemaire,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Bonjour Patrick,

Tu proposes une bonne piste Oui mais qui reste encore pour moi un peu trop hasardeuse. Par contre, ça m'a donné l'envie de poursuivre mes investigations dans une solution plus robuste (mais pas totalement fiable non plus).

Cela passe par un modification de code, hélas œil au beurre noir

Ainsi, en modifiant /course/renderer.php vers la ligne 788 comme suit :

        // Display link itself.
        $newssup="";
        if (($mod->name==get_string('namenews','forum')) && ($mod->modfullname==get_string('forum','forum'))) {
            $newssup=" news";
        }
        $activitylink = html_writer::empty_tag('img', array('src' => $mod->get_icon_url(),
                'class' => 'iconlarge activityicon'.$newssup, 'alt' => ' ', 'role' => 'presentation')) . $accesstext .
                html_writer::tag('span', $instancename . $altname, array('class' => 'instancename'));

Attention à l'espace nécessaire dans $newssup="⬜news"; !!!

Et en ajoutant une règle CSS spécifique du genre :

img.news {
    filter: hue-rotate(320deg);
}

On obtient ceci (quelque soit la position du Forum dans la Section et peu importe la Section) :

Capture démo

Le code peut bien sûr être amélioré... Je verrai si je mets en production. C'est tellement peu élégant que je n'oserai certainement pas suggérer à Moodle HQ une intégration officielle de cette rustine grand sourire
Mais j'ai regardé dans le code et difficile de proposer mieux. Il faudrait cibler le type de forum particulier. Je me contente de regarder le nom du forum et s'il porte le nom visé, j'ajoute une règle spécifique.

A bientôt,
Patrick

Moyenne des évaluations Utile (3)
En réponse à Patrick Lemaire

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,

Excellent, Patrick, joli hack !

Certes, ce n'est pas très élégant, mais ça pourrait faire avancer le débat. À charge ensuite aux développeurs Moodle de haut rang de trouver une solution compatible avec les exigences de codage et de fonctionnalités.

Et effectivement, ce n'est pas encore parfait, car la nouvelle classe ainsi créée n'apparaît que si le forum s'appelle bien "Annonces" en français (ou tout autre traduction correspondant bien à ce qui est dans le pack de la langue concernée).

Est-ce que tu pourrais poster ton code sur le tracker ici : https://tracker.moodle.org/browse/MDL-61510

(comme je le disais, c'est juste pour faire avancer l'idée... ou sinon, je peux le faire si tu n'assumes pas ton code ha ha grand sourire)

Par ailleurs, je vais essayer d'ouvrir un sujet sur le forum anglophone en reprenant ce qui a été mis ici.


Moyenne des évaluations  -
En réponse à Patrick Viney

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Lemaire,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

OK, tu m'as convaincu clin d’œil

C'est publié ! Ça pourrait aiguiller d'autres Administrateurs préoccupés par cette problématique qui, pour moi, me semble non neutre en matière d'ergonomie.

On verra bien la position de Moodle HQ. En tout cas, ça part d'un bon sentiment langue tirée

À suivre...
Patrick

Moyenne des évaluations  -
En réponse à Patrick Lemaire

Re: Avoir un forum "Annonces" visuellement différent des autres forums

par Patrick Viney,

Encore merci Patrick :D

Je suis tout à fait d'accord avec toi. Pour moi, il s'agit d'une amélioration substantielle de l'ergonomie des cours.

Moyenne des évaluations  -