Modifier le CSS d'un template par défaut

Cet article va expliquer comment passer d'un template par défaut à un template personnalisé dans l'outil de création de site web Jimdo. Bien que le tutorial soit très didactique et détaillé il est recommandé d'avoir quelques notions d'xHTML et de CSS surtout pour ensuite personnaliser le design en question.

Information: Ce tutorial n'est pas encore terminé à 100%. Les principales étapes sont terminées, mais il ne manque un chapitre qui explique comment faire en sorte que les images soient visibles. Merci de votre compréhension.

1- Préface

Aucun support personnalisé ne sera fournis en plus de ce tutorial. Ce petit cours est fournit à titre informatif pour les Jimdonautes bricoleur. Pour plus d'informations et mieux comprendre certains points il faut absolument apprendre l'xHTML et le CSS, plusieurs sites très efficace existe sur internet sur ce sujet.

Avertissement: Veiller à ne pas voler le template d'un autre site. De même, si vous avez uniquement un compte JimdoFree il ne vous est pas possible d'utiliser cette technique pour copier un template provenant des designs JimdoPro ou JimdoBusiness.

2- Création de deux fichiers

La première étape de ce tutorial est de créer deux fichiers texte qui contiendront respectivement le code xHTML et le code CSS de votre template par défaut. Pour cela il faut utiliser le traitement de texte le plus simple possible tel que le bloc-notes dans Windows. Créez un fichier intitulé template1.html (dans lequel sera placé le code xHTML) et l'autre intitulé template1.css (dans lequel sera placé le code CSS).

Astuce: Pour mieux visualiser le code xHTML et CSS je vous suggère de télécharger un simple petit logiciel intitulé Notepad++.Ce logiciel permettra de mieux réussir ce tutorial et vous sera grandement utile si vous souhaitez éditer votre code CSS dans le futur (par exemple).


3- Choisir le template à éditer

Avant d'aller plus loin, assurez-vous que votre site web Jimdo possède le template que vous souhaitez éditer. Pour cela, il suffit d'aller sur le panel administrateur, puis de sélectionner l'onglet "Design" et de choisir son design dans l'une des catégories suivantes:

  • Mise en page
  • Design JimdoPro
  • Design JimdoBusiness
  • Design spéciaux

Après avoir fait son choix il faut être sur que celui-ci est bien sauvegarder. Pour cela il suffit simplement de visualiser le site en mode non-connecté.


Astuce: Avant de commencer, il est recommandé de bien choisir la page à travailler. Il est par exemple recommander d'utiliser une page avec peu de contenu ainsi qu'un titre et du contenu explicite. Cela permettra de mieux repérer les éléments dans le code source. N'hésitez pas à inventer des mots.
Exemple: si le titre de la page est "rochimamo" et que vous voyez ce mot dans le code source, vous comprendrez très facilement que le code xHTML correspond à l'emplacement du titre.
Pour éviter de compliquer le futur travail, je recommande que la page ne possède qu'un seul module possédant seulement un mot.


4- Récupérer le code source xHTML

Pour récupérer le code source xHTML de votre site Jimdo voici la marche à suivre:

  1. Avec votre navigateur favoris il faut ouvrir le site Jimdo en question en mode non-connecté.
    Dans le cas de ce tutorial ce sera Firefox qui sera utilisé et expliqué sur les captures d'écran.
  2. Le but est ensuite d'afficher la source xHTML de la page visualisée. Avec Firefox il faut faire un clic droit sur la page et sélectionner "Code source de la page".
  3. Une nouvelle fenêtre s'ouvre avec l'intégralité de la source xHTML de la page.
  4. L'étape suivante consiste à sélectionner tout le code. Pour faire simple et efficace il est possible d'utiliser deux raccourcies clavier: ctrl+A (tout sélectionner) puis ctrl+C (copier).
  5. Viens alors le moment d'ouvrir la page template1.html, si possible avec NotePad++.
  6. Puis il faut coller le code qui est dans la mémoire temporaire de l'ordinateur. Pour cela il faut aller dans "édition" > "coller".
  7. Cette étape étant terminée, n'oubliez pas de sauvegarder la page template1.html.

