Ceci est une brève introduction à l'utilisation des outils de développement d'un navigateur pour découvrir comment modifier le style d'un skin. Si vous ne connaissez pas grand chose au sujet de HTML et de CSS, utilisez les outils de développement du navigateur qui devraient permettre d’apporter de simples modifications aux couleurs, aux bordures et aux polices. Si vous souhaitez en savoir plus sur HTML et CSS, vous trouverez de nombreuses ressources sur Internet, telles que https://www.w3schools.com/, https://www.mozzila.org, https://www.tutorialspoint.com ou encore https:openclassrooms.com.

De nombreux skins possèdent un champ de code 'CSS personnalisé' dans lequel vous pouvez modifier des attributs de style spécifiques. Par exemple, le skin Tiger contient  Site > Code personnalisé > {} CSS.

Si le skin n'a pas de code personnalisé, assurez-vous que la licence autorise la modification du skin, mais sachez que les modifications ne survivront pas aux mises à jour du skin, alors notez vos modifications.

Dans Tiger, il explique également comment examiner l'élément d'intérêt de l'album en cliquant dessus avec le bouton droit de la souris et en sélectionnant «Inspecter l'élément». Regardons son exemple d'album et ce qui se passe dans Firefox si nous cliquons sur le mot "Tiger".

Les exemples suivants sont basés sur tiger version 2.9, mais le principe est le même pour n’importe quel skin.

Dans Tiger, il indique également comment examiner l'élément d'intérêt de l'album en cliquant dessus avec le bouton droit et en sélectionnant 'Inspecter l'élément'. Regardons son exemple d'album et ce qui se passe dans Firefox si nous cliquons sur le mot 'Tiger'.

Vous pouvez voir qu'un ensemble d'onglets a été ouvert en bas de la page où nous avons cliqué avec le bouton droit de la souris et que l'onglet "Inspecteur" est actif avec la ligne <h1>…</h1> surlignée.

Le survol de la souris sur cette ligne met en évidence (élément bleu transparent) l'élément lui-même et indique la largeur (216.95) et la hauteur (46.0833) de l'élément H1. Vous pouvez cliquer sur le triangle situé à gauche du texte pour développer la balise h1 et voir son contenu.

Le volet suivant montre le code CSS de l'élément sélectionné. Il comporte des «pseudo-éléments» en haut du panneau et en dessous de cet élément. Les petites icônes en forme de carré basculent la mise en surbrillance de l'élément sélectionné, l'icône devenant bleue lorsque la mise en surbrillance est active.

Notez que dans Safari, vous pouvez également survoler les règles CSS et la partie de la page affectée sera mise en surbrillance, vous donnant un autre moyen d'identifier le CSS que vous souhaitez modifier.

Regardons maintenant le code CSS de l’élément h1, le code est

.hero .hero-image header > div h1 {
 line-height: 1.2;
}

Vous pouvez voir ces éléments imbriqués dans le panneau html :

<div class="hero"…>
…
<div class="hero-image">
…
<header>
<div>
<h1>

Notez que le code ne cible que cette balise h1 spécifique et aucune autre balise h1, si elles existent sur cette page.

Le code définit la hauteur de ligne, l'espace entre les lignes de texte, et vous pouvez voir son effet en déplaçant le curseur sur le code et en cliquant en haut et en bas sur la petite case à cocher qui apparaît. Remarquez comment le mot Tigre se rapproche du texte en dessous et le fond sombre se réduit légèrement. Avec la case à cocher sélectionnée, double-cliquez sur le chiffre rouge '1.2', puis coupez-le (CMD/CTRL+X), vous pouvez maintenant saisir une nouvelle valeur, par exemple 4, et voir à quoi il ressemble avec cette valeur. Double-cliquez sur le 4 et collez pour restaurer la valeur d'origine.

Cela vous indique que pour changer la hauteur de ligne de cet élément, vous devez saisir le code dans le champ CSS personnalisé du skin.

.hero .hero-image header > div h1 {
line-height: 4;
}

Supposons que nous voulions changer la couleur du texte pour la date ? Assurez-vous que l'élément h1 est développé et dans le premier panneau (HTML), sélectionnez la ligne avec la date. Dans le panneau CSS, recherchez le code 'element', qui est

.hero .hero-image header > div h1 .date {
 border-top-color: 
 #eeeeee;
 border-bottom-color:
 #eeeeee;
}

