Apprendre à Modifier le Head (les bases actualisées 2016)
Page 1 sur 1
Apprendre à Modifier le Head (les bases actualisées 2016)
par FredVig Dim 2 Aoû 2015 - 18:58
EDIT 2018 :Valide sous Firefox 59.0.2
Tutoriel officiel Jimdo :
https://support.jimdo.com/faq/how-to-modify-jimdo-templates-with-css/
filmsdelover.com a proposé plusieurs tutoriels sur notre ancien forum :
CSS modifier un peu…
Les bases de la modification…
Cette aide est complète, progressive et claire, et pourrait vous convenir davantage, selon vos connaissances et votre façon d'apprendre.
Le sujet est vaste.
Ce tutoriel est long et constitue une introduction.
Lisez-le progressivement, en essayant de ne pas laisser d'explications incomprises.
Relisez-le si des conclusions vous semblent floues.
Dans ce premier post, vous restez en mode visiteur, sur n'importe quel site Jimdo.
Vous n'ouvrirez votre site en mode éditeur que plus loin, dans les posts suivants
Comment modifier "votre" Jimdo "avec du code" ?
1) : L'inspecteur
Vous travaillerez sur Firefox dernière version.
L'inspecteur existe aussi sous Chrome et Safari avec des fonctions similaires.
1- Commencez par formuler très précisément ce que vous voulez obtenir.
> D'abord, en terme d'objectif (par exemple : "plus lisible").
Puis, en terme de moyens (par exemple : "moins d'espace entre le titre et les menus")
2- Vérifiez que la console d'administration Jimdo ne permet pas cette modification.
> Très souvent, un moyen détourné permet d'accomplir la modification "impossible".
> Vérifiez que votre design correspond à ce que vous voulez réaliser. Certaines dispositions sont très complexes à modifier (et d'autres, très simples, forcément!).
Changez de design pour celui qui offre le plus de dispositions correspondants à vos attentes.
Une fois que vous êtes certains d'avoir besoin d'une personnalisation du template Jimdo, passez à l'action :
3- En mode visiteur, repérez l'élément à modifier : cliquez-droit dessus et choisissez "examinez l'élément" (Chrome : "procédez à l'inspection de l'élément").
Edit: Parfois, il est nécessaire d'aller "activer" l'inspecteur à partir du menu du navigateur :
Firefox > Outils > Développement WEB > Inspecteur
Chrome > Afficher > Options pour les développeurs > Outils de développement
Une série de fenêtres remplies de code s'affiche. Si vous connaissez un peu la structure d'un site Internet, un peu de html etc, cela vous paraîtra familier. Dans le cas contraire, c'est un peu effrayant, mais vous allez apprendre vite !
Notez que votre site ne risque rien. Tout ce que vous allez tester ici n'est que temporaire.
Observez cet "inspecteur" :
1- L'élément que vous voulez inspecter, se met en surbrillance * lorsque…
2- vous passez le curseur sur la ligne de code qui lui correspond…
3- les propriétés de l'élément s'affichent à droite (ou en dessous, selon les préférences de votre inspecteur)
* : (il peut être nécessaire de modifier les préférences de l'inspecteur)
Vous constatez :
- Que la page de votre site est composé d'une série de contenants imbriqués les uns dans les autres ou superposés les uns aux autres, un peu comme une collection de poupées gigognes, dans une vitrine, elle-même à côté d'autres vitrines, dans une pièce d'un immeuble comprenant plusieurs pièces par étages, plusieurs étages etc.
Remarque : Il est capital de comprendre le principe de cette organisation :
Les éléments se trouvent juxtaposés, sur un même niveau hiérarchique, et ils se superposent par ordre d'arrivée dans le code.
Chaque élément peut contenir d'autres éléments qui suivent le même principe d'organisation.
Les éléments inclus sont les "enfants" de leur élément "parent".
Par exemple, la page html actelle, comprend une balise
<html>
qui inclus les balises
<head> (ici, d'autres éléments enfants)</head>
et
<body>(ici, d'autres éléments enfants)</body>
et on referme le premier élément
</html>
- Que chaque contenant peut avoir un identifiant, marqué Id :
Celui-ci est l'équivalent d'un nom unique et permet de distinguer un contenant précis dans le code.
note : Beaucoup d'éléments n'ont pas d'identifiant unique. ils sont identifiés par leur "classe" ou leur "pseudo classe", qui sont communes à un ensemble d'éléments.
Plutôt qu'un nom unique, ils ont un caractère de famille : #RogerQuincapoix (identifiant unique) est .cordonnier, .pereDeFamille, .grandeGueule, (class)
à commencer par celui de la page elle-même, tout en haut de la liste :
- Regardant à droite, vous constatez que l'élément sélectionné est affecté par des propriétés diverses.
Ces propriétés sont séparées, et certaines sont parfois barrées d'une ligne :
>Les propriétés sont séparées, car elles sont de provenances diverses.
Ce sont les propriétés des contenants supérieurs, ou indiquées par diverses feuilles de style (…)
>Certaines sont barrées, car elles sont surpassées par les valeurs d'autres provenances.
Dans l'exemple ci-dessus, vous voyez que l'élément (un lien html) devrait avoir une couleur rouge (color: #red;) et un soulignement (text-decoration: underline;)mais que ceux-ci sont court-circuités par une indication contraire, qui doit se trouver un peu plus haut.
L'indication font.css:39 renvoi vers la feuille de style dans laquelle se trouve la valeur supplantée.
Vous aussi, vous pouvez "supplanter" chaque valeur de chaque élément. (vous avez de la marge de manœuvre…)
Vous allez modifier votre site en local : tout ce que vous ferez dans l'inspecteur se répercutera en "live" sur votre site, mais pas en ligne, c'est seulement pour vous.
Seule la fenêtre de votre navigateur subira temporairement les modifications.
Dès que vous rechargerez la page, tout reviendra à la normale.
ALLEZ_Y, IL N'Y A AUCUN RISQUE !
Sélectionnez un élément, (en CLIQUANT dessus) choisissez une de ses valeurs et modifiez-là !
Vous pouvez varier les chiffres en les tapant, ou en faisant varier leur valeur avec les flèches clavier.
Vous pouvez supprimer une propriété en cochant/décochant la case en regard
Vous pouvez changer les couleurs grâce à l'outil pickcolor inclus :
Si vous savez exactement quelle propriété ajouter, vous pouvez la taper en langage html en regard de la première ligne : élément {… (en plus, firefox vous fait des suggestions au fur et à mesure que vous tapez)
à ce stade, vous pouvez explorer à l'infini toutes les modifications possibles sur votre site (en fait, sur n'importe quel site… c'est sans conséquence, c'est de cette façon que nous vous aidons sur vos site dans ce forum)
Vous allez découvrir que :
>Selon l'endroit que vous modifiez, cela peut aussi modifier d'autres éléments.
Il va falloir apprendre à modifier uniquement ce que l'on veut modifier.
Certaines propriétés sont initiées par des identifiants : #conteneur,
des .class : .j-text,
des balises principales : p, body, div
ou des combinaisons des trois : #conteneur div.j-text
Mais, chaque élément possède heureusement son Sélecteur unique.
Cet étendard se récupère en faisant CLIC-droit sur l'élément dans l'inspecteur > Copier > le sélecteur CSS[/size][/color]
Grâce à ce sélecteur, vous allez précisément indiquer QUEL élément vous voulez modifier.
- Collez sur un bloc-note (type Word Pad pour PC ou TextEdit pour Mac ou encore l'ultime : SublimeText) ce sélecteur afin de l'utiliser plus tard dans votre "modifier le Head"
> h3:nth-child(1) est un code destiné à cibler une partie du texte à l'intérieur du contenant #cc-m-9858764398. C'est juste un exemple, vous verrez bien d'autres écritures destinées à cibler certains éléments précis, à en écarter d'autres…)
Copiez également les modifications de valeurs que vous avez testé en local, dans la fenêtre de droite.
(Commencez par une seule modification, un changement de couleur par exemple.)
- Collez-là devant le sélecteur en l'entourant d'accolades :
Voilà un code qui pourrait modifier la couleur du texte de ce contenant.
Mais comment le vérifier ?
Nous verrons cela dans un prochain article.
Un grand merci à Solie pour sa relecture
Tutoriel officiel Jimdo :
https://support.jimdo.com/faq/how-to-modify-jimdo-templates-with-css/
filmsdelover.com a proposé plusieurs tutoriels sur notre ancien forum :
CSS modifier un peu…
Les bases de la modification…
Cette aide est complète, progressive et claire, et pourrait vous convenir davantage, selon vos connaissances et votre façon d'apprendre.
Je vous propose en complément une nouvelle approche :
Le sujet est vaste.
Ce tutoriel est long et constitue une introduction.
Lisez-le progressivement, en essayant de ne pas laisser d'explications incomprises.
Relisez-le si des conclusions vous semblent floues.
Dans ce premier post, vous restez en mode visiteur, sur n'importe quel site Jimdo.
Vous n'ouvrirez votre site en mode éditeur que plus loin, dans les posts suivants
Comment modifier "votre" Jimdo "avec du code" ?
1) : L'inspecteur
Vous travaillerez sur Firefox dernière version.
L'inspecteur existe aussi sous Chrome et Safari avec des fonctions similaires.
1- Commencez par formuler très précisément ce que vous voulez obtenir.
> D'abord, en terme d'objectif (par exemple : "plus lisible").
Puis, en terme de moyens (par exemple : "moins d'espace entre le titre et les menus")
2- Vérifiez que la console d'administration Jimdo ne permet pas cette modification.
> Très souvent, un moyen détourné permet d'accomplir la modification "impossible".
> Vérifiez que votre design correspond à ce que vous voulez réaliser. Certaines dispositions sont très complexes à modifier (et d'autres, très simples, forcément!).
Changez de design pour celui qui offre le plus de dispositions correspondants à vos attentes.
Une fois que vous êtes certains d'avoir besoin d'une personnalisation du template Jimdo, passez à l'action :
3- En mode visiteur, repérez l'élément à modifier : cliquez-droit dessus et choisissez "examinez l'élément" (Chrome : "procédez à l'inspection de l'élément").
Edit: Parfois, il est nécessaire d'aller "activer" l'inspecteur à partir du menu du navigateur :
Firefox > Outils > Développement WEB > Inspecteur
Chrome > Afficher > Options pour les développeurs > Outils de développement
Une série de fenêtres remplies de code s'affiche. Si vous connaissez un peu la structure d'un site Internet, un peu de html etc, cela vous paraîtra familier. Dans le cas contraire, c'est un peu effrayant, mais vous allez apprendre vite !
Notez que votre site ne risque rien. Tout ce que vous allez tester ici n'est que temporaire.
Observez cet "inspecteur" :
1- L'élément que vous voulez inspecter, se met en surbrillance * lorsque…
2- vous passez le curseur sur la ligne de code qui lui correspond…
3- les propriétés de l'élément s'affichent à droite (ou en dessous, selon les préférences de votre inspecteur)
* : (il peut être nécessaire de modifier les préférences de l'inspecteur)
Vous constatez :
- Que la page de votre site est composé d'une série de contenants imbriqués les uns dans les autres ou superposés les uns aux autres, un peu comme une collection de poupées gigognes, dans une vitrine, elle-même à côté d'autres vitrines, dans une pièce d'un immeuble comprenant plusieurs pièces par étages, plusieurs étages etc.
Remarque : Il est capital de comprendre le principe de cette organisation :
Les éléments se trouvent juxtaposés, sur un même niveau hiérarchique, et ils se superposent par ordre d'arrivée dans le code.
Chaque élément peut contenir d'autres éléments qui suivent le même principe d'organisation.
Les éléments inclus sont les "enfants" de leur élément "parent".
Par exemple, la page html actelle, comprend une balise
<html>
qui inclus les balises
<head> (ici, d'autres éléments enfants)</head>
et
<body>(ici, d'autres éléments enfants)</body>
et on referme le premier élément
</html>
- Que chaque contenant peut avoir un identifiant, marqué Id :
Celui-ci est l'équivalent d'un nom unique et permet de distinguer un contenant précis dans le code.
note : Beaucoup d'éléments n'ont pas d'identifiant unique. ils sont identifiés par leur "classe" ou leur "pseudo classe", qui sont communes à un ensemble d'éléments.
Plutôt qu'un nom unique, ils ont un caractère de famille : #RogerQuincapoix (identifiant unique) est .cordonnier, .pereDeFamille, .grandeGueule, (class)
à commencer par celui de la page elle-même, tout en haut de la liste :
- Regardant à droite, vous constatez que l'élément sélectionné est affecté par des propriétés diverses.
Ces propriétés sont séparées, et certaines sont parfois barrées d'une ligne :
>Les propriétés sont séparées, car elles sont de provenances diverses.
Ce sont les propriétés des contenants supérieurs, ou indiquées par diverses feuilles de style (…)
>Certaines sont barrées, car elles sont surpassées par les valeurs d'autres provenances.
Dans l'exemple ci-dessus, vous voyez que l'élément (un lien html) devrait avoir une couleur rouge (
L'indication font.css:39 renvoi vers la feuille de style dans laquelle se trouve la valeur supplantée.
Vous aussi, vous pouvez "supplanter" chaque valeur de chaque élément. (vous avez de la marge de manœuvre…)
Vous allez modifier votre site en local : tout ce que vous ferez dans l'inspecteur se répercutera en "live" sur votre site, mais pas en ligne, c'est seulement pour vous.
Seule la fenêtre de votre navigateur subira temporairement les modifications.
Dès que vous rechargerez la page, tout reviendra à la normale.
ALLEZ_Y, IL N'Y A AUCUN RISQUE !
Sélectionnez un élément, (en CLIQUANT dessus) choisissez une de ses valeurs et modifiez-là !
Vous pouvez varier les chiffres en les tapant, ou en faisant varier leur valeur avec les flèches clavier.
Vous pouvez supprimer une propriété en cochant/décochant la case en regard
Vous pouvez changer les couleurs grâce à l'outil pickcolor inclus :
Si vous savez exactement quelle propriété ajouter, vous pouvez la taper en langage html en regard de la première ligne : élément {… (en plus, firefox vous fait des suggestions au fur et à mesure que vous tapez)
à ce stade, vous pouvez explorer à l'infini toutes les modifications possibles sur votre site (en fait, sur n'importe quel site… c'est sans conséquence, c'est de cette façon que nous vous aidons sur vos site dans ce forum)
Vous allez découvrir que :
>Selon l'endroit que vous modifiez, cela peut aussi modifier d'autres éléments.
Il va falloir apprendre à modifier uniquement ce que l'on veut modifier.
Certaines propriétés sont initiées par des identifiants : #conteneur,
des .class : .j-text,
des balises principales : p, body, div
ou des combinaisons des trois : #conteneur div.j-text
Mais, chaque élément possède heureusement son Sélecteur unique.
Cet étendard se récupère en faisant CLIC-droit sur l'élément dans l'inspecteur > Copier > le sélecteur CSS[/size][/color]
Grâce à ce sélecteur, vous allez précisément indiquer QUEL élément vous voulez modifier.
- Collez sur un bloc-note (type Word Pad pour PC ou TextEdit pour Mac ou encore l'ultime : SublimeText) ce sélecteur afin de l'utiliser plus tard dans votre "modifier le Head"
- Code:
#cc-m-9858764398 > h3:nth-child(1)
> h3:nth-child(1) est un code destiné à cibler une partie du texte à l'intérieur du contenant #cc-m-9858764398. C'est juste un exemple, vous verrez bien d'autres écritures destinées à cibler certains éléments précis, à en écarter d'autres…)
Copiez également les modifications de valeurs que vous avez testé en local, dans la fenêtre de droite.
(Commencez par une seule modification, un changement de couleur par exemple.)
- Collez-là devant le sélecteur en l'entourant d'accolades :
- Code:
#cc-m-9858764398 > h3:nth-child(1)
{color: rgb(17, 159, 134);}
Voilà un code qui pourrait modifier la couleur du texte de ce contenant.
Mais comment le vérifier ?
Nous verrons cela dans un prochain article.
Un grand merci à Solie pour sa relecture
Dernière édition par FredVig le Lun 21 Jan 2019 - 13:46, édité 40 fois
FredVig- Messages : 2394
Date d'inscription : 07/10/2014 -
Re: Apprendre à Modifier le Head (les bases actualisées 2016)
par FredVig Lun 3 Aoû 2015 - 11:28
2 : Vérifier que la modification de propriété est correcte.
Vous avez écrit, sur un logiciel de prise de note, un code "temporaire" du genre :
Dans mon exemple c'était une nouvelle couleur pour mon texte de présentation :
Copiez le code. Rechargez la page du site inspecté (commande R, rafraichir…) afin d'effacer les modifications temporaires de vos tests.
Revenez sur l'inspecteur.
Vous devriez arriver sur l'onglet de l'inspecteur que nous avons vu en premier, affichant le code html de la page du site, et les propriétés à droite (peut être placé différemment par des préférences).
Dans la barre du haut de l'inspecteur se trouvent d'autres onglets : Inspecteur (actif), Console, Débogueur javascript, Editeur de feuilles de style CSS (…)
Chacune de ces fenêtre correspond à un outil de contrôle des fonctions du site.
N'hésitez pas à les explorer.
Toutefois, nous n'avons besoin ici que de l'Editeur de feuilles de style CSS, le 4° onglet.
Allez-y, vous voyez s'afficher à gauche la liste des feuilles de style qui pilotent la page.
Décochez les "yeux" à gauche pour voir comment réagit la page.
Vous obtenez un aperçu du contenu html brut de la page.
Tous les aspects de mise en forme sont pilotés par ces feuilles de style que vous venez de court-circuiter. Rafraîchissez pour revenir à la normale.
Les sites Jimdo ont tous une structure commune, on retrouvera en conséquence des listes similaires de feuilles de style, main.css, layout.css, font.css etc. Mais cela importe peu ici.
Sachez que lorsque vous "Modifiez le Head" de votre site Jimdo, le plus souvent, cela fabrique une nouvelle "feuille de style embarquée", comme celle que vous voyez numérotée #11 sur l'image.
Pour l'instant, vous voulez juste vérifier que votre code fonctionne.
Rafraîchissez encore, puis cliquez sur n'importe quelle feuille de style embarquée
(sur les nouveaux design, il en existe de nombreuses. Pour un ancien design, prenez n'importe quelle feuille)
à droite s'affiche le contenu de la feuille de style, écrit en CSS.
Vous devez reconnaitre la structure :
Cliquez après une accolade fermée, et collez votre code.
S'il ne fonctionne pas, vérifiez que vous avez bien écrit tous les signes, le point virgule à la fin, les accolades.
Souvent, il est nécessaire d'ajouter une commande qui permet à votre modification de supplanter les autres :
Remarque : La commande !important ne doit être utilisée que lorsque c'est vraiment indispensable. Elle est incompatible avec le standard W3C
3 - Appliquer la modification à votre page
Mettons que ça fonctionne…
Copier votre code, tel que vous l'avez écrit dans la feuille de style de l'inspecteur :
"#nomDuContenantAModifier{proprieteAModifier: nouvelleValeur!important;}"
Ouvrez votre site en mode administrateur
à partir d'ici, vos interventions peuvent modifier votre site.
Allez dans "paramètres" puis dans "modifier le Head".
Si vous avez une page vierge, c'est votre première modification de site, il va falloir déclarer une feuille de style.
Restez sur l'onglet "site entier"
Collez votre code, puis encadrez-le des balises suivantes :
EDIT : Depuis 2016, il suffit d'ajouter les balises <style> (votre code) </style>. Jimdo rectifie seul l'écriture lors de l'enregistrement
Ce qui donne dans mon exemple :
Pour vous y retrouver plus tard, commenter vos codes en encadrant les commentaires de balises /* et */
Cliquez sur "enregistrer", tester votre site en mode visiteur après avoir rafraîchit la page. Si ça ne fonctionne pas, reprenez au début et cherchez l'erreur.
Voilà pour une première approche.
Bien entendu, la modification de HEAD est une grande maison.
je vous ai juste conduit dans le vestibule de l'entrée.
Visitez à loisir.
Sachez :
- Qu'il est possible d'inscrire d'autres types de modifications dans le Head (comme du code javascript, des nouvelles polices web…)
- Qu'il est possible (version Pro et business) de modifier le Head page par page (onglet page ou article de blog sélectionné)
- Que vous DEVEZ sauvegarder vos codes (mode texte en blocknote par exemple) car il arrive de tout supprimer, en oubliant une simple virgule. (essayez "commande-Z" dans ce cas…
)
- Que chaque code est SPéCIFIQUE à UN SITE PRéCIS
il ne sert à rien d'essayer tel ou tel code glané sur le forum sans chercher à comprendre son fonctionnement. (J'avoue… j'ai commencé comme ça, moi aussi.)
- Sachez aussi que chaque navigateur comprend les propriétés avec de légères variantes d'écritures. Il est parfois nécessaire d'écrire un code dans différentes syntaxes :
Exemple: Voici un code destiné à réaliser une animation sur un contenant :
Vérifiez donc vos syntaxes sur des sites de référence de codes,
Référence des codes (anglais))
base réf Mozilla
ou dans des générateurs de CSS.
Un des nombreux générateurs de codes
Pour conclure, j'ai voulu guider sans expliquer tout l'environnement, afin d'aller droit à l'illustration d'un exemple. Il faudrait poursuivre en essayent de comprendre à quoi correspond chaque indication de l'inspecteur.
Je pense en particulier aux outils d'inspection du javascript, à la fenêtre de modélisation de mobile sur l'inspecteur de Chrome, aux balises @media, qui s'affichent lorsque une modification dépend d'une propriété du navigateur ou d'un autre facteur.
Enfin, de nombreuses pages seraient utiles à expliquer comment cibler un élément à travers son identifiant, sa classe, sa position dans un autre contenant, l'une de ses propriété.
Bonne visite et à vous de jouer maintenant !
Vous avez écrit, sur un logiciel de prise de note, un code "temporaire" du genre :
- Code:
#nomDuContenant
{
propriété: nouvelle valeur de propriété
;
}
Dans mon exemple c'était une nouvelle couleur pour mon texte de présentation :
- Code:
#cc-m-9858764398 > h3:nth-child(1)
{color: rgb(17, 159, 134);}
Copiez le code. Rechargez la page du site inspecté (commande R, rafraichir…) afin d'effacer les modifications temporaires de vos tests.
Revenez sur l'inspecteur.
Vous devriez arriver sur l'onglet de l'inspecteur que nous avons vu en premier, affichant le code html de la page du site, et les propriétés à droite (peut être placé différemment par des préférences).
Dans la barre du haut de l'inspecteur se trouvent d'autres onglets : Inspecteur (actif), Console, Débogueur javascript, Editeur de feuilles de style CSS (…)
Chacune de ces fenêtre correspond à un outil de contrôle des fonctions du site.
N'hésitez pas à les explorer.
Toutefois, nous n'avons besoin ici que de l'Editeur de feuilles de style CSS, le 4° onglet.
Allez-y, vous voyez s'afficher à gauche la liste des feuilles de style qui pilotent la page.
Décochez les "yeux" à gauche pour voir comment réagit la page.
Vous obtenez un aperçu du contenu html brut de la page.
Tous les aspects de mise en forme sont pilotés par ces feuilles de style que vous venez de court-circuiter. Rafraîchissez pour revenir à la normale.
Les sites Jimdo ont tous une structure commune, on retrouvera en conséquence des listes similaires de feuilles de style, main.css, layout.css, font.css etc. Mais cela importe peu ici.
Sachez que lorsque vous "Modifiez le Head" de votre site Jimdo, le plus souvent, cela fabrique une nouvelle "feuille de style embarquée", comme celle que vous voyez numérotée #11 sur l'image.
Pour l'instant, vous voulez juste vérifier que votre code fonctionne.
Rafraîchissez encore, puis cliquez sur n'importe quelle feuille de style embarquée
(sur les nouveaux design, il en existe de nombreuses. Pour un ancien design, prenez n'importe quelle feuille)
à droite s'affiche le contenu de la feuille de style, écrit en CSS.
Vous devez reconnaitre la structure :
- Code:
#contenant {propriété: valeur;}
ou
.classe {propriété: valeur;}
ou des combinaisons :
#contenant1, #contenant2 {propriété1: valeur1; propriété2: valeur2;}
Cliquez après une accolade fermée, et collez votre code.
S'il ne fonctionne pas, vérifiez que vous avez bien écrit tous les signes, le point virgule à la fin, les accolades.
Souvent, il est nécessaire d'ajouter une commande qui permet à votre modification de supplanter les autres :
- Code:
!important
- Code:
#nomDuContenant
{
propriété: nouvelle valeur de propriété
!important
;
}
Remarque : La commande !important ne doit être utilisée que lorsque c'est vraiment indispensable. Elle est incompatible avec le standard W3C
3 - Appliquer la modification à votre page
Mettons que ça fonctionne…
Copier votre code, tel que vous l'avez écrit dans la feuille de style de l'inspecteur :
"#nomDuContenantAModifier{proprieteAModifier: nouvelleValeur!important;}"
Ouvrez votre site en mode administrateur
à partir d'ici, vos interventions peuvent modifier votre site. Allez dans "paramètres" puis dans "modifier le Head".
Si vous avez une page vierge, c'est votre première modification de site, il va falloir déclarer une feuille de style.
Restez sur l'onglet "site entier"
Collez votre code, puis encadrez-le des balises suivantes :
EDIT : Depuis 2016, il suffit d'ajouter les balises <style> (votre code) </style>. Jimdo rectifie seul l'écriture lors de l'enregistrement
- Code:
<style type="text/css">
/*<![CDATA[*/
ICI VIENDRONT TOUS VOS CODES DE MODIFICATION CSS POUR TOUT LE SITE
/*]]>*/
</style>
Ce qui donne dans mon exemple :
- Code:
<style type="text/css">
/*<![CDATA[*/
#cc-m-9858764398 > h3:nth-child(1)
{color: rgb(17, 159, 134)!important;}
/*]]>*/
</style>
Pour vous y retrouver plus tard, commenter vos codes en encadrant les commentaires de balises /* et */
- Code:
<style type="text/css">
/*<![CDATA[*/
/* La ligne ci-dessous modifie la couleur du texte de présentation sur la première page */
#cc-m-9858764398 > h3:nth-child(1)
{color: rgb(17, 159, 134)!important;}
/*]]>*/
</style>
Cliquez sur "enregistrer", tester votre site en mode visiteur après avoir rafraîchit la page. Si ça ne fonctionne pas, reprenez au début et cherchez l'erreur.
Voilà pour une première approche.
Bien entendu, la modification de HEAD est une grande maison.
je vous ai juste conduit dans le vestibule de l'entrée.
Visitez à loisir.
Sachez :
- Qu'il est possible d'inscrire d'autres types de modifications dans le Head (comme du code javascript, des nouvelles polices web…)
- Qu'il est possible (version Pro et business) de modifier le Head page par page (onglet page ou article de blog sélectionné)
- Que vous DEVEZ sauvegarder vos codes (mode texte en blocknote par exemple) car il arrive de tout supprimer, en oubliant une simple virgule. (essayez "commande-Z" dans ce cas…
)- Que chaque code est SPéCIFIQUE à UN SITE PRéCIS
il ne sert à rien d'essayer tel ou tel code glané sur le forum sans chercher à comprendre son fonctionnement. (J'avoue… j'ai commencé comme ça, moi aussi.)
- Sachez aussi que chaque navigateur comprend les propriétés avec de légères variantes d'écritures. Il est parfois nécessaire d'écrire un code dans différentes syntaxes :
Exemple: Voici un code destiné à réaliser une animation sur un contenant :
- Code:
.AnimationRotation {
-webkit-animation: cssAnimation 1s 16 ease;
-moz-animation: cssAnimation 1s 16 ease;
-o-animation: cssAnimation 1s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(17deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(17deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(17deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
Vérifiez donc vos syntaxes sur des sites de référence de codes,
Référence des codes (anglais))
base réf Mozilla
ou dans des générateurs de CSS.
Un des nombreux générateurs de codes
Pour conclure, j'ai voulu guider sans expliquer tout l'environnement, afin d'aller droit à l'illustration d'un exemple. Il faudrait poursuivre en essayent de comprendre à quoi correspond chaque indication de l'inspecteur.
Je pense en particulier aux outils d'inspection du javascript, à la fenêtre de modélisation de mobile sur l'inspecteur de Chrome, aux balises @media, qui s'affichent lorsque une modification dépend d'une propriété du navigateur ou d'un autre facteur.
Enfin, de nombreuses pages seraient utiles à expliquer comment cibler un élément à travers son identifiant, sa classe, sa position dans un autre contenant, l'une de ses propriété.
Bonne visite et à vous de jouer maintenant !
Dernière édition par FredVig le Lun 21 Jan 2019 - 13:55, édité 17 fois
FredVig- Messages : 2394
Date d'inscription : 07/10/2014 -
Sélection d'un élément précis à l'aide de l'inspecteur
par FredVig Lun 3 Aoû 2015 - 11:41
Quoi cibler ?
Au début, il est compliqué de déterminer l'élément à modifier :
- Les éléments sont imbriqués et une modification de l'un des éléments peut toucher tous les autres de la pile.
- Les éléments sont caractérisés par des "class". Leur aspect dépend parfois des propriétés associées à ces "class". Si on modifie une propriété, la modification touche l'ensemble des éléments portant la même "class".
- Enfin, un même élément peut avoir plusieurs valeurs d'une même propriété. Lorsque c'est le cas, vous verrez des valeurs barrées dans le code de l'inspecteur. Une seule valeur va prendre le dessus sur les autres. L'ordre d'écriture dans le code, les conditions associées, ou la balise !important] peuvent déterminer quelle valeur prend le dessus.
Par exemple, le texte est noir par défaut, mais les titres sont de couleur rouge. Dans le code, le titre sera indiqué à la foisnoir, car c'est un texte, et rouge, mais le rouge l'emportera, car cette dernière valeur (rouge) touche uniquement les titres. Tous les titres sont des textes, mais tous les textes ne sont pas des titres, aussi la valeur de l'identifiant le plus spécifique l'emporte.
je vous propose d'avoir un aperçu de cette complexité apparente.
Vous découvrirez au fil de vos expériences qu'il s'agit d'une logique systématique qui peut s'acquérir.
Juxtaposition et imbrication
L'inspecteur de firefox proposait une vision en 3D de la structure de la page.
L'outil 3D de Firefox a été supprimé depuis la v47
Mais cette image qui donnait une bonne idée de l'empilement des éléments d'un site.
Vous pouvez voir que les éléments sont imbriqués les uns dans les autres, ou juxtaposés, "côte à côte".
Note sur le z-index :
A l'intérieur de chaque contenant, chaque élément occupe une position d'empilement unique. Cette propriété (ordre d'empilement) est le z-index.
Modifier le z-index est assez délicat. On ne le fait que par nécessité et cela a souvent des conséquences qu'il faut contrebalancer. Par analogie, si vous pouvez changer l'ordre des cartes d'un jeu à l'intérieur d'un paquet, toutes les cartes du jeu resteront au-dessus (ou au dessous) des cartes d'un autre jeu, rangées dans un autre paquet.
Modifier le Z-index est presque toujours une mauvaise idée. Il existe d'autres techniques plus complètes, plus souples, et surtout plus compatibles, comme le groupe des modifications liées à la propriété Flex.
Quel élément cibler ?
Parfois, il est complexe de comprendre pourquoi tel élément est affecté par une propriété, tant la liste des valeurs est longue. Certaines sont barrées, certaines sont conditionnelles…
EN MODE VISITEUR SUR UN SITE QUELCONQUE
inspectez l'élément, sélectionnez-le dans l'inspecteur.
sur la droite en haut, cliquez l'onglet "Calculé".
Vous voyez s'afficher toutes les propriétés qui affectent cet élément, ainsi que l'endroit où cela est écrit (en ouvrant les triangle sous les propriétés)
- Dans l'onglet "Règles", les valeurs sont décrites avec leur contexte, telles qu'elles sont écrites dans les feuilles de style. Aussi, vous y trouvez la cible (l'élément qui vous intéresse), mais aussi (en grisé) les cibles associées, les éléments qui sont affectés par la même propriété sans effet sur votre recherche.
Il peut être utile de constater, par exemple, que tous les paragraphes de blog suivent le même design que le paragraphe de texte que vous voulez modifier, afin de conserver une cohérence esthétique.
Vous pouvez aussi voir toutes les valeurs qui sont supplantées par d'autres.
- Dans l'onglet "Calculé", les propriétés qui affectent l'élément sélectionné sont rassemblées en une liste plus pratique. Toutefois, on ne peut pas voir le contexte qui impose ces valeurs, à moins d'ouvrir les triangles en regard.
Pourquoi est-ce si compliqué ?
Chaque élément du site est comme un individu dans une ville, au carrefour d'une multitude de directives.
Par analogie…
- Certaines sont d'ordre général : la gravité s'applique de haut en bas pour tout le monde
- Certaines sont attribuées via des classes : si on vous colle l'étiquette .saintpatrick, vous porterez un chapeau vert.
- Certaines dépendent de votre contenant : Votre entreprise est frappée d'une utilisation obligatoire de la Comic sans, vous devez aussi écrire avec. Votre entreprise est délocalisée en bas de page, vous la suivez en gardant votre place à l'intérieur de cette entreprise.
- Certaines sont conditionnelles : Si la souris passe au dessus de vous, rougissez !
- Certaines ciblent des éléments très précis : Le troisième paragraphe de l'employé #09456739, au rapport !
- Certaines enfin, ne concerne que vous, grâce au ciblage par l'identifiant unique.
Mais il ne faut pas l'utiliser systématiquement :
Vous n'allez pas changer les motifs de la tenue réglementaire de toutes les pensionnaires une par une ! Vous envoyez juste une commande avec un modèle chez le fabricant. Même modifs pour tout le monde.
Aussi est-il utile de comprendre d'où viennent les ordres et ce qu'ils visent.
Au début, il est compliqué de déterminer l'élément à modifier :
- Les éléments sont imbriqués et une modification de l'un des éléments peut toucher tous les autres de la pile.
- Les éléments sont caractérisés par des "class". Leur aspect dépend parfois des propriétés associées à ces "class". Si on modifie une propriété, la modification touche l'ensemble des éléments portant la même "class".
- Enfin, un même élément peut avoir plusieurs valeurs d'une même propriété. Lorsque c'est le cas, vous verrez des valeurs barrées dans le code de l'inspecteur. Une seule valeur va prendre le dessus sur les autres. L'ordre d'écriture dans le code, les conditions associées, ou la balise !important] peuvent déterminer quelle valeur prend le dessus.
Par exemple, le texte est noir par défaut, mais les titres sont de couleur rouge. Dans le code, le titre sera indiqué à la fois
je vous propose d'avoir un aperçu de cette complexité apparente.
Vous découvrirez au fil de vos expériences qu'il s'agit d'une logique systématique qui peut s'acquérir.
Juxtaposition et imbrication
L'inspecteur de firefox proposait une vision en 3D de la structure de la page.
L'outil 3D de Firefox a été supprimé depuis la v47
Mais cette image qui donnait une bonne idée de l'empilement des éléments d'un site.
Vous pouvez voir que les éléments sont imbriqués les uns dans les autres, ou juxtaposés, "côte à côte".
Note sur le z-index :
A l'intérieur de chaque contenant, chaque élément occupe une position d'empilement unique. Cette propriété (ordre d'empilement) est le z-index.
Modifier le z-index est assez délicat. On ne le fait que par nécessité et cela a souvent des conséquences qu'il faut contrebalancer. Par analogie, si vous pouvez changer l'ordre des cartes d'un jeu à l'intérieur d'un paquet, toutes les cartes du jeu resteront au-dessus (ou au dessous) des cartes d'un autre jeu, rangées dans un autre paquet.
Modifier le Z-index est presque toujours une mauvaise idée. Il existe d'autres techniques plus complètes, plus souples, et surtout plus compatibles, comme le groupe des modifications liées à la propriété Flex.
Quel élément cibler ?
Parfois, il est complexe de comprendre pourquoi tel élément est affecté par une propriété, tant la liste des valeurs est longue. Certaines sont barrées, certaines sont conditionnelles…
EN MODE VISITEUR SUR UN SITE QUELCONQUE
inspectez l'élément, sélectionnez-le dans l'inspecteur.
sur la droite en haut, cliquez l'onglet "Calculé".
Vous voyez s'afficher toutes les propriétés qui affectent cet élément, ainsi que l'endroit où cela est écrit (en ouvrant les triangle sous les propriétés)
- Dans l'onglet "Règles", les valeurs sont décrites avec leur contexte, telles qu'elles sont écrites dans les feuilles de style. Aussi, vous y trouvez la cible (l'élément qui vous intéresse), mais aussi (en grisé) les cibles associées, les éléments qui sont affectés par la même propriété sans effet sur votre recherche.
Il peut être utile de constater, par exemple, que tous les paragraphes de blog suivent le même design que le paragraphe de texte que vous voulez modifier, afin de conserver une cohérence esthétique.
Vous pouvez aussi voir toutes les valeurs qui sont supplantées par d'autres.
- Dans l'onglet "Calculé", les propriétés qui affectent l'élément sélectionné sont rassemblées en une liste plus pratique. Toutefois, on ne peut pas voir le contexte qui impose ces valeurs, à moins d'ouvrir les triangles en regard.
Pourquoi est-ce si compliqué ?
Chaque élément du site est comme un individu dans une ville, au carrefour d'une multitude de directives.
Par analogie…
- Certaines sont d'ordre général : la gravité s'applique de haut en bas pour tout le monde
- Certaines sont attribuées via des classes : si on vous colle l'étiquette .saintpatrick, vous porterez un chapeau vert.
- Certaines dépendent de votre contenant : Votre entreprise est frappée d'une utilisation obligatoire de la Comic sans, vous devez aussi écrire avec. Votre entreprise est délocalisée en bas de page, vous la suivez en gardant votre place à l'intérieur de cette entreprise.
- Certaines sont conditionnelles : Si la souris passe au dessus de vous, rougissez !
- Certaines ciblent des éléments très précis : Le troisième paragraphe de l'employé #09456739, au rapport !
- Certaines enfin, ne concerne que vous, grâce au ciblage par l'identifiant unique.
Mais il ne faut pas l'utiliser systématiquement :
Vous n'allez pas changer les motifs de la tenue réglementaire de toutes les pensionnaires une par une ! Vous envoyez juste une commande avec un modèle chez le fabricant. Même modifs pour tout le monde.
Aussi est-il utile de comprendre d'où viennent les ordres et ce qu'ils visent.
Dernière édition par FredVig le Mer 24 Oct 2018 - 11:15, édité 5 fois
FredVig- Messages : 2394
Date d'inscription : 07/10/2014 -
Contenu sponsorisé
Sujets similaires» "Modifier le head"
» Modifier dans le head
» Les bases de la modification du design d'un site Jimdo
» Modifier head avec taille police différente
» Modifier Head Menu et Logo. Design: Melbourne
» Modifier dans le head
» Les bases de la modification du design d'un site Jimdo
» Modifier head avec taille police différente
» Modifier Head Menu et Logo. Design: Melbourne
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|