La galerie photo ci-dessous présente les captures d'écrans associées à certaines étapes détaillées ci-dessus.

Télécharger
Code xHTML récupéré via cet exemple
Ce fichier à télécharger représente le code xHTML qui a été récupéré. Ne vous inquiétez pas si le code n'est pas exactement le même dans votre fichier, cela viens probablement du fait qu'il
template1.html
Document HTML 6.2 KB

5- Récupérer le code CSS

Avant de vouloir copier le contenu du fichier CSS, il faut d'abord localiser le fichier. Pour cela il faut retourner dans le code xHTML soit via le navigateur internet ou alors via le fichier template1.html précédemment enregistré. Dans les premières lignes de ce code il faut trouver une ligne qui ressemble à ça (dans la galerie de capture d'écran présenté à la fin de ce chapitre: voir la première image):

<link href="http://template-sanpic.jimdo.com/s/style/layout.css?1256230277" rel="stylesheet" type="text/css" />

 

Dans l'exemple ci-dessus l'adresse a été mise en rouge. C'est cette URL qu'il faut ensuite entrer dans son navigateur. Cela permet alors d'afficher tout le code CSS nécessaire. Suite à ça, il suffit alors de procéder de la même manière que pour le code xHTML, il faut copier/coller le code dans le fichier template1.css.


6- Supprimer le code xHTML non nécessaire

Si les chapitres précédents de ce tutorial ont été suivis, vous avez maintenant deux fichiers (template1.html et template1.css) avec les codes nécessaires. Les chapitres suivant vont monter en difficulté car il va falloir adapter le contenu xHTML au format Jimdo.

Pour débuter, ce chapitre va expliquer comment épurer le code xHTML pour ne garder que ce qui est nécessaire.

Précaution: Pour prévenir d'éventuelle erreur et éviter de refaire toutes les étapes précédentes, il est recommandé de créer une sauvegarde des deux fichiers template1.html et template1.css.

La suite de ce chapitre va essayer de vous présenter les codes à supprimer et les procédures pour mieux s'y retrouver dans tout ce charabia de ligne de code.

 

Conserver le contenu à l'intérieur du <body>

Toutes les pages web possèdent une structure similaire à celle-ci:

<html>
<head>
<!-- Contenu donnant des informations sur la page -->
</head>
<body>
<!-- Contenu textuel -->
</body>
</html>

En ce qui nous concerne il va falloir garder que le contenu inclus entre <body> et </body> (les balises <body> sont également à supprimer).

 

Supprimer les scripts

A certains endroit dans le code il y a des scripts Javascript qui sont insérer. La première étape pour épurer le code consiste à supprimer ces balises. Pour les trouver plus facilement il

 

Organiser le contenu

Pour mieux s'y retrouver dans le code il faut maintenant le réorganiser à l'aide des méthodes suivantes:

Astuce: Pour chercher plus facilement les morceaux de codes à supprimer il est possible de faire une recherche (ctrl+F). Une recherche possible consiste à chercher la balise "body".

Supprimer les scripts

A certains endroit dans le code il y a des scripts Javascript qui sont insérer. La première étape pour épurer le code consiste à supprimer ces balises. Pour les trouver plus facilement il faut faire une recherche avec le mot "script" et supprimer tout ce qui ressemble à ça:

<script src="http://jimdocs.wiredminds.de/track/count.js" type="text/javascript"></script>

Ou à ça:

<script type="text/javascript">
Code à supprimer incluant la balise script ci-dessus et ci-dessous.
</script>
<noscript>
Code à supprimer incluant la balise script ci-dessus et ci-dessous.
</noscript>

 

Organiser le contenu

Pour mieux s'y retrouver dans le code il faut maintenant l'organiser un tout petit peu. Pour cela n'hésiter pas à supprimer les doubles retours à la ligne (les lignes sans aucun code).

