Découvrez cette astuce de pro pour modifier votre CSS en 5 minutes

Découvrez cette astuce de pro pour modifier votre CSS en 5 minutes

On est tous confronté un jour ou l’autre à devoir modifier _même légèrement_ le design de notre site.

Vous savez, mettre les mains dans le CSS _ce code obscur et compliqué_ pour agrandir le titre de votre site, passer les liens en bleu ou centrer votre formulaire…

De tels changements ne devraient jamais vous prendre plus de 10 minutes…mais c’est rarement le cas!

Pourquoi ?

Car vous ne connaissez pas les bons outils pour gagner du temps (et apprendre le CSS plus facilement) !

Mon astuce pour modifier son css facilement

Suivez le guide, je vous emmène dans ma façon de travailler: découvrez une astuce de pro pour modifier vos CSS et gagner du temps!

Cliquez ici pour afficher la transcription de la vidéo :
« Tuto N°8 : Firebug, un outil gratuit pour modifier votre CSS »


Bonjour à tous. Ici Marie-Eve du blog Les Doigts Dans Le Net. Hier je vous ai montré comment installer ce plug-in sur votre site Internet. Il nous restait encore un petit problème. C’était que la première partie ici du plug-in que vous voyez en haut n’est pas stylée. Donc nous allons voir aujourd’hui comment est-ce qu’on peut styler un élément en CSS en s’aidant de Firebug.

Comment styler un élément en CSS en s’aidant de Firebug? 00:23

Plan du tutoriel 00:31

  • 1.Trouver les classes CSS : Donc tout d’abord, je vais regarder quelles sont les classes sur lesquelles je peux agir dans mon fichier CSS.
  • 2.Ecrire ces classes dans le fichier CSS : Ensuite donc je vais aller mettre ces classes dans mon fichier CSS pour les avoir à disposition ici sur mon front.
  • 3.Modifier le CSS directement dans Firebug : Ensuite, dans un troisième temps, je vais recharger la page et puis je vais faire des tests directement dans Firebug.
  • 4.Copier-coller les changements sur le fichier CSS 01:00 : Et en quatrième temps, quand je serai satisfaite avec mes tests et que j’aurai le style que je veux, je ferai un copier-coller de mon code depuis Firebug vers ma feuille de style.

Quelles sont les classes sur lesquelles je peux agir dans mon fichier CSS?

1.Trouver les classes CSS 01:16

Donc la partie du bas ou vous voyez le code HTML, c’est ce qu’on appelle le DOM. Ce n’est pas vraiment le code source de la page. C’est un code source dynamique, c’est pour ça qu’on l’appelle le DOM.

Et quand je passe sur un élément du DOM avec ma souris, il se colorise en bleu dans la partie supérieure de votre écran, donc sur mon site Web directement.

Alors si je suis sur ce « div » là, ben justement ce « div » là il à l’air de bien tomber. Ça a l’air d’être à peu près toute la zone pour laquelle il me manque le style. Si je me balade un petit peu dans cette zone, on a le premier « a » qui correspond au mot « préc », le deuxième « a » qui correspond au mot « suiv » et le troisième « div », le troisième élément donc, c’est un div qui correspond à tout le mois en cours. Donc en effet, ça a l’air d’être le bon endroit…

2. Écrire ces classes dans le fichier CSS 02:12

la classe CSS .ui-datepicker-header 02:22

Pour récupérer les classes, alors je vais récupérer tout d’abord « .ui-datepicker-header » et je vais aller les mettre dans ma feuille de style. Ma feuille de style, elle s’appelle « meve.css ».

<div class='ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all>

Voilà. Je vais faire une nouvelle section à la fin de ma feuille de style que je vais appeler « datepicker ».

/********* DatePicker *********/
.ui-datepicker-header{
}

Hop, voilà! Je copie donc « datepicker.header ». Ensuite, j’aurais sûrement aussi besoin de styler le « a » ici et le « a » qui sont là, donc je vais aussi récupérer les classes de ces deux éléments : « .ui-datepicker-prev ». Vous voyez que le deuxième c’est « .ui-datepicker-next ». Hop, je le colle là directement. Voilà, je vais faire pareil en fait pour le « next ». Et enfin, il y a sûrement un troisième élément que je voudrais styler. C’est le div qui est ici en bas qui s’appelle « .ui-datepicker-title ».

.ui-datepicker-title 03:28

