Les bases de la modification du design d'un site Jimdo

[Équipe Jimdo]

[Tutoriel originellement proposé par filmsdelover.com sur notre ancien forum.
Les codes indiqués sont des illustrations d'une méthode. ils peuvent ne pas correspondre à votre cas particulier, la structure des sites Jimdo évoluant constamment.]

Dans ce tuto, on prend tout depuis le début. Je me suis dit : "Vu qu'on aide pas mal de gens à modifier le design de leur site, cela serait pas mal de leur expliquer le pourquoi du comment pour qu'ils puissent ensuite faire leurs propres expériences". Dont acte.

Cible : Toi, le novice sur Jimdo qui ne trouve pas le design parfait parmi les templates de Jimdo. Ceux qui sont en design personnalisé peuvent passer leur chemin, ils n'apprendront rien de nouveau, je pense.
Difficulté : Il va peut-être falloir prendre des notes.
Avant-propos : Tous les exemples seront basés sur mon site, http://www.filmsdelover.com. Je tente de simplifier au max donc je risque de faire des raccourcis. N'hésitez pas à me corriger.

Voici le sommaire :

• La structure classique d'un site Jimdo.
  
• Le HTML et le CSS.
  
• La différence entre un template Jimdo et un design personnalisé.
  
• L'alternative de Funnycat : Un mix entre le template Jimdo et le design personnalisé.
  
• De la modification d'un template Jimdo.
  
• Le code à ajouter dans le "Head".
  
• Les attributs d'une div.
  
• Un exemple pratique : cacher le header sur un site.
  
• Variation sur l'exemple pratique : cacher le header sur une seule page du site.
  
• Conclusion
  
• Pour aller plus loin...
  

La structure classique d'un site Jimdo.
Un site classique Jimdo est composé des 5 mêmes éléments basiques (appelés "div") mais leur disposition sur la page peut varier suivant le template choisi. De façon schématique, cela se présente de la façon suivante :



Header : C'est le haut de la page. Il reste le même suivant les pages, ne change pas. C'est aussi l'identité graphique du site, avec généralement une image et le nom + logo du site.
Navigation : Il s'agit du menu du site. Il peut être placé sur ou sous le header ou du côté gauche.
Content : Il s'agit de l'endroit où tu vas ajouter le contenu de ton site. Ce contenu change à chaque page.
Sidebar : C'est une barre sur le côté (d'où "sidebar") qui ne change pas selon les pages (sauf modification poussée du site).
Footer : enfin, le footer reprend toutes les informations du site (mentions légales, bouton connexion etc)

A retenir : Ces 5 div ou sections forment l'architecture de chaque site Jimdo (et de chaque site internet en général).

Le HTML et le CSS
Derrière un site comme celui présenté ci-dessus, se cachent des lignes de code, véritable squelette du site : le HTML.

Tous ces codes mettent en place votre site, où va chaque div etc.

Le CSS lui, s'occupe de l'habillage de votre site : Taille des polices, largeur des div (et donc des sections comme le header etc), couleurs des menus etc. La feuille de style n'est pas accessible directement mais vous la modifiez à chaque fois que vous allez dans "design" ou que vous changez d'image de header.


A retenir : Si on devait utiliser une métaphore, le HTML, c'est le squelette, le CSS, c'est la peau et les vêtements.

La différence entre un template Jimdo et un design personnalisé.
Un template Jimdo est un design dont le code HTML et le CSS sont déjà tout prêt. Vous ne pouvez modifier que quelques petites choses (types et couleurs de police, image du header etc.).
Un design personnalisé est un design dont vous avez conçu chaque bout de code HTML et chaque petite ligne de CSS. Il offre des possibilités quasi-illimités en terme de design.

A retenir : Template = design tout fait et modifiable à petites doses, pour utilisateurs novices. Design personnalisé = design paramétrable dans ses moindres détails, pour utilisateurs avertis.

L'alternative de Funnycat : Un mix entre le template Jimdo et le design personnalisé
Funnycat a créé un tutorial sur son site pour copier le code HTML et le CSS d'un template Jimdo pour le coller dans un design personnalisé. Quels sont les avantages d'une telle manipulation ? Facile, vous gardez la disposition de votre template Jimdo originel mais vous pouvez désormais en modifier n'importe quelle partie. Cela s'adresse à des utilisateurs plus chevronnés ou à des novices désireux d'expérimenter. D'autant plus que la manip est sans risque : vous n'avez qu'à re sélectionner votre template dans la liste pour effacer toutes les erreurs commises. Lien vers ce tutoriel : http://funnycat.jimdo.com/astuces-jimdo/changer-le-css-d-un-template/

De la modification d'un template Jimdo
J'ai dit plus haut qu'un template Jimdo ne pouvait pas être beaucoup modifié mais c'était une petite inexactitude pour schématiser. C'est possible de le faire en ajoutant un code dans le "head" via l'onglet : Paramètres > Modifier le head, même si ce n'est pas la façon la plus propre. Mais c'est la façon la plus simple, sans avoir à recourir à un design personnalisé.

A retenir : On peut modifier un template Jimdo en ajoutant un code dans "Modifier le head".

Le code à ajouter dans le Head
Alors, cela va sembler barbare mais ce que nous tentons de faire, en modifiant un template Jimdo est de changer le CSS en passant par le HTML. Le code reflète donc ceci. Voici son architecture schématique :

Code:

<style type="text/css">
/*<![CDATA[*/
#nom de la div {attributs de la Div;}
/*]]>*/
</style>


Avec un code HTML de ce genre, on force le CSS à accepter les changements faits à telle div (content, header, etc). Tous les codes ressembleront donc à peu près à cela.

