Habillage en un seul clic

Habillage en un seul clic

par Didier Jodin,
Nombre de réponses : 15

Un post qui risque d'être un peu long, ce qui est paradoxal, vu que le but est de rendre les choses très simples...
... mais seulement une fois qu'elles sont faites !

Objectif : permettre des mises en forme

  • un peu élaborées
  • assurant une harmonisation du site
  • disponibles pour n'importe quel utilisateur lambda, en un seul clic
  • modifiables très rapidement, partout où elles se trouvent sur le site

Principe général :

  • faire une règle CSS
  • rendre cette règle disponible depuis l'éditeur TinyMCE
    (ce qui requiert Moodle 2.4 minimum)

exemples : j'en donne deux, parce qu'il y a une petite différence pour un habillage de texte et pour un habillage d'image. On imagine donc qu'on voudrait

  • un effet d'ombrage sur les images
  • un effet "loupe" sur leurs légendes

Donc passer facilement de ceci à cela :

remarques :

  • L'utilisateur Lambda ne saurait pas du tout comment faire.
  • L'utilisateur Gamma, plus avancé, saurait mettre la légende en gras, mais comme on le voit il est distrait, et l'harmonisation est rompue.
  • L'utilisateur Bêta saurait ouvrir l'éditeur pour appliquer la règle de style, mais il est feignant.
  • C'est donc Alpha (comme Administrateur !) qui va aider ces pauvres diables...
 

étapes

 commentaires

première étape :

fabriquer les règles CSS, qu'on appellera ici "ombre" pour l'image et "loupe" pour le texte.

.ombre {
margin: 18px 18px 18px 18px;
box-shadow: 0px 0px 15px #222;
}

.loupe {
box-shadow: 0px 5px 5px #a2a2a2, 0px 5px 5px #a2a2a2 inset;
font-weight: bold;
color: #000000;
padding: 6px; 5px; 5px; 5px;
margin-left: 2px;
display: inline;
}
  • Pour les règles CSS personnalisées, je conseille fortement l'utilisation d'un thème (ils sont de plus en plus nombreux) qui les enregistre dans la base de données : cela permet qu'elles soient conservées d'une mise à jour à une autre.

  • Tout ce qui est à gauche est réalisable en HTML (sauf peut-être le "padding" pour la légende), mais prendrait un temps fou à écrire à chaque fois, et il serait très laborieux de mettre tout ça à jour sur l'ensemble du site, le jour où on aurait un caprice et qu'on déciderait que désormais les légendes devraient être mises en rouge...

  • Ces commentaires ne s'adressent évidemment pas aux Alpha, qui savent tout ça, mais à ceux qui (comme moi) utilisaient peu les CSS : ça vaut le coup de s'y intéresser, et c'est moins compliqué que ça en l'air. Comme souvent, il suffit de parcourir des forums ici et là pour trouver la solution de ce qu'on cherchait.

 

deuxième étape

associer ces règles à l'éditeur TinyMCE

  1. rétablir le menu de styles, que Moodle a ôté dans l'installation par défaut
    Administration -> Plugins -> Éditeurs de texte -> Éditeur WYSIWYG et TinyMCE -> Réglages généraux
    ajouter "styleselect" à la barre d'édition


  2. "remplir" ce menu de toutes les règles qu'on veut ajouter
    Sur la même page, en bas, dans Configuration personnalisée :

    {"style_formats" : [
    {"title" : "loupe", "inline" : "span", "classes" : "loupe"},
    {"title" : "ombre", "selector" : "img", "classes" : "ombre"}
    ]}

La personnalisation de l'éditeur est très bien documentée dans les explications de Mary Cooch, ici. (Je n'invente rien dans ce post...)

Ce que j'ai eu du mal à trouver, c'est ce qui est en rouge et vert :

  1. comment déclarer une règle CSS plutôt qu'un simple style
    (intuitivement, je pensais bien à "class", mais pourquoi diable le mettre au pluriel ?)
  2. comment déclarer une règle CSS quand elle concerne une image, car ni "inline" ni "block" n'était satisfaisant.

Résultat :

 

@ Joseph : en imaginant que j'aie pris l'exemple du texte autour d'une image plutôt que ceux-ci, est-ce que j'ai gagné le concours ?
Moyenne des évaluations Utile (4)
En réponse à Didier Jodin

Re: Habillage en un seul clic

par Jérôme DEMIAUX,
Avatar Traducteurs

Bonjour,

Ou alors, pour faire encore plus simple, on utilise les étiquettes "Customlabel" ou "éléments de cours" proposés par Valéry

Voir ici et là.

Jérôme.

Moyenne des évaluations  -
En réponse à Jérôme DEMIAUX

Re: Habillage en un seul clic

par Didier Jodin,

Bonsoir Jérôme,

Ces étiquettes personnalisées de Valery ont très certainement leur utilité... mais dans un usage qui n'a à peu près rien à voir. Ce module supplémentaire permet d'adjoindre quelque chose à un contenu pour l'identifier / le commenter / le décrire..., mais pas de mettre en forme le contenu lui-même, sans rien y ajouter d'autre.

