Débuter avec WordPress : Modifier l’apparence de votre site avec CSS

() translation by (you can also view the original English article)

Alors, maintenant que nous avons un thème enfant configuré, nous sommes prêts à apporter quelques modifications à l’apparence de notre site.

Ce dont vous aurez besoin

Navigateur web - j’utilise Chrome
Éditeur de texte - j’utilise Text Wrangler
Client FTP - j’utilise FileZilla pour lequel nous avons configuré Text Wrangler comme son éditeur de texte par défaut
Une connaissance du HTML et CSS

Avant de commencer

Avant d’entrer dans le corps de ce tutoriel nous avons besoin de mettre en place notre système d'édition, et une des choses utiles au sujet des clients FTP modernes est que, dans leurs préférences, nous pouvons préciser le logiciel à utiliser pour modifier les fichiers. De cette façon nous pouvons sélectionner modifier un fichier sur le serveur, après l'avoir téléchargé dans un répertoire temporaire sur notre système local. Après l'avoir modifié, quand nous l'enregistrons, il est automatiquement envoyé sur le serveur. C’est un système automatisé simple, mais qui nécessite un peu de sauvegarde comme nous modifions direct, donc si nous faisons une erreur, notre site en ligne est affecté. Toutefois, avant d’y arriver paramétrez votre éditeur de texte par défaut.

Accédez à FileZilla > Préférences > Édition du fichier et parcourez vos répertoires Applications ou Programmes et choisissez votre éditeur de texte (comme je le disais, j’utilise Text Wrangler, donc vous pouvez voir dans l’exemple que Text Wrangler est défini comme mon éditeur par défaut).

OK, nous allons y revenir...

Deuxièmement, avant de commencer à peaufiner le thème (c’est votre moment « En voici un que je vous ai préparé plus tôt ») j’ai aussi créé quelques nouveaux articles sur notre blog et les ai différencié à l’aide des formats d'articles afin que nous puissions voir où certains des changements se manifesteront sur notre site publié - vous pouvez le voir dans la première image, identifiée par différents fonds colorés. Le premier est un lien, suivi d’un article standard, puis une galerie, un autre standard, une citation et une vidéo. Twenty Thirteen modifie le style de chacun de ces articles, donc nous allons devoir modifier quelques parties de la feuille de style de notre site afin de donner à notre site un aspect différent de l’original.

Changer les Styles de votre site

D'accord, le premier changement de style que j’ai fais ne nécessite aucun code, j’ai simplement mis à jour les images d’en-tête.

Twenty Thirteen a trois images à motifs géométriques orange installées par défaut, nous en mettons quatre nouvelles bleu/vert, en allant dans Apparence > En-tête pour paramétrer et télécharger quelques nouvelles images dl’en-tête. Il n’y a pas de sens à changer un en-tête dans le CSS quand le thème lui-même nous donne les moyens de changer cela, alors vous retrouvez quelques nouvelles images d’en-tête pour votre nouvelle palette de couleur et allez-y et téléchargez les...

Je vais attendre ici.

OK, vous les avez trouvées ? Super, chargez-les et passons à la chose suivante.

Peaufiner le thème à l’aide de feuilles de style

Pour vous donner un peu de pré-requis/remise à niveau sur les feuilles de style, un site Web est composé de 3 couches. La première, à la base est la couche de contenu, la partie du site qui organise votre contenu dans une structure signifiante dans votre site. Cette structure est créée à l’aide d'un code appelé HTML (Hypertext Markup Language) avec lequel vous balisez les différentes parties du contenu. À titre d’exemple, voici un peu de HTML.

&lt;h1&gt;This is a Level One Heading&lt;/h1&gt;
&lt;p&gt;This is the first Paragraph of text.&lt;/p&gt;
&lt;!-- This is comment text... put in to help tell you what's what, and it's the beginning of the Unordered list--&gt;
&lt;ul&gt;
  &lt;li&gt;This is the first item in an unordered list&lt;/li&gt;
	&lt;li&gt;This is the second item in an unordered list&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- this is the end of the unordered list --&gt;
&lt;article class=&quot;format-gallery&quot;&gt;This is an article, a stand alone block of text content with a class of format-gallery&lt;/article&gt;

