Premiers pas avec SCENARIbuilderHiérarchie de section : HelloUniverse > Stylage HTML > Modification d'un style existantModification d'un style existant
Cette partie a été volontairement simplifiée pour vous permettre de modifier un style sans avoir lu tout le reste du guide. Vous devez cependant :
- avoir récupéré le modèle avec un système de partage de fichiers (par exemple, sur un repository subversion) : Procédure sur le wiki
- avoir créé l'atelier dans SCENARIbuilder en choisissant d'utiliser le répertoire de source que vous venez de télécharger : Procédure sur le wiki
Vous partez de l'arbre à gauche, l'explorateur des items, ouvrez les dossiers, et trouvez le fichier 
.wpsdef qui identifie votre modèle et qui va servir de point de départ pour explorer le modèle.
Pour chacun des items listés, repérez les générateurs
(icône de casquette de chantier). Essayez de vous repérer par rapport au "name" de chacun des items ou par rapport au contenu pour "trouver le bon", ou demandez au modélisateur de vous expliquer lequel vous devez utiliser pour arriver à faire vos changements.
N'hésitez pas à poser vos questions sur les forums de scenari-platform.org.
Retrouvez les .doss associés au générateur (directement ou via ses template ou via l’uiFrame)
Se repérer dans les fichiers CSS
Dans le premier exemple HelloWorld, j'avais cité 2 extensions firefox pouvant être utile au "styleur". J'en donne ici des exemples plus concrets pour montrer comment les utiliser. Il n'est pas nécessaire d'utiliser les 2 simultanément, mais en maîtriser un est un gain de temps considérable pour tout "styleur" sérieux.
Source : http://www.getfirebug.com/
Firebug est spécialisé dans l'exploration des arbres d'éléments HTML (le DOM) et dans l'affichage des différentes relations d'héritages de classes CSS. Il permet d'avoir la liste de toutes les déclarations CSS qui vont avoir de l'influence sur un objet précis, et de les modifier directement pour en tester l'effet. En fonctionnalité supplémentaire, il permet par exemple de "debugguer" les javascript en affichant la ligne d'erreur et des informations relative au script.
Pour l'ouvrir, pressez Ctrl + Alt + K, puis, choisissez le bouton inspect en haut a gauche du nouveau cadre "firebug" qui vient d'apparaître et enfin cliquez sur un élément de la page.
En résultat, on peut voir l'arborescence des éléments HTML jusqu'à notre div "#topleft" qui représente l'image dans le coin en haut à gauche de l'écran, et l'ensemble des styles appliqués à cet objet dans la partie de droite.
WebDevelopper est une extension mutli-fonctions pour tout ce qui concerne le développement web. Il offre des informations assez basique sur le nom ou l'id d'un bloc sélectionné à l'écran, c'est le plus simple à utiliser. En bonus, des fonctionnalités comme par exemple passer des pages local au validator W3C en un seul clic.
Une fois installé, pressez Ctrl + Alt + F puis cliquez sur un bloc pour déclencher l'affichage d'une fenêtre d'information.
En résultat, on a tout en haut en premier titre de la boite jaune, l'ID ou la classe de la div, puis les coordonnées ou la liste des noms de styles des conteneurs de cette div.
Test du nouveau style
Pour exploiter le nouveau style vous devez :
Lancer un environement de test :
- créez un nouvel item
wsptest - et déposez-y par drag & drop le wspdef.
- Puis, lancez l'opération de compilation à l'intérieur de ce wsptest.
- créez un nouvel item
Créer un pack de modèle installable dans SCENARIchain :
- créez un nouvel item
packMake - déposez-y par drag & drop le wspdef.
- Lancez l'opération de compilation à l'intérieur de ce wsptest,
- Révélez ou téléchargez le résultat, installable dans SCENARIchain.
- créez un nouvel item