Il n'y a pas de propriété 'color', la couleur est 'héritée' de la règle d'un parent. Nous devons donc en ajouter une pour voir la couleur que nous voulions utiliser, disons le rouge. cliquez une fois à côté du '{' pour ouvrir un nouveau champ de propriété. Entrez 'color' et appuyez sur la touche 'Tab', puis tapez "red" ou sélectionnez-le dans le menu contextuel en double-cliquant sur le rouge ou sur une autre couleur de votre choix. Vous pouvez bien sûr utiliser des couleurs hexagonales telles que #ff0000; au lieu de red. Cliquez sur la case à cocher pour activer ou désactiver le changement de couleur. Pour supprimer le code de couleur, si vous changez d'avis, double-cliquez sur la propriété 'couleur' puis appuyez sur la touche de suppression, puis cliquez n'importe où pour le supprimer. Pour effectuer le changement dans le skin, ajoutez le code CSS personnalisé.

.hero .hero-image header > div h1 .date {
 color:red;
}

Notez que les propriétés CSS de l'élément indiquent le fichier dans lequel le code apparaît et le numéro de ligne à rechercher. En utilisant le texte de la date, dans la balise 'span' comme exemple, notez que le code se trouve dans le fichier 'common.css' et apparaît à la ligne 1281. Si vous cliquez sur le nom de ce fichier, l'Editeur de style' s'ouvrira. Vous pouvez simplement y saisir de nombreux changements de règles CSS que vous souhaitez essayer.

Un autre exemple est de changer la couleur du texte pour les légendes du dossier, Landscape, People, Nature, etc. Faites un clic droit sur le mot 'Landscape' et sélectionnez inspecter l'élément. La ligne HTML avec Landscape est mise en évidence et sur le panneau CSS, nous pouvons voir le code

.thumbnails .column .card .caption > :first-child {
padding-top: 0.625 rem;

Comme précédemment, cliquez dans cette zone pour créer une nouvelle entrée et entrez 'color', appuyez sur la touche de tabulation et tapez "red;". Notez que tous les noms de dossier sont désormais en texte rouge. Supposons que nous voulions également changer la couleur du texte lorsque le curseur survole la zone de vignettes (.card) ? Nous devons utiliser la même cible CSS que pour la couleur mais la modifier pour qu'elle ne fonctionne que "en survol", cliquez sur le code

.thumbnails .column .card .caption > :first-child {

et copiez-le.

Nous devons ajouter une nouvelle règle, alors cliquez sur l'icône '+' dans le panneau CSS, puis collez le code que nous venons de copier en ajoutant ': hover' immédiatement après '.card', pour qu'il ressemble à ceci :

.thumbnails .column .card:hover .caption > :first-child {
}

Maintenant, cliquez dans la zone pour ajouter une nouvelle entrée et entrez color, puis appuyez sur la touche 'Tab' et choisissez une couleur dans la liste. Remarquez la nouvelle couleur de toutes les légendes de dossier lorsque vous survolez chacune d'elles tour à tour. Encore une fois, pour utiliser ces nouvelles couleurs, nous devons les coller dans le code CSS personnalisé du skin

.thumbnails .column .card .caption > :first-child {
colour: red;
}

.thumbnails .column .card:hover .caption > :first-child {
color: blue;
}

De nombreux skins sont 'réactifs', c’est-à-dire que les tailles des images et des vidéos changent à mesure que la largeur du navigateur change. Si vous devez modifier une règle CSS pour différents appareils ou largeurs de navigateur, le code ressemblera à ceci :

@media screen and (max-width: 600px) {
  .mylogo {
    position: relative;
    top: -10px;
  }
}

La première ligne cible les appareils pilotés par l’écran et définit les règles incluses lorsque la largeur du navigateur est de 600px ou moins. La deuxième ligne est une règle qui sera activée/mise à jour, les deux lignes suivantes sont les propriétés en cours de définition. Vous pouvez inclure plusieurs règles dans chaque bloc 'média'. En plus d’appliquer des règles basées sur une largeur maximale, vous pouvez également utiliser une largeur minimale 'min-width'. Enfin, vous pouvez appliquer différentes règles pour différentes largeurs de navigateur, chaque règle étant activée à mesure que la largeur du navigateur change.

Vous pouvez lire l'utilisation des outils de développement de navigateur dans les pages d'aide du navigateur de votre choix :
Chrome
Edge
Safari
Firefox