HTML en lui-même ne style pas quoi que ce soit. HTML structure uniquement le contenu. Pour modifier le style du contenu nous passons à la couche intermédiaire du site, la couche de présentation. Une des grandes choses au sujet de cette ère de construction de site Web est la séparation de la présentation et du contenu. C’est ce système qui rend si facile de changer le look de votre site Web simplement en le changeant avec un nouveau thème (qui, au plus simple, est, en effet, un échange d'une feuille de style contre une autre).

La langue que parle cette couche de présentation est le CSS (Cascading Style Sheets) et c’est le CSS que nous allons peaufiner pour effectuer les modifications de style sur notre thème Twenty Thirteen.

Chaque fois que nous regardons la structure des CSS comme un langage, nous pouvons voir trois choses :

1	selector { property: value; }

Donc, si nous sommes désireux de régler quelque chose comme le titre de premier niveau, la balise h1 est notre sélecteur comme suit :

1	h1 { property: value; }

La chose suivante est la propriété et dans ce cas la propriété que nous voulons changer va être la couleur - également, en CSS, nous utilisons l'orthographe américaine. Si j’écris la colour dans le contenu, dans le code, j'utilise color.

1	h1 { color: value; }

Enfin, nous allons définir la valeur. Maintenant, dans le cas de couleurs nous pouvons écrire la couleur de trois façons :

Noms de couleur
Code hexadécimal
Valeurs de couleur RVB

La plupart du temps nous allons utiliser de l'hexadécimal, si vous voulez connaître les autres valeurs, vous trouverez une référence ici. Dans ce cas, nous allons changer notre texte à blanc, c'est-à-dire #FFFFFF au format hexadécimal.

1	h1 {color: #FFFFFF; }

Donc, avec cela à l’esprit et pour commencer à voir notre thème ressembler un peu plus au « nôtre » nous allons tout d’abord changer la police du texte à la fois pour le titre et le contenu du corps. Donc, commencez par ouvrir FileZilla et naviguer dans la fenêtre distante pour atteindre la feuille de style de votre thème enfant, puis faites un clic droit sur le fichier style.css et choisissez Afficher/modifier.

Cliquez et vous trouverez que le fichier s’ouvre dans votre éditeur de texte.

IMPORTANT

Avant d’aller plus loin, nous allons enregistrer une copie de notre feuille de style sur notre bureau comme sauvegarde. C’est parce que nous allons modifier en direct sur le serveur que nous voulons avoir une sauvegarde si nous faisons quelque chose qui casse notre code.

Alors, avant de faire autre chose, avec votre fichier ouvert dans Text Wrangler cliquez sur CMD + A pour sélectionner tout le texte. Appuyez sur CMD + C pour copier et ouvrez un nouveau fichier dans Text Wrangler (CMD + N). Collez votre texte copié dans le nouveau document (CMD + V) et enregistrez ce fichier sous une sauvegarde sur votre bureau. De cette façon, si quelque chose va de travers, vous pouvez toujours copier à partir du fichier qui a été modifié en dernier et enregistrez-le sur le serveur, puis restaurer le site à la dernière version de travail.

Exécutez la procédure ci-dessus et enregistrez ce fichier chaque fois que vous avez apporté une modification (un changement qui qui a fonctionné comme prévu), de cette façon, le fichier est toujours votre dernière version. (Il y a beaucoup de manières étonnantes et plus compliquée de gérer ce contrôle de version. Pour le débutant absolu, c’est un très bon début, si vous vous rappelez de le garder à jour)

Pour l’instant, nous sommes prêts à faire preuve de créativité !

Changer les polices

Pour modifier les polices sur un site nous devons accéder aux fichiers de police hébergés. Cet exemple part du fait que tous les ordinateurs n'auront pas les mêmes polices que les nôtres chargées sur leur système. Ainsi, une des grandes choses à laquelle nous avons accès ces jours c'est des polices web agréables et hébergées, librement fournies par Google Web Fonts. Pour notre site nous avons trouvé les deux polices qui fonctionnent vraiment bien ensemble, Rancho pour les titres et Gudea pour le corps du texte.

Donc, sur le site Google Fonts, ajoutez ces deux polices (Rancho et Gudea, ou deux de votre choix) à une collection. Appuyez sur l’onglet Utiliser, puis sur l’onglet de @import pour récupérer le code suivant pour la coller dans notre feuille de style :

1	@import url(http://fonts.googleapis.com/css?family=Gudea:400,700,400italic\|Rancho);

Cela indique à notre thème où trouver la police. Nous dirons ensuite à notre feuille de style où l'afficher en éditant un couple de sélecteurs - mais comment sait-on quels éléments sur lesquels nous voulons travailler ou même quels sélecteurs nous pouvons modifier ?

Utiliser Developer Tools

Une des choses cool sur les navigateurs modernes est le grand nombre d’outils disponibles pour aider les développeurs. Dans Chrome, ils s’appellent Developer Tools et vous pouvez y accéder par un clic droit sur l’élément sur la page Web que vous voulez inspecter et choisissez inspecter l’élément. Dans Firefox, l’outil de dev de choix est appelé Firebug et vous pouvez l'obtenir en l’installant comme extension (Firefox n’a pas ses propres outils de dev natifs), dans Safari ils viennent intégrés, mais vous devez les activer (Préférences > Avancées > Afficher le menu Développement dans la barre des menus).

Quoi qu'il en soit, nous allons examiner l’en-tête du site. Faites un clic droit sur le texte de l’en-tête et choisissez ensuite Inspecter l'élément

Cliquer dessus fera apparaître la palette d’outils au bas de la page sur laquelle nous sommes.

À la gauche du panneau se trouve la section des éléments HTML avec notre élément sélectionné mis en évidence. À droite se trouve le CSS. Après avoir sélectionné l'élément <h1> dans le code HTML nous pouvons faire défiler le CSS sur la droite pour trouver tous les sélecteurs qui fonctionnent sur ce code HTML. Si vous faites défiler quelques lignes vous trouverez une séquence de sélecteurs de titre avec une propriété appelée font-family.

L'une des choses intéressantes à propos des dev tools est que vous pouvez modifier ces propriétés et voir vos modifications simulées en direct sans aucun effet réel sur votre site en ligne pour les autres utilisateurs, et quand le sélecteur à l'apparence que vous recherchez, vous pouvez le copier dans votre feuille de style de thème enfant. Alors placez votre curseur sur la propriété (en commençant par le mot Bitter) et, parce que nous avons déjà enregistré la police Rancho dans notre feuille de style en utilisant le sélecteur @import nous pouvons changer la police courante Bitter dans l’inspecteur en « Rancho » pour voir nos polices changer direct.

Si nous sommes satisfaits de cette nouvelle police nous pouvons copier le CSS de l’inspecteur et le coller dans notre feuille de style.

Sélectionnez le code à partir des sélecteurs en commençant par h1 jusqu'aux crochets fermants et copiez-le.

Puis collez le code dans votre feuille de style.

La nature des feuilles de style, c’est qu’elles cascadent. S’il y a plusieurs sélecteurs dans une feuille de style pour un élément HTML particulier, celui en bas de la page est celui avec la primauté dans la hiérarchie et donc affiché par le navigateur.

Dans notre cas, nous allons importer la feuille de style en haut de notre thème enfant ici, ainsi tout le nouveau code que nous écrivons vient maintenant à la fin du code existant dans le thème parent. En conséquence, notre code est le code qui sera exécuté lorsque le site s’affiche. En outre, étant donné que le code que nous avons collé contient des lignes que nous ne changeons pas, et donc, garder ces lignes dupliquerait en fait le code existant (c’est le même chez le parent, alors vous n’avez pas besoin de l’utiliser à nouveau chez l’enfant), nous allons supprimer les lignes au-dessus et en-dessous de la propriété font-family, car ils ne sont pas nécessaires.

Maintenant appuyez sur enregistrer sur notre feuille de style, puis allez sur FileZilla où nous devrions voir cette alerte :

Si vous êtes satisfait de vos modifications, créez une sauvegarde sur votre bureau et êtes prêt à continuer, appuyez sur Oui pour remplacer le fichier sur le serveur. Dirigez-vous ensuite vers votre site pour actualiser la page et voir vos modifications publiées.

Une fois que nous avons fait cela pour les polices d’en-tête, nous ferons la même chose pour le corps. Alors, avec votre site ouvert, faites un clic droit sur un bout du corps de texte et choisissez Inspecter l’élément. Dans l’inspecteur de CSS, naviguez pour trouver le sélecteur de font-family dans votre panneau de CSS et puis remplacez la valeur Source Sans Pro en « Gudea ». Il est à noter à ce stade que le sélecteur que nous allons éditer n’est pas p (pour paragraphe) comme vous pouviez vous y attendre, en fait le sélecteur qui affecte les pagragraphes dans ce cas est le sélecteur html (vous pouvez l'affirmer parce que dans l’inspecteur il est le plus sombre, les sélecteurs grisés dans ce tableau n'affectent pas cet extrait particulier de texte) , en l’occurrence html est un parent-sélectionneur qui affecte tous les éléments qui descendent de lui sur la page.

Quoi qu'il en soit, copiez ce texte, du sélecteur au crochet fermant, comme nous l’avons fait ci-dessus, dans votre feuille de style. Dans ce cas, pas besoin de dépouiller les sélecteurs inutilisés comme font-family est le seul. Enregistrer et télécharger votre fichier.

Vous pouvez voir dans le code ci-dessus, que j’ai ajouté quelques lignes comme commentaires, enveloppés par les caractères suivants /* pour les ouvrir et ensuite, */ pour les fermer. Je suggère que vous preniez l’habitude de vous laisser des notes de cette façon ; ainsi plus tard, vous pouvez facilement trouver ce que vous faisiez dans votre code.

La prochaine chose que je fais est de commencer à aller sur le site existant avec mon inspecteur et choisir tous les éléments dont je veux changer les couleurs... et il y en a toute une liste.

1	/* First, the site Heading Colour*/
2	.site-header .home-link {
3	color: #ffffff;
4	}

Ensuite, la barre de navigation et les liens

/* Nav Section Header edits */

.nav-menu .current_page_item &gt; a, .nav-menu .current_page_ancestor &gt; a, .nav-menu .current-menu-item &gt; a, .nav-menu .current-menu-ancestor &gt; a {
	color: #0A6EBC; /*Link Colour */
}

.toggled-on .nav-menu li:hover &gt; a,
.toggled-on .nav-menu .children a {
	color: #121314; /* Active Link Colour */
}

.toggled-on .nav-menu li a:hover,
.toggled-on .nav-menu ul a:hover {
	background-color: #2e51dc; /* Hover Link Colour */
}

navigation a {
	color: #2AB9E6; /* Link Colour */
}

.navigation a:hover {
	color: #2091B4; /* Hover Colour */
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
	background-color: #2e7fdc; /* Hover Background*/
}

OK, maintenant que vous avez les bases de ce par quoi il est possible que vous puissiez systématiquement passer sur le site publié, cherchez les sélecteurs que vous voulez éditer et jouer avec eux dans votre inspecteur, régler les paramètres, copiez-les et collez vos nouvelles modifications dans la feuille de style du thème enfant !

Je pourrais vous donner une liste de tous les changements que j’ai fait à la feuille de style pour transformer Twenty Thirteen en cette image d’exemple, mais où est le fun dans ceci ?

Conclusion

Lorsque l'on regarde le code d’un site dans Developer Tools, cela peut être assez intimidant. Mais comme vous vous familiarisez avec la manière dont le CSS se rapporte aux éléments HTML, vous allez commencer à voir exactement quelles sont les possibilités. C’est un monde difficile et passionnant à explorer ! Alors, prenez le temps de jouer avec le thème cette semaine et voir si vous pouvez l'amener à ressembler à l’image bleue ci-dessus.

La semaine prochaine, avant de nous publier la leçon suivante, je vais vous donner la feuille de style qui a donné à Twenty Thirteen cette belle nuance de bleu.

P. S. Si vous vous sentez encore un peu perdu avec HTML et CSS n’oubliez pas, vous pouvez consulter 30 Days to Learn HTML and CSS: a Free Tuts+ Premium Course.

1	<h1>This is a Level One Heading</h1>
2	<p>This is the first Paragraph of text.</p>
3	<!-- This is comment text... put in to help tell you what's what, and it's the beginning of the Unordered list-->
4	<ul>
5	<li>This is the first item in an unordered list</li>
6	<li>This is the second item in an unordered list</li>
7	</ul>
8	<!-- this is the end of the unordered list -->
9	<article class="format-gallery">This is an article, a stand alone block of text content with a class of format-gallery</article>