.ui-datepicker-header{
}
.ui-datepicker-prev {
}
.ui-datepicker-next {
}
.ui-datepicker-title {
}

Donc maintenant, j’ai mes quatre classes qui sont implémentées dans ma feuille de style. Je vais pouvoir aller sur le front recharger ma page et pouvoir passer à la deuxième étape, c’est-à-dire faire des tests directement dans Firebug. Alors je recharge (F5).

3.Modifier le CSS directement dans faire 3:50

Si je reclique sur mon div principal, vous voyez que dans la partie de droite j’ai bien la ligne que j’ai rajoutée dans ma feuille de style. Donc j’ai bien la classe « .ui-datepicker-header ». Ça, ça va être très pratique parce que c’est grâce à ça que je vais pouvoir faire des tests. Alors vous faites un double-clic sur la droite. Vous voyez, il y a un petit champ qui s’ouvre. Et donc ici par exemple je vais mettre un background color, je vais le mettre en noir par exemple pour qu’on puisse y voir un peu mieux.

.ui-datepicker-header{
	background: none repeat scroll 0 0 #000000;
	position: relative;
}

Voilà. J’ai mon div ici qui est en position relative. Si je prends le « a » ici, voilà, on a pareil : « .ui-datepicker-prev » Je double-clique et lui, je le mets en absolu. Et du coup, il va se positionner par rapport à son parent.

.ui-datepicker-prev{
	position: absolute;
	left: 0;
}

Donc je vais pouvoir lui dire de rester toujours à gauche tandis que son petit copain ici, le « next », je vais faire la même chose, mais je vais le positionner à droite.

.ui-datepicker-next{
	position: absolute;
	right: 0;
}

Voilà. Et on voit déjà le résultat sur le front ici. Donc ici on a bien le « préc » qui est passé à gauche, le « suiv » qui est passé à droite. Juillet 2012, on ne le voit plus beaucoup. Donc je vais le mettre au milieu : ça sera certainement plus sympa. Donc on se souvient : juillet 2012, il est dans « .ui-datepicker-title ». Voilà. Je vais lui mettre un « text-align : center ».

.ui-datepicker-title  {
	color: #FFFFFF;
	text-align: center;
}

Voilà il est au milieu. Alors pour l’instant on n’y voit pas grand-chose, alors je vais le mettre en blanc; ce sera peut-être mieux. Voilà c’est mieux. Qu’est-ce que je pourrais faire encore? Ben je pourrais agrandir un peu le « div » parent, parce que du coup il est un peu petit, et un peu ridicule comme ça. Donc on va lui mettre une hauteur de 30 pixels et pour que tout soit bien aligné, on va mettre la hauteur de ligne également sur 30 pixels.

.ui-datepicker-header{
	background: none repeat scroll   0   0   #000000;
	height: 30px;
	line-height: 30px;
	position: relative;
}

Voilà, là maintenant on a quelque chose qui est un peu plus acceptable.

Bon, par contre, il n’y a rien à faire : je n’aime pas trop le fond noir. Je préférerais que le fond soit gris comme les boutons. Donc je vais aller changer ça. Et si dans mon background, j’avais mis noir, finalement je vais mettre gris c’est « #EBEBEB ». Je vais mettre un petit border aussi parce que là ce n’est pas très joli. Comme ça, un petit border, on va le mettre à « #999 ».

.ui-datepicker-header{
	background: none repeat scroll   0   0   #EBEBEB;
	border: solid 1px #999;
	height: 30px;
	line-height: 30px;
	position: relative;
}

Voilà, ça fait un gris assez clair. Du coup, mon titre « Juillet 2012 », lui il est un peu pas visible. On va le mettre en noir.

.ui-datepicker-title  {
	color: #000000;
	text-align: center;
}

Voilà. Qu’est-ce qu’on pourrait faire encore pour arranger un peu? Ben le « prev » et le « préc » et le « suivant », ils sont un petit peu trop collés. Donc je vais mettre un petit padding directement sur les « a ». Voilà. Donc « a » de gauche, on va mettre un « padding-left » de 3 pixels.

ui-datepicker-prev{
	font-size: 10px;
	left: 0;
	padding-left:3px;
	position: absolute;
}

Voilà, comme ça, il se décale un petit peu. Et le« a » de droite, on va aussi lui mettre un « padding-right » du coup, de 3 pixels aussi.

.ui-datepicker-next{
	font-size: 10px;
	padding-right: 3px;
	position: absolute;
	right: 0;
}

