Bonjour,
Avec Styler, Il est possible de personnaliser les éléments (Attention, Définition, Conseil, …) dans une certaine mesure, à savoir :
_changer la couleur de fond
_changer la couleur de police
_…
Mais,
Je n’arrive pas à changer le « nom de titre » de l’élément,
par exemple :
transformer « Attention » en « Propriété »
Cela est-il possible uniquement avec styler ? ou bien faut-il aller jusqu’à utiliser Scenari Builder ?
Cordialement.
Bonjour
La façon la plus propre serait de passer par ScenariBuilder. Cela dit, si vous ne connaissez pas Builder, pour une modification simple de ce type, vous pouvez passer aussi par le skin.js.
Avec un js de ce type :
scOnLoads[scOnLoads.length] = {
onLoad = function() {
scPaLib.findNodes("des:.warning/des:i.type/chi:span").forEach(function (pTag) {
pTag.innerHTML = "Propriété";
})
}
}
Le code n’a pas été testé …
Cordialement,
Nicolas
Bonjour,
merci pour la réponse.
Le code ci-dessus ne fonctionne pas,
mais, j’ai trouvé une solution fonctionnelle dans la page ci-dessous :
https://forums.scenari.org/t/mise-en-forme-des-balises-pedagogiques-evolution/622/16
il suffit d’ajouter dans le fichier skin.js depuis Styler le code suivant :
var maBalise = document.getElementsByClassName(« warning pBk »);
for (var n=0; n<maBalise.length; n++) {
var typeBalise = document.getElementsByClassName(« type »);
for(var i=0; i<typeBalise.length;i++){
typeBalise[i].innerHTML=typeBalise[i].innerHTML.replace(/Attention/g, ‹ Propriété ›);
}
}
Ce qui a pour effet de remplacer : Attention par Propriété.
Merci encore.
Cordialement
Tant mieux si cela fonctionne.
Après réflexion et un petit test rapide juste mettre dans le skin.js
scPaLib.findNodes("des:.warning/des:i.type/chi:span").forEach(function (pTag) {
pTag.innerHTML = "Propriété";
})
Devrait fonctionner aussi mais l’important est que cela marche pour vous …
Il y a encore plus simple, en pur css. Par exemple pour mettre « toto » à la place de « définition » :
.def_ti span i span{
display:none
}
.def_ti span i:after{
content:« toto »
}
Effectivement 
J’y avais même pas pensé !
Un détail qui peut avoir son importance : pour des questions de performance et d’économie, privilégier le sélecteur > (Child combinator - CSS: Cascading Style Sheets | MDN) plutôt que l’espace (Descendant combinator - CSS: Cascading Style Sheets | MDN)
.def_ti > span > i > span {
display:none
}
.def_ti > span > i:after {
content: "Propriété"
}
Bonjour,
Merci pour les réponses.
Pour informations :
le script suivant ajouté dans skin.css ne fonctionne pas tel quel,
mais avec toto entre doubles guillemets à la place de « toto » oui.
.def_ti span i span{
display:none
}
.def_ti span i:after{
content:« toto »
}
Le script suivant ajouté dans skin.css fonctionne presque mais il y a un problème à l’affichage pour les accents de : propriété.
(de même pour le précédent avec : propriété à la place de : toto)
.def_ti > span > i > span {
display:none
}
.def_ti > span > i:after {
content: « Propriété »
}
Merci encore.
Cordialement.
Pour le problème des accents de « Propriété », cela doit être lié à l’éditeur de texte que vous utilisez : le bloc-note de Windows peut-être ? Il encode les caractères accentué dans un format historique (iso-88591). Le fichier css doit être édité avec un « vrai » éditeur qui enregistre le fichier en UTF-8. Vous n’aurez alors plus de problème. Si vous êtes sur Windows, une application comme « notepad++ » le fera très bien.
Remarque coté accessiblité : l’insertion des pseudo éléments via after ou before n’est actuellement pas restitué par la majorité des trio OS - navigateurs - technologies d’assistances. Ce contenu n’est donc pas appréhendable en terme d’accessibilité numérique. Bien s’assurer qu’il s’agit d’un contenu non informatif et non essentiel à la compréhension du contenu.
Cf F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the 'content' property in CSS | WAI | W3C
Bonne journée
Oui en effet, pardon, c’est des " qu’il faut mettre, pas des «. Le copier-coller depuis l’inspecteur de FF les a transformé.
Parcontre c’est dans skin.css qu’il faut l’ajouter, pas skin.js.
Bonjour,
En effet, c’est bien dans skin.css qu’il faut entrer les deux scripts précédents (j’ai modifié dans le message).
Pour les accents,
J’utilise l’éditeur « SciTe » sous linux, et même avec l’enregistrement en UTF-8 (avec ou sans BOM) , il y a toujours un problème d’accents.
Cordialement