Personnaliser un thème

Personnaliser un thème

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 22/12/2018 à 11h36

Introduction




Sachez d'abord que ces articles n'ont pas pour but de vous aider à créer un thème à partir d'une feuille blanche.
Au travers des articles qui vont suivre, vous allez pouvoir comprendre et maîtriser l'architecture d'un thème PHPBoost afin de pouvoir réaliser votre propre thème à votre image, à votre goût, mais surtout un thème dédié à votre projet.
Bien sûr, il est inutile de réinventer la roue, aussi je vous conseille de partir d'un thème très bien fait et dénué de tous bricolages : Le thème Base.
Il est en effet une très bonne base et est facilement personnalisable.

Faut-il des connaissances particulières ?




La mise en forme 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 d'anglais pour le comprendre. Vous trouverez une liste des propriétés CSS sur le Site OpenClassrooms. 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 cet article sur le html5 et le CSS3 est très bien fait, toujours sur le Site OpenClassrooms.

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.
Chaque développeurs possède sa propre façon de coder. Lorsque l'on travaille en équipe il est important d'avoir une base commune. Vous trouverez dans l'article Conventions HTML et CSS notre façon d'écrire le code CSS.

La structure des thèmes




Avant de faire des modifications, il est important de comprendre la façon dont est organisé un thème. Nous vous invitons à lire l'article Structure des thèmes. Chaque répertoires et chaque fichiers sont détaillés.

Personnaliser un thème




La personnalisation graphique d'un thème passe par 3 étapes :

La personnalisation des fichiers CSS




Pour rappel, le code CSS correspond au style que l'on applique sur des éléments du code HTML. Le code CSS de PHPBoost est contenu dans les fichiers .css . Certains éléments peuvent encore être contenu dans des fichiers .tpl, mais nous avons essayé de les supprimer au maximum pour faciliter la mise à jour graphique.
L'article Personnalisation du code CSS contient toutes les infos dont vous pourriez avoir besoin.

La personnalisation des fichiers HTML




Le code HTML de PHPBoost est contenu dans les fichiers .tpl. Chaque module contient ces propres fichiers personnalisables.
L'article Personnalisation des modules ou de framework vous aidera à la personnalisation et à la modification du code afin d'organiser le site web comme vous le souhaitez.

La personnalisation des fichiers images




Dans certains cas, vous pouvez être amené à modifier certaines images afin d'apporter une touche personnelle.

Finaliser son thème




Maintenant que vous avez modifié votre thème pour qu'il soit à l'image de votre site web, nous pouvons passer à la dernière étape.
Il faut maintenant préparer votre thème à l'exportation. L'article Finalisation du thème vous présente quelques conseils afin de pouvoir partager votre création.