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

Partagez si vous aimez ->

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!

[transcription nature= »de la vidéo » titre= »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://lddln.mypointcom.net 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.
[/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;
    }
    
[ctainithtmlcss] [credit]
Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons