Personnaliser un thème

Personnaliser un thème

Dernière mise à jour : 25/01/2020 à 10h06

Introduction



Les articles de ce didacticiel ont pour but de vous aider à créer un thème à partir d'un thème déjà existant.
Vous apprendrez à maîtriser l'architecture d'un thème PHPBoost afin d'en réaliser un à votre image, à vos goûts, et avant tout un thème dédié à votre projet.

Ce didacticiel s'appuiera donc sur le thème Base fourni avec le CMS, créé sans fioriture et répertoriant la totalité des éléments nécessaires à l'élaboration un thème pour PHPBoost.


Faut-il des connaissances particulières ?



La mise en forme de pages web utilise les langages Javascript, HTML et CSS. Avec PHPBoost, seules des connaissances en CSS sont nécessaires pour débuter la réalisation d'un thème. Les langages Javascript et HTML vous seront utiles pour une réalisation plus élaborée.

Le langage CSS est très intuitif, rapidement assimilable avec quelques notions d'anglais, et très fourni en didacticiels d'apprentissage sur la toile. Vous trouverez la liste des propriétés CSS et la possibilité de les tester sur le site w3school.com. 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 l'apprentissage des bases de ces différents langages, nous vous invitons à lire ce didacticiel mis à jour régulièrement, sur le site OpenClassrooms (inscription gratuite nécessaire pour suivre le didacticiel).


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.
Cette page a été vue 46141 fois