Donc maintenant, on a une en-tête qui est à peu près potable. Bon, je ne suis pas graphiste. Ce n’est que des aplats de couleur. Il n’y a vraiment pas trop d’originalité. A la limite ce que je vois là, c’est qu’on pourrait même réduire un petit peu la taille des « prev » et des « next ». Alors on va mettre un font size à 10 pixels. Voilà, c’est un peu mieux. On va faire pareil sur l’autre. Voilà. Comme ça, c’est un peu mieux; bon, on pourrait évidemment faire des choses encore beaucoup mieux. Par exemple, on pourrait mettre des petites flèches à la place de « prev », de « préc » et de « suivant ». Ça serait plus sympa. On pourrait mettre un petit dégradé comme sur les boutons à la place du fond gris uniforme. Mais bon, ça demandera un peu plus de temps. Ici, ce n’est pas le but de vous faire un cours de CSS ; c’est plutôt l’intérêt de vous montrer comment j’utilise Firebug pour faire des modifications dont j’ai envie. Vous voyez : c’est très rapide.

Donc maintenant donc que je suis satisfaite avec un style donné, je vais pouvoir aller copier-coller tous ces changements que je viens de faire dans ma feuille de style.

4. Copier-coller les changements sur le fichier CSS 07:49

Alors pour ça, vous voyez, c’est très simple. Donc je suis dans « .ui-datepicker-prev ». Hop, je sélectionne (Ctrl + C) tout ça. Je fais Ctrl + C pour copier, je vais ici et je colle (Ctrl + V). Hop!

/********* datepicker *********/
.ui-datepicker-header{
}
ui-datepicker-prev{
	font-size: 10px;
	left: 0;
	padding-left:3px;
	position: absolute;
}

On va faire pareil pour tous les éléments. Le div parent. Hop, on récupère tout ça (Ctrl + C). On le met là.

/********* datepicker *********/
.ui-datepicker-header{
	background: none repeat scroll   0   0   #EBEBEB;
	border: solid 1px #999;
	height: 30px;
	line-height: 30px;
	position: relative;
}
ui-datepicker-prev{
	font-size: 10px;
	left: 0;
	padding-left:3px;
	position: absolute;
}
.ui-datepicker-next{
	font-size: 10px;
	padding-right: 3px;
	position: absolute;
	right: 0;
}
.ui-datepicker-title  {
	color: #000000;
	font-weight  bold;
	text-align: center;
}

Voilà : je sauvegarde (Ctrl + S) et normalement, tous ces changements-là, du coup, devraient être visibles aussi de l’autre côté. Je recharge la page ici avec (F5) pour vérifier si j’ai bien collé les choses au bon endroit. Des fois, on fait des erreurs de copier-coller; ça arrive. Donc maintenant quand je clique je devrais avoir, voilà, mon résultat final. Impeccable.

Alors bon, je répète quand même une dernière fois : ce n’est pas un cours de CSS. Le CSS que vous pouvez voir ici n’est pas du tout optimisé.Mais voilà : ce n’était pas le but de vous montrer comment faire le meilleur CSS possible. C’est plutôt l’intérêt de vous montrer comment vous pouvez bidouiller facilement et faire de petites modifications. Même si le CSS n’est pas optimisé, ce n’est pas ces quelques lignes qui vont ralentir votre site. Ne vous inquiétez pas. Par contre, il ne faudrait pas suivre cette méthode pour faire toute une création de thème, par exemple, parce que là, ce n’est pas assez rigoureux.

http://lesdoigtsdanslenet.com 9:24

Voilà, bien, merci de m’avoir suivie. J’espère que vous mettrez tout ça en place facilement sur votre site et si vous avez des questions, comme d’habitude, n’hésitez pas à me laisser un commentaire. Merci. Au revoir.

Fin de la transcription

Résumé

  • 1. Trouver les classes CSS
    • ui-datepicker-header
    • ui-datepicker-prev
    • ui-datepicker-next
    • ui-datepicker-title
  • 2. Ecrire ces classes dans le fichier CSS
  • 3. Modifier le CSS directement dans Firebug
  • 4. Copier-coller les changements sur le fichier CSS
    .ui-datepicker-header{
    background: none repeat scroll 0 0 #EBEBEB;
    border: 1px solid #999999;
    height: 30px;
    line-height: 30px;
    position: relative;
    }
    .ui-datepicker-prev{
    font-size: 10px;
    left: 0;
    padding-left: 3px;
    position: absolute;
    }
    .ui-datepicker-next {
    font-size: 10px;
    padding-right: 3px;
    position: absolute;
    right: 0;
    }
    .ui-datepicker-title{
    color: #000000;
    font-weight: bold;
    text-align: center;
    }
    


