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 : 12/08/2014 à 23h02

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'une 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 conseiller 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 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 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 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.



Chaque développeurs possède sa propre façon de coder. Lorsque l'on travail 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 modifier 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 La finalisation du thème vous présente quelques conseils afin de pouvoir partager votre création.