Télécharger
Code xHTML après épuration
Ce fichier représente le code xHTML épuré avec les conseils prodigué ci-dessus.
template2.html
Document HTML 4.9 KB

7- Comprendre la structure des pages Jimdo

Peut-être aurez-vous remarqué que chaque site Jimdo possède toujours les mêmes éléments, présentés de manières différentes. Si vous n'avez pas fait ce constat, je vous suggère vivement un petit exercice nécessaire pour la compréhension de ce chapitre. Faites un tour sur des sites Jimdo et essayer d'identifier à chaque fois les éléments suivants:

  • Contenu.
  • Navigation (les liens du menu).
  • Barre latérales, aussi appelée sidebar dans le jargon. C'est à cet endroit qu'est affichée la publicité dans JimdoFree.
  • Pied de page.

 

Pour qu'un template fonctionne, il faut lui indiquer l'emplacement des éléments présentés ci-dessus. Le template va utiliser un petit code pour spécifier l'emplacement de chaque élément. Le reste est automatique, le système Jimdo placera le contenu à l'endroit où on lui à demandé, idem pour le menu, la sidebar et le pied de page.

Les fameux petits codes à utiliser seront les suivants:

  • <var>content</var> : Contenu
  • <var>sidebar</var> : Barre latérale
  • <var>navigation[1|2|3]</var> : Navigation
  • <var>footer</var> : Pied de page

La capture d'écran ci-dessous présente les principaux éléments avec leur code associé de manière intuitive.

Design Jimdo décomposé
Design Jimdo décomposé

Comme cela a été dit plus tôt, les éléments encadré ci-dessus seront remplacé le code associé. Il faut donc savoir que le menu de navigation utilise un code de plusieurs lignes qu'il faudrat supprimer puis remplacer par le code beaucoup plus simple <var>navigation[1|2|3]</var>. Idem en ce qui concerne les autres éléments. Il va donc falloir ne pas être effrayé par le code xHTML et supprimer les bons éléments pour éviter de faire de bétises.


8- Remplacer le code xHTML par le modèle Jimdo

Nous voici rendu à la fameuse étape la plus compliquée dans laquelle il va falloir remplacer le code xHTML. Avant de continuer je vous suggère de faire une sauvegarde de votre page template1.html.

 

Navigation

Essayer d'identifier dans le code xHTML l'emplacement des liens. Si vous avez par exemple un lien "page d'accueil", alors essayer de voir à l'endroit où il est placé. En ce qui me concerne, tout le code du menu est placé entre la balise <div id="nav_top"> et la balise </div>. Il faut donc:

  1. Supprimer tout ce qui se trouve entre les balises <div id="nav_top"> et </div>.
  2. Combler le trou avec le code: <var>navigation[1|2|3]</var>

 

Télécharger
Code xHTML après modification de l'élément de navigation
Ce code présente les modifications du code xHTML après avoir remplacé les nombreuses lignes de code par le simple code <var>navigation[1|2|3]</var>.
template3.html
Document HTML 4.4 KB

Sidebar

Viens maintenant le moment de remplacer la sidebar. Pour cela il faut essayer de trouver tout le code compris dans cette sidebar et procéder de la même manière que pour l'élément de navigation. Sachant que les lignes de code à supprimer sont beaucoup plus nombreuses que précédemment, je vous suggère de supprimer des petits bouts de code progressivement.

En ce qui concerne mon template, il faut que je supprime tout le code compris entre <div id="sidebar"> et une balise </div> situé plusieurs lignes plus bas. Puis il suffit de remplacer les lignes supprimée par le code <var>sidebar</var>.

Télécharger
Code xHTML après modification de la sidebar
Cette page html présente le code xHTML après modification de la sidebar par son code équivalent qui est: <var>sidebar</var>.
template4.html
Document HTML 3.2 KB

Contenu

Après avoir modifié les deux éléments précédents, vous commencez à comprendre le fonctionnement. Encore une fois il va falloir supprimer des lignes de code et les remplacer cette fois-ci par le code <var>content</var>.

Télécharger
Code xHTML après modification du content
Ce code représente les modifications apportés au fichier template1.html jusqu'à maintenant.
template5.html
Document HTML 2.4 KB

