Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Apprendre à Modifier le Head (les bases actualisées 2016)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Apprendre à Modifier le Head (les bases actualisées 2016)

Message par FredVig le Dim 2 Aoû 2015 - 18:58

EDIT 2017 : Lisez aussi le tutoriel officiel ici 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. Un travail remarquable qui m'a mis le pied à l'étrier. Bien que restant entièrement exacte, elle est devenue un peu moins pratique depuis la nouvelle interface et le nouveau forum, car les images et les liens avaient été rompus, on ne voit plus les illustrations de ses démonstrations.
Je vous propose en complément cette nouvelle approche.

EDIT OCTOBRE 2016 Firefox 49 :
L'inspecteur ayant changé, je reprends ce post pour corriger.

Comment modifier un aspect de votre site Jimdo qui n'est pas accessible avec les outils de l'interface ?
Première partie : L'inspecteur


Vous travaillerez sur Firefox dernière version. Les fonctions existent aussi sous Chrome.
Pour des raisons de clarté, je ne les indique pas systématiquement, mais elles sont 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 (encore) que l'interface ne permet pas de réaliser la 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.
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
* : (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, de diverses natures, imbriqués les uns dans les autres ou superposés les uns aux autres, un peu comme une collection de poupées gigognes.

- Que chaque contenant (ou presque) possède un nom, son identifiant unique, marqué Id :
note : Beaucoup d'éléments n'ont pas d'identifiant unique. ils sont identifiés par leur "classe", qui peut être commune à 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 un clic-droit sur la ligne correspondant à l'élément > Copier le sélecteur unique :
EDIT : FIREFOX A DEPLACE CETTE FONCTION CAPITALE
Maintenant, vous devez faire : CLIC-droit sur l'élément dans l'inspecteur > Copier > le sélecteur CSS






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)
(ici, j'ai sélectionné mon texte de présentation.
> 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. Wink

Un grand merci à Solie pour sa relecture queen


Dernière édition par FredVig le Mer 13 Sep 2017 - 11:13, édité 17 fois

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1827
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Apprendre à Modifier le Head (les bases actualisées 2016)

Message par FredVig le Lun 3 Aoû 2015 - 11:28

2 : Vérifier que la modification de propriété est correcte.

Vous avez écrit un code 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);}
Remarque :Il est possible d'insérer des espaces ou des sauts de paragraphe dans ces écritures, mais pas à tous les endroits. L'intitulé de la cible (#nomDuMachin) ne peut s'écrire que d'une manière, en respectant les espaces et autres signes de ponctuation qui la composent

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
Elle se met après la valeur et avant le point virgule ainsi :
Code:
#nomDuContenant
{
propriété: nouvelle valeur de propriété
!important
;
}



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, 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 :

Code:
<style type="text/css">
/*<![CDATA[*/

ICI VIENDRONT TOUS VOS CODES DE MODIFICATION CSS POUR TOUT LE SITE

/*]]>*/
</style>
Remarque :Il est possible d'insérer des codes javascript, des appels de polices web externes, des balises meta. Ils prennent place au dessus des balises de déclaration ci-dessus

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… Smile )
- 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 Mer 20 Jan 2016 - 10:36, édité 12 fois

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1827
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Sélection d'un élément précis à l'aide de l'inspecteur

Message par FredVig le Lun 3 Aoû 2015 - 11:41

Parfois, il est compliqué de déterminer l'élément à modifier.
{Pratiquement tout le temps, au début Smile }

L'inspecteur propose un outil qui donne une vision en 3D de la structure de la page.
Il peut s'avérer pratique pour sélectionner un contenant précis.
(Je n'ai pas trouvé cet outil dans l'inspecteur de Chrome)

Vous avez en haut à droite une icône de cube en perspective.
Cliquez-là.
EDIT : L'outil 3D était trop pratique > la version 47 de firefox l'a supprimée  Sad
Allez sur la page du site et cliquez-glissez dessus.
Vous pouvez manipuler l'image en 3D du site.



Vous devrez dé-selectionner l'outil pour poursuivre vos modifications.

Cet aperçu aide à comprendre la position en Z des éléments.

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.


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…

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 fouillis ?

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 cette étiquette, vous porterez des chapeaux verts.
- 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.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1827
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Apprendre à Modifier le Head (les bases actualisées 2016)

Message par Cathy Morel le Dim 4 Déc 2016 - 18:52

Waouw ! Mille mercis. Il y a de quoi occuper les longues soirées d'hiver à venir.

Cathy Morel

Messages : 11
Date d'inscription : 13/11/2016

http://nouveaudepartunhavrededouceur.jimdo.com

Revenir en haut Aller en bas

Re: Apprendre à Modifier le Head (les bases actualisées 2016)

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum