Aujourd'hui je vous propose un petit outil pour vous permettre de modifier votre CSS assez simplement. Je suis parti du principe que lorsque l'on n'y connait rien au CSS, ce n'est pas facile de savoir où intervenir pour apporter des modifications de base (mettre un fond, changer de couleur, mettre un curseur etc...). Vous allez désormais pouvoir choisir la question de mise en forme que vous vous posez puis la partie du blog où l'appliquer. Un petit clic sur le bouton Ajouter (qui apparaît quand vous avec sélectionné la question et son application) et la réponse vous est donnée sous forme d'une ligne CSS. De plus vous pourrez avoir quelques détails sur les valeurs des paramètres de la ligne CSS en passant la souris dessus (petit bug sous IE: les infos n'apparaissent que sur la dernière ligne). La liste des questions et emplacements s'allongera par la suite (c'est un outil expériemental). En espérant que ce gadget vous fasse penser que CSS signifie Changement Sans Soucis !!
Le code CSS ne répond pas forcément à votre question, surtout si celle-ci est complexe. Par exemple, il ne permet pas de définir la couleur des liens dans un module, pour cela c'est à vous de composer : lien dans module équivaut dans le CSS à .box a
Je veux choisir une action
dans choisir un élément

Code CSS :

---

Où placer les modifications ?

Pour mieux vous y retrouver, je vous conseille de regrouper les lignes par fonction (par ex. ce qui concerne les articles dans la partie Articles) ou de placer toutes vos modifications en fin de CSS.

Il y a deux cas de figure:

1. La ligne n'existe pas dans votre CSS: vous pouvez placer le code généré n'importe où.
2. La ligne existe déjà, vous pouvez:
   • placer le code généré après la ligne existante
   • fusionner la ligne existante et le code généré. Par exemple, si vous souhaitez mettre la couleur du texte des articles en rouge (code couleur #f00), vous obtenez le code:
     .article { color: Code_couleur}
     Vous allez insérer:
     .article { color: #fff}
     Or dans votre CSS vous trouvez une ligne .article définie comme ceci:
     .article    { margin-top:10px; padding:0px   }
     Vous allez prendre le code à l'intérieur des accolades du CSS généré et le mettre dans les accolades du css existant, en n'oubliant pas de séparer par un point-virgule :
     .article    { margin-top:10px; padding:0px; color: #fff  }