Pied de page

Nous voici presque rendu à la fin de cette partie longue et fastidieuse. Cette fois-ci il faut remplacer le code du pied de page par <var>footer</var>.

Télécharger
Code xHTML après modification du footer
Code après remplacement des lignes du pied de page par le code <var>footer</var>.
template6.html
Document HTML 1.0 KB
Avertissement: Si le code xHTML ne contient pas les codes des éléments, l'outil Jimdo indiquera qu'il y a eu un oubli et refusera d'aller plus loin. Il faut donc être sur que les codes présenté plus tôt sont tous présent sur la page.

9- Petite amélioration du code

Le code xHTML est pratiquement prêt à être implémenté, il faut juste supprimer un élément vers la fin du fichier. Normalement, si vous avez copié un template Jimdo, l'un des dernières lignes représente une image qui est utilisé pour faire des statistiques de visites (un script calcul le nombre de fois qu'elle est affichée).

Il faut donc supprimer de votre fichier template1.html, le code qui ressemble à ceci:

<img src="http://jimdo-stats.com/s.php?uri=506095051&amp;ref=http%3A%2F%2Fwww20.jimdo.com%2Fapp%2F1502954%2F506095051%2F%3Fpage%3D506095051&amp;sid=1502954" style="width:0px;height:0px;" alt=""/>

Télécharger
Code xHTML du template
Voici le code xHTML qui sera utilisé pour le template.
template7.html
Document HTML 841 Bytes

10- Mettre en place le code

Nous voici rendu à l'étape finale, celle où il faut copier/coller le code et voir si tout fonctionne comme convenu. Pour cela il faut aller sur son site Jimdo dans la catégorie "Design" > "Design personnel". Une page s'ouvre et ressemble normalement à l'exemple ci-dessous:

Page pour éditer le design personnel
Page pour éditer le design personnel

Il faut bien se familiariser avec le menu du haut qui présente 4 sous-sections: HTML, CSS, Fichiers et Aides/trucs.

 

Copier le code HTML

Pour débuter il faut aller sur la section "HTML", supprimer le code présent et le remplacer par le code que vous avez sur la page template1.html. Attention, il ne faut pas encore cliquer sur "enregistrer".

 

Copier le code CSS

Il faut ensuite se rendre sur la section "CSS", supprimer le code présent et le remplacer par le code que vous avez sur la page template1.css.

 

Enregistrer

En bas du formulaire dans lequel est présent le code, il y a un bouton "enregistrer", il faut alors cliquer dessus. Après le clic vous verrez un aperçu du template mis en place. Si tout fonctionne parfaitement, il ne devrait pas y avoir de problème. Ne perdez pas de vue que le template ressemblera au template qui était précédemment mis en place, à la seule différence que maintenant vous pourrez éditer le HTML et le CSS.

Information: Si le template utilise des images (exemple: pour le header ou pour le design), il y a la possibilité que ces images ne soit plus visible après avoir effectué les étapes précédentes. Le chapitre suivant explique comment mettre en place les images de son template.


11- Mettre en place les images

Chapitre en cours de rédaction...


Bonus - Astuce pour débutant en CSS

Une fois que ce tutorial a été suivis, il est possible de modifier aisément le CSS. Malheureusement, tout le monde n'est pas un expert dans ce domaine. Je suggeste donc à tous les débutants qui ne connaissent pas le CSS, de faire des recherche Google pour comprendre chacun des termes.

Exemple: vous ne savez pas ce que signifie "padding:12px". Pas de soucis, un recherche Google avec les mots "css padding" permet de vous aider à comprendre à quoi ça sert.

Information: Dans vos recherche, pensez à ajouter le mot "CSS" pour être sur que les résultats de recherche seront pertinent.

Enfin, si vous n'avez pas envie de fouiller partout et que vous savez déjà ce que vous souhaitez modifier, je vous suggère de consulter une liste des principales propriétés en CSS disponible sur l'excellent site d'Openclassrooms.