Image courtesy of http://www.freedigitalphotos.net

astuce, astuces css wordpress, astuces modifier wordpress, CSS, intermédiaire, modifier css wordpress, modifier le css de mon blog wordpress, modifier wordpress

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

10 commentaires

  1. Pratique ton tutorial vidéo ! le CSS c’est ma bête noire, j’arrive les manip’ relativement simples mais j’avoue que le positionnement des éléments peut parfois devenir un cauchemar, avec des décalages du contenu par rapport aux titres .. j’ai un blog où c’est le cas et j’y vais à tâtons, je vais bien finir par trouver :-)

    J’essaie toujours de choisir un thème très proche de ce que je souhaite pour éviter le problème mais ce n’est toujours facile ..

    Répondre
    • ET oui, bien souvent, on ne prend pas le temps de vraiment apprendre CSS, si bien qu’on y va à tâtons, on magouille, on bidouille, et quand c’est bon, surtout on ne touche plus à rien!! 😀

      Pourtant, en quelques jours de pratique (et en commençant par le début), CSS n’est pas si compliqué (au moins pour des petites choses). Et après quel bonheur de comprendre _et pouvoir résoudre_ des problèmes tels que celui que tu décris!

      Bon courage anyway 😉

      Répondre
  2. Salut Marie-Eve,

    Je connaissais déjà l’astuce… mais tu l’as très bien expliqué, félicitation

    Juste une petite question:
    ton fichier meve.css, c’est ta feuille de style perso que t’a ajouter dans le header OU c’est la feuille de style du thème dans lequel tu rajoute tes modifs en commentant à chaque fois ?

    Répondre
    • Salut Florian,
      Merci :)

      Le fichier meve.css, c’est une feuille de style propre à mon thème enfant, dans lequel je surcharge le CSS par défaut de mon thème (qui est un thème parent).

      Cette méthode est assez pratique quand on ne veut pas modifier les fichiers du thème parent (et ainsi garder les options de mise à jour sans écraser nos précédentes modifications).

      Amicalement,

      Répondre
  3. Pas mal du tout! Plus la peine d’enregistrer et de mettre en ligne à chaque modif pour vérifier que c’est ok. Tu va me changer la vie

    Répondre
    • Super! C’était le but avoué de cette vidéo, je suis très contente que ça serve à quelqu’un :)

      Répondre
  4. Je viens de faire une visite approfondie de ce blog les postes qu’on y trouve sont vraiment intéressant.

    Répondre
  5. Ou comment rendre le CSS facile.
    C’est possible d’utiliser cette vidéo sur d’autres sites ?

    Répondre
    • Le contenu de mon blog est en licence créative commons selon les termes spécifiés ici. En gros, tu peux la montrer dans sur un site sans utilisation commerciale en indiquant l’auteur avec un lien vers ce blog, et tu peux même la modifier ou l’intégrer à un nouveau travail si celui-ci est aussi en licence créative common.

      Si tu as besoin d’aller au-delà de ce cadre, contacte moi par mail qu’on voit ce qu’on peut faire.

      Répondre
  6. bravo et merci!!! c’est extrêmement bien expliqué (je butais sur des petits points de détail) et TU ME SAUVES!!!!

    Répondre

Trackbacks/Pingbacks

  1. Les statistiques du blog en Juillet 2012 - Les Doigts dans le Net - [...] Découvrez  cette astuce de pro pour modifier votre CSS en 5 minutes (23/07) [...]
  2. Vous administrez vous-même votre site professionnel: vos difficultés techniques et comment les résoudre - Les Doigts dans le Net - [...] « Les Doigts Dans Le Net », je privilégie plutôt  les langages, outils et astuces dont l’apprentissage est rapide et…
  3. Rétrospective 2012 et bonne année 2013 ! - Les Doigts dans le Net - [...] Découvrez cette astuce de pro pour modifier votre CSS en 5 minutes [...]
  4. Comment installer Firebug sur Chrome et Internet Explorer ? - Les Doigts dans le Net - […] pas rentrer dans les détails de ses fonctionnalités; ça fera l’objet d’une autre vidéo, mais sachez que vous avez…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint