De Eric Roumégou

Comment personnaliser les styles que l'on utilise dans l'éditeur Webdev de façon dynamique ?

Un grand merci à Pat Biker qui m'a permis de mettre au point cette solution.

WebDev utilise ses propres fichiers styles qu'il conserve dans un fichier wws avant de générer un fichier classique css.
Mais pour autant, on aimerait pouvoir dynamiquement changer le style d'un lien, d'un bouton et ceci en fonction du choix d'un template, de l'interprétation d'un paramètre etc ...

C'est le genre de choses que l'on a l'habitude de résoudre avec d'autres langages en jouant sur la présence de ces fichiers de styles dans certain répertoires.

Ce petit how to va vous donner une technique pour le faire avec WebDev.

 

1 - Tout d'abord, vous créez votre style avec l'éditeur WebDev

Ici je crée un bouton BtnPortail que je veux en Verdana 10 blanc sur fond orange. Voilà ce que je pourrais retrouver concernant ce style dans le fichier css monprojet.css que génèrera WebDev. 

.BtnPortail{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;font-weight:bold;color:#FFFFFF;text-align:center;background-attachment:fixed;background-color:#FF6633;background-repeat:no-repeat;}

2 - Placer un fichier style avant le style par défaut du projet.

ceci se fait par Projet/Description du projet onglet style, puis bouton feuille de style css libre.

Okay pour mettre un fichier css donné me direz vous, mais comment faire pour que le choix de ce fichier soit dynamique ?

Après avoir cliqué sur le bouton Ajouter, vous saisissez une variable de substitution au lieu d'un fichier réel. Comme cela n'est pas contrôlé, Webdev l'accepte et acceptera ensuite sa substitution automatique.

3 - Mettre un fichier dynamique

Ensuite pour aller chercher le bon nom du fichier css, c'est très simple et vous avez l'embarras du choix. Par exemple, je vais lire un fichier .ini grâce à un paramètre passé au site.

// Y'a-t-il une feuille de style spécifique pour ce dossier ?

persocss=INILit(gOpe_IdAlpha,"CSS","pardefaut",gFicIni)

Rmq : il est conseillé d'avoir un fichier css par défaut (ex pardefaut.css) dans le cas d'absence de style spécifique.

Voilà qui ouvre de bonnes possibilités pour rendre plus dynamique le choix des styles.

4 - Il suffit maintenant que vos fichiers personnalisés se trouvent dans le répertoire Monprojet_WEB

et vous pouvez bien sûr utiliser les outils de votre choix pour saisir vos feuilles de styles.