Je ne prétends pas imaginer un nouveau module (j'en serais bien incapable !), mais simplement donner un petit "tip" permettant plus de choix et de rapidité dans toutes les situations où l'éditeur apparaît. L'ajout d'une étiquette est une situation très différente. Le seul point commun, c'est que tout cela crée une harmonisation. Mais pas des mêmes choses.

Associer un style à l'éditeur n'a pas d'autre ambition que de permettre, par un seul clic, d'appliquer une mise en forme qu'on utilise souvent, mais qui est laborieuse à mettre en place. Par exemple, à chaque fois que j'utilise un tableau, je lui donne des caractéristiques (padding, bordure, couleurs, etc.) qui prennent du temps à refaire. Maintenant, non seulement j'irai beaucoup plus vite, mai je n'aurai plus à hésiter sur la nuance de bleu que j'avais prise précédemment. En quoi est-ce que l'ajout d'une étiquette me permettrait de faire ça ? Par ailleurs, dès lors qu'on veut vraiment personnaliser les étiquettes personnalisables, je ne vois pas en quoi c'est plus simple (elles reposent elles aussi sur du CSS, donc même boulot pour l'Administrateur). Et de toute façon je parlais de simplicité pour l'utilisateur : est-ce que ajouter une étiquette est vraiment plus simple que laisser l'éditeur apparaître de lui-même, à chaque fois qu'on en a besoin, puis de faire un clic ? Soyons honnête : deux clics. Quant à l'étudiant, s'il peut apprécier une mise en forme déjà disponible quand il fait un devoir ou quand il écrit dans un forum, il n'a pas vraiment besoin d'étiquette.

Les deux exemples que j'avais pris n'étaient peut-être pas les meilleurs...

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Habillage en un seul clic

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Merci Didier...

Cela mérite que l'enseignant lambda++ que je suis, expérimente cela pour son propre compte...

Si peu de code pour tant d'effet. Je découvre un nouveau monde grand sourire

Daniel

PS: Un petit pdf de ton post STP ? Avec le détail d'où on place ces codes (CSS du thème ?)  Pour pouvoir le sauvegarder et l'imprimer seul ?

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Habillage en un seul clic

par Valery Fremaux,
Avatar Développeurs de plugins

Suis d'accord avec la différence... les customlabels ont une mission d'harmonisation des contenus par des éléments standardisés, dans une optique industrielle et de formalisation des grains éditoriaux, 

la pratique que tu décris est plus légère, mais je ne pense pas qu'elle évite l'étourderie dont tu parles dans ton premier exemple, si l'étourderie est faite de ne pas mettre en forme un objet dans une édition locale, qu'est ce qui empêche l'étourderie de ne pas appliquer ton micro style partout ? 

Les Eléments de cours formalisent plus l'élément éditorial et réduisent ce risque, mais gros désavantage , les différents sous-types nécessitent un petit développement, et on ne peut pas appliquer une mise en forme en plein milieu d'un long paragraphe de contenu monolithique alors que toi tu peux...  clin d’œil 

Moyenne des évaluations  -
En réponse à Didier Jodin

Re: Habillage en un seul clic

par stéphane Rolland,

mais où saisi-t-on les règles CSS ?

.ombre {
margin: 18px 18px 18px 18px;
box-shadow: 0px 0px 15px #222;
}

.loupe {
box-shadow: 0px 5px 5px #a2a2a2, 0px 5px 5px #a2a2a2 inset;
font-weight: bold;
color: #000000;
padding: 6px; 5px; 5px; 5px;
margin-left: 2px;
display: inline;
}

Moyenne des évaluations  -
En réponse à stéphane Rolland

Re: Habillage en un seul clic

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Tiens...

J'allais justement poser la même question...

Chez moi j'ai tout mis dans "configuration personnalisée". Mais cela ne fonctionne pas.triste

code

Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: Habillage en un seul clic

par Didier Jodin,

Ben... euh... je ne sais pas pourquoi ça ne marche pas. Pour moi ça fonctionne avec n'importe quel thème admettant des règles CSS personnalisées. Lorsque je change de thème, je me contente de faire un copié-collé de tout ça.

Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: Habillage en un seul clic

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Oublié de signaler que j'ai bien activé aussi la liste déroulante "styles". Qui offre déjà un certain nombres de fonctionnalités utiles...

Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: Habillage en un seul clic

par stéphane Rolland,

c'est très bizarre lorsque j'active le stylselect, sur l'éditeur de texte il me propose bien un tas de proposition par défaut (c'est dommage d'ailleurs que l'on ne voit pas le rendu directement dans la liste déroulante) mais quand j'applique certains styles comme span 8, span 9.... alors que j'ai bien sélectionné le texte avant, et que la balise est bien notée dans le code html, il n'y a aucun impact ! (y aurait il des conflits de CSS ? j'utilise le thème essential), en revanche cela fonctionne sur les styles dont on peut d'ailleurs voir le rendu dans la liste déroulante comme les couleurs etc.... je pense que les styles qui n'ont pas de rendu dans la liste  déroulante ne sont pas opérant en fait.

Cà vous fait la même chose ?

Moyenne des évaluations  -
En réponse à Daniel Méthot

Re: Habillage en un seul clic

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Peut-être y a-t-il des espaces, des ponctuations, des sauts de lignes... qui ne correspondent pas?

J'ai tout placé comme dans ma copie d'écran dans "configuration personnalisée" des paramètres de Tiny.

Comme je n'y connais rien il y a peu de chances que j'y découvre quelque chose.

Oui j'avais pris ton exemple car la mise en relief de l'image ou l'encadrement du texte était une option de style que je trouvais pas mal.

Moyenne des évaluations  -
En réponse à stéphane Rolland

Re: Habillage en un seul clic

par Didier Jodin,

Dans Administration du site > Présentation > Thèmes > Réglages thème > (le thème qu'on utilise) > cadre de CSS personnalisée.

Précision : je vois que tu reprends l'exemple que je donnais, mais ce n'était qu'un exemple. Les mises en forme qu'on souhaite avoir disponibles et à portée de clic dans l'éditeur Tiny peuvent être n'importe quoi d'autre.

Moyenne des évaluations  -