Mercredi 15 avril 2009
La première chose à faire, c'est de se servir du navigateur internet Firefox.
C'est un navigateur internet comme celui fourni avec votre PC lors de son achat, je veux dire Explorer.
Pour le charger sur votre ordinateur, si vous ne l'avez pas, il suffit de cliquer sur le dessin ci-dessous et de se laisser guider. En fait, il n'y a pas grand-chose à faire.
Vous aurez ensuite un icone sur votre bureau comme la petite image de dessous. Il suffit de cliquer dessus pour naviguer sur le net avec Firefox. (Il faut cliquer sur l'image se trouvant sur votre bureau, pas dans cet article.
)
Firefox bénéficie de plusieurs outils à charger, dont la barre "web developper". C'est avec cet outil que l'on peut voir sa css et tester cette dernière en direct. Un simple clic sur la pièce de puzzle suffit pour charger cette extention.
Voilà la page internet que l'on a avec Firefox.
Rien d'exceptionnel pour l'instant...
En chargeant la barre "web developper", nous disposons d'une barre supplémentaire d'outils.
Cliquons sur l'icone css afin d'afficher le menu déroulant.
Cliquons ensuite sur le lien Editer les css.
Nous voyons un certain nombre d'onglets dont le dernier sur lequel nous allons cliquer.
Mise à jour :
Les noms des onglets ont changé depuis une nouvelle mise en production :
home.css pour la css de la page d'accueil, article.css pour la page des articles et page.css pour la page des pages.
Voici les nouvelles barres d'onglets :
Celle que l'on voit quand on est sur un article
:
Celle qui est visible lorsqu'on regarde une page
:
Vous voyez le début de ma css actuelle concernant ma page d'accueil. Pour voir le reste, on peut faire descendre l'ascenseur à droite. (Pas là, ce n'est qu'une image.)
Pour modifier sa propre css, il faut en connaître les classes. Laissons cet outil merveilleux s'en charger.
Cliquons à nouveau sur l'icone css et ensuite, cliquons sur le lien Voir les styles d'un élément particulier.
Une barre supplémentaire s'affiche. C'est là que la classe va s'inscrire.
Mon curseur se transforme en croix (avec un cadre rouge qui la suit et qui délimite la zone d'une classe) et il suffit de déplacer cette croix vers la date de l'article.
Au bout de la flèche 2, nous voyons la classe concernant la date d'un article. C'est .date
Il suffit de trouver cette classe dans sa propre css, ou d'écrire celle-ci , et de la modifier à sa guise.
La date de mon article était noire (code couleur de départ #000), je modifie le code couleur en rouge (code couleur du rouge #F00).
La date devient aussitôt rouge.
Ensuite, il suffit de sélectionner la ligne correspondant à la classe .date, de la copier et de la coller dans sa propre css ensuite en suivant le chemin :
1) Administration
2) Design
3) Mode avancé css
4) Lien Accueil ou lien Articles ou lien Pages à gauche selon le choix
5) Cliquez sur le lien Mon style.
6) Cochez la case : Appliquer ma feuille de style personnalisée.
7) Collez ce qui est donné au-dessus.
8) Enregistrez (le lien orangé est en bas).
9) Cliquez sur Voir mon blog (le lien est en haut à droite).
10) On voit son blog arriver sans modifications.
11) Appuyez en même temps sur les touches Crtl et F5 pour vider le cache.
12) On voit son blog modifié.
Pour modifier la couleur du titre des articles par exemple, il suffit de glisser la croix-curseur vers le titre et je vois la classe s'afficher : .divTitreArticle.
Comme un titre d'article est un lien, la classe devient .divTitreArticle a et j'applique la couleur bleue (code couleur #00F) et mon titre devient virtuellement bleu.
Regardons de plus près la css :
Pour centrer le titre, c'est dans la classe .divTitreArticle
.divTitreArticle {text-align:center; font-size:14px;}
Pour déterminer la couleur du lien et la taille du titre, c'est dans cette classe (pour la taille, c'était déjà défini avant d'une autre manière : soit en pixels (px), soit en %) :
.divTitreArticle a {color:#000; font-size:90%;}
Pour la couleur du lien au passage de la souris et le fait que le lien ne soit pas souligné, c'est ici :
.divTitreArticle a:hover {color:#868686; text-decoration:none;}
En testant un peu, on peut donc, mettre une couleur, un fond, une taille, une petite image, des marges un peu partout. Il faut avoir la bonne classe. Ce n'est pas toujours évident, mais à force, on y arrive.
Avec cette barre "web developper", il existe d'autres icones sur lesquels vous pourrez cliquer afin de les exploiter dont celui qui se nomme Outils. On peut sélectionner Validate css afin de voir si sa css est sans aucune erreur.
Ouf ! Tout est bon dans ma css.
C'est un navigateur internet comme celui fourni avec votre PC lors de son achat, je veux dire Explorer.
Pour le charger sur votre ordinateur, si vous ne l'avez pas, il suffit de cliquer sur le dessin ci-dessous et de se laisser guider. En fait, il n'y a pas grand-chose à faire.
Vous aurez ensuite un icone sur votre bureau comme la petite image de dessous. Il suffit de cliquer dessus pour naviguer sur le net avec Firefox. (Il faut cliquer sur l'image se trouvant sur votre bureau, pas dans cet article.
) Firefox bénéficie de plusieurs outils à charger, dont la barre "web developper". C'est avec cet outil que l'on peut voir sa css et tester cette dernière en direct. Un simple clic sur la pièce de puzzle suffit pour charger cette extention.
Voilà la page internet que l'on a avec Firefox.
Rien d'exceptionnel pour l'instant...
A partir de maintenant, vous pouvez cliquer sur les images ci-dessous afin
de les agrandir.
En chargeant la barre "web developper", nous disposons d'une barre supplémentaire d'outils.
Cliquons sur l'icone css afin d'afficher le menu déroulant.
Cliquons ensuite sur le lien Editer les css.
Nous voyons un certain nombre d'onglets dont le dernier sur lequel nous allons cliquer.
Mise à jour :
Les noms des onglets ont changé depuis une nouvelle mise en production :
home.css pour la css de la page d'accueil, article.css pour la page des articles et page.css pour la page des pages.
Voici les nouvelles barres d'onglets :
Celle que l'on voit à l'accueil
:
Celle que l'on voit quand on est sur un article
: Celle qui est visible lorsqu'on regarde une page
:
Vous voyez le début de ma css actuelle concernant ma page d'accueil. Pour voir le reste, on peut faire descendre l'ascenseur à droite. (Pas là, ce n'est qu'une image.
) 
Pour modifier sa propre css, il faut en connaître les classes. Laissons cet outil merveilleux s'en charger.
Cliquons à nouveau sur l'icone css et ensuite, cliquons sur le lien Voir les styles d'un élément particulier.
Une barre supplémentaire s'affiche. C'est là que la classe va s'inscrire.
Mon curseur se transforme en croix (avec un cadre rouge qui la suit et qui délimite la zone d'une classe) et il suffit de déplacer cette croix vers la date de l'article.
Au bout de la flèche 2, nous voyons la classe concernant la date d'un article. C'est .date
Il suffit de trouver cette classe dans sa propre css, ou d'écrire celle-ci , et de la modifier à sa guise.
La date de mon article était noire (code couleur de départ #000), je modifie le code couleur en rouge (code couleur du rouge #F00).
La date devient aussitôt rouge.
Ensuite, il suffit de sélectionner la ligne correspondant à la classe .date, de la copier et de la coller dans sa propre css ensuite en suivant le chemin :
1) Administration
2) Design
3) Mode avancé css
4) Lien Accueil ou lien Articles ou lien Pages à gauche selon le choix
5) Cliquez sur le lien Mon style.
6) Cochez la case : Appliquer ma feuille de style personnalisée.
7) Collez ce qui est donné au-dessus.
8) Enregistrez (le lien orangé est en bas).
9) Cliquez sur Voir mon blog (le lien est en haut à droite).
10) On voit son blog arriver sans modifications.
11) Appuyez en même temps sur les touches Crtl et F5 pour vider le cache.
12) On voit son blog modifié.
Pour modifier la couleur du titre des articles par exemple, il suffit de glisser la croix-curseur vers le titre et je vois la classe s'afficher : .divTitreArticle.
Comme un titre d'article est un lien, la classe devient .divTitreArticle a et j'applique la couleur bleue (code couleur #00F) et mon titre devient virtuellement bleu.
Regardons de plus près la css :
Pour centrer le titre, c'est dans la classe .divTitreArticle
.divTitreArticle {text-align:center; font-size:14px;}
Pour déterminer la couleur du lien et la taille du titre, c'est dans cette classe (pour la taille, c'était déjà défini avant d'une autre manière : soit en pixels (px), soit en %) :
.divTitreArticle a {color:#000; font-size:90%;}
Pour la couleur du lien au passage de la souris et le fait que le lien ne soit pas souligné, c'est ici :
.divTitreArticle a:hover {color:#868686; text-decoration:none;}
En testant un peu, on peut donc, mettre une couleur, un fond, une taille, une petite image, des marges un peu partout. Il faut avoir la bonne classe. Ce n'est pas toujours évident, mais à force, on y arrive.
Avec cette barre "web developper", il existe d'autres icones sur lesquels vous pourrez cliquer afin de les exploiter dont celui qui se nomme Outils. On peut sélectionner Validate css afin de voir si sa css est sans aucune erreur.
Ouf ! Tout est bon dans ma css.
