Modifications de CSS en questions

Publié le par Francisek

Niveaux: Confiance Privilège Premium
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
dans

Code CSS :
 
bribes 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  }

Publié dans CSS et Design

Commenter cet article

billie 27/02/2008 13:51

slt en fait je viens de découvrir ce site et jme suis créée un blog sauf que j'ai beau m'en sortir en informatique mm avec tes conseils j'y arrive pas!!!:'(!!!qd je rentre les codes ça marche pas!!!!t'as une solution ou jss un cas désespéré?!!!

christina 18/02/2008 01:23

bonsoir

j'essaye de me débrouiller, mais là j'ai fait le tour, je ne sais pas où essayer de mettre le padding pour qu'il y ait un peu de marge après ajouter un com. après les commentaires
je viens d'essayer votre aide, j'ai collé
#main2 #content {padding-bottom:30px;} mais sans aucune réaction non plus.
je vais mettre une capture d'écran en p.7 de mon blog pour montrer de quoi je parle.
et pendant qu'on y est je voudrais aussi virer la flèche blanche dans mes réponses
Merci de votre aide

Francisek 18/02/2008 23:54

­ Un truc du genre #cl_1_0 .column_content { padding-bottom:30px } devrait faire son affaire à votre padding.Pour la flèche blanche dans les réponses, elle est définie comme image de fond dans .commentMessage

gimli64 26/11/2007 22:42

au secour francisek, je me retrouve bloquer pour une manip tout simple. Je veux mettre le fond de mes articles transparent, j'entre donc background-color: transparent dans .article
et là rien ne change
je suis bien embêter car toutes les autres manips que j'ai faites avec ton magnifique outil ont fonctionnées ^^
mais que se passe-t-il ??

Francisek 05/12/2007 13:33

Le fond est peut être sur un autre élément

tje kill of dbz ^^ 26/09/2007 14:49

bonjour francisek, merci pour ton aide mais j'ai esseyer de changer de curseur , j'ai mis ce qui fallait mettre sur la CSS mais , après pour mettre l'image que l'on veut je n'en ai aucune idée ! donc si tu voudrais bien m'aider sa ne serait pas de refus ;)

Francisek 29/09/2007 15:51

En fait, ce n'est pas une image qu'il faut mettre mais un curseur.
 

poteet.pocket 08/09/2007 13:26

bjr a 1ere vu je suis le commentaire 399; waouh!!!
bref juste une question, parce que j'ai crée mon blog au mois d'aout et j'ai pas l'habitude...
est ce que je peux indiquer dans mes modif une info pour le texte ne defilant pas, (background-attachment:fixed, si j'ai tout compris à ton geniaaaalissime blog et en plus rajouter une image donc background-image...enfin bref est ce qu'il y a plusieurs background dans la case body???
merci d'avance poteet

Francisek 12/09/2007 19:54

Non, il n'y a qu'un background possible par élément.