Les attributs d'une div
Les attributs d'une div sont les choses que l'on peut modifier dans une section du site. Ils en existent pas mal mais on ne se sert que de certaines d'entre elles. Voici les plus importantes :
{display: none;} -> L'une des plus importantes, notamment dans la réalisation d'une page de garde. Display veut dire "affichage" et none, "aucun". Cela veut donc dire que la div, ou une section en particulier (menu, header etc) n'apparaitra pas.
{width: 850px;} -> Width veut dire "largeur". On peut donc modifier la largeur d'une div. Idéale si on veut élargir son site, ou une partie plutôt qu'une autre.
{margin: 2px;} -> Margin représente la marge extérieure d'une div, cad son écart avec une autre div.
{padding: 2px;} -> Le padding est la marge intérieure d'une div, cad l'écart entre le contenu d'une div et sa bordure. Si ma div fait 100px de large mais avec un padding tout autour de 10px, le contenu de la div ne fera que 80px de large.

Ce sont les 4 attributs que l'on utilisera le plus pour des modifications mineures de template. Voir plus loin pour modifier d'autres attributs.

Un exemple pratique : Cacher le header sur un site.
Premier exemple pratique : on veut cacher le header (le haut) sur notre site. On trouve qu'il n'est pas bien et on n'en veut pas du tout, ça fera mieux.
1er truc à voir : Quelle div est concernée ? Il s'agit du header donc la div concernée est "header".
2ème truc à voir : Quel attribut va-t-on modifier ? On veut le cacher, donc on va utiliser le {display: none;}
3ème truc à voir : Quel sera le code à ajouter ? Facile, on reprend les éléments et cela nous donne le code suivant :

Code:

<style type="text/css">
/*<![CDATA[*/
#header {display: none;}
/*]]>*/
</style>

4ème truc à voir : Où va-t-on l'ajouter ? Dans "Modifier le head". On y va donc et on ajoute le code ci-dessus. On sauvegarde et en théorie, ça marche !

Variation sur l'exemple pratique : Cacher le header sur une seule page du site.
Il est possible de faire des modifications sur seulement une page du site. Pour cela, il faut que l'on trouve le numéro de la page en question.
En mode "Affichage du site", faites un clic droit et cliquez sur "Code-source de la page". Descendez jusqu'à trouver cette partie :

Le numéro entouré est le numéro unique de la page. Notez-le.
Le code à ajouter est donc désormais le suivant :

Code:

<style type="text/css">
/*<![CDATA[*/
#page-xxxxxxxxx #header {display: none;}
/*]]>*/
</style>

Ajoutez-le au Head, enregistrez et voilà ! Les modifications apportées au site ne le seront que sur une seule page.

Conclusion
Finalement, les modifications que vous souhaitez appliquer à votre template sont du même ordre que dans l'exemple ci-dessus. On modifie les attributs d'une div. C'est aussi simple que ça. Donc expérimentez ! Essayez ! Si vous faites une bétise, retirez le code de votre head et recommencez !

Maintenant, il existe des dizaines de div par pages et des ajustements nécessaires vont requérir des recherches supplémentaires. Ne vous découragez pas, le forum est rempli de tutoriaux pour vous aider à y parvenir.

Pour aller plus loin...
- http://www.jimdoforum.fr/t746-apprendre-a-modifier-le-head-les-bases-actualisees-2016 : [Edit fredvig : redirection du lien brisé] Tutoriel pour apprendre comment faire pour déterminer quelle div et quel attribut on peut changer sur une page. Très utile si vos envies vont un peu plus loin que les modifications basiques montrées ci-dessus.
- http://www.jimdoforum.fr/f29-tutoriels : Partie du forum regroupant tous les tutos faits par les Jimdonautes. Une mine d'informations.

Voilà, j'espère que cela aide. N'hésitez pas à poser des questions !  

[Françoise Gourde]

Bonjour,

Une question.  Lorsque je clique sur les deux liens "Pour aller plus loin" ça me ramène toujours sur la page "Bienvenue sur le nouveau site........"    Je ne vois pas où je peux aller visualiser tous les tutos.  Merci de me répondre.  C'est dommage que je ne puisse plus voir toutes les questions que j'avais posées dans l'ancien forum mais bon.

Merci de me répondre

Françoise Gourde

[FredVig]

Ce post Tutoriel est un rescapé de l'ancien forum, qui a été détruit. Les liens ne renvoient plus vers les 2 posts indiqués.
Ceci dit,

Tutoriel pour apprendre comment faire pour déterminer quelle div et quel attribut on peut changer sur une page.

je ne vois pas trop ce que cela pouvait indiquer.
Si vous voulez changer "un truc", vous le "cliquez-droit" et prenez "examiner l'élément". L'inspecteur s'ouvre, et vous avez tout ce qui est nécessaire. ça demande d'observer un peu l'outil, car il est très complet (et donc, complexe). L'inspecteur permet de modifier temporairement les données du site examiné. L'élément cliqué est en surbrillance dans l'architecture de la page. en regard à droite, vous avez ses attributs. Si vous les modifiez, le site change en conséquence. il ne reste qu'à reporter le résultat dans "modifier le head".
C'est très simple, mais il faut savoir identifier un minimum les différents éléments : classe, div, span, script, id, (…)
Ils sont "superposés" dans l'écriture, mais n'ont tous le même fonctionnement.
Le moyen pour parvenir à décrypter le code, est de se pencher sur des exemples simples et concrets.
Ce n'est pas une mécanique complexe, c'est un assemblage multiple d'éléments très simples.

[Contenu sponsorisé]