Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 08/06/2014 à 21h23
Table des matières
Introduction
Faut-il des connaissances particulières ?
La mise en page de pages web utilise les langages XHTML et CSS. Il n'est pas nécessaire de connaître le XHTML pour faire son thème, en revanche il faut avoir quelques notions en CSS.
Rassurez-vous, ce langage est très intuitif, il suffit d'avoir quelques notions en anglais pour le comprendre. Vous trouverez une liste des propriétés CSS sur le Site du Zéro. Si vous avez compris ces notions, avec un peu de bon sens et de volonté c'est à la portée de tout le monde.
Pour en savoir plus sur ces deux langages nous vous invitons à lire ce cours très bien fait, toujours sur le Site du Zéro.
Recommandations
Afin de travailler sans pour autant empêcher l'accès à votre site, nous vous recommandons de modifier votre thème en local.
Cela vous permettra également d'éditer rapidement vos fichiers et d'avoir un rendu direct sans nécessité de les transférer via FTP.
Fichiers à modifier
Dans le dossier du thème, plusieurs éléments nous intéressent :
- Le dossier theme : Il contient les fichiers CSS du thème. Ces fichiers de style définissent la mise en forme du site. Nous les verrons en détails par la suite. Dans ce dossier se trouve également un dossier images qui sont utilisées dans le design de votre site.
- body.tpl : Ce fichier contient le contenu de la balise html <body> qui encadre le code html.
- Le dossier images : Il contient toutes les images ne concernant pas le design du thème.
- Facultativement, on peut trouver quelques dossier comme admin ou modules qui définissent des éléments particuliers. Vous trouverez plus d'informations sur la modification des templates à la suite de l'article.
Les CSS
Entrons dans le vif du sujet. Nous allons maintenant commencer à modifier les fichiers CSS.
Je recommande vivement de modifier les fichiers de style dans l'ordre suivant :
- content.css : Il contient les classes propres au contenu du site (messages, modules).
- design.css : Il contient toutes les classes de mises en forme du sites (Le gros du Design)
- global.css : il contient toutes les classes utiles sur le site et communes aux différents modules.
Facultativement, vous pouvez avoir besoin de modifier les fichiers du thème défault. Sachez qu'ils ne contiennent aucune information de couleur ou autre propriété susceptible d'être modifiée à chaque thème.
- default.css : Il contient les éléments génériques et les réinitialisations afin de garantir un affiche identique sur tous les navigateurs.
- print.css : Met en forme le site pour un affichage épuré destiné à l'impression.
Aller encore plus loin
Si toutefois la personnalisation des images et des CSS ne vous suffisaient pas, sachez qu'il est possible de modifier les templates d'un module pour un thème en particulier.
Je vous conseille de lire l'article Personnalisation des TPL et CSS de PHPBoost, détaillant pas à pas la marche à suivre.