Comprendre les fichiers indispensables à un thème

Dernière mise à jour: January 9, 2018

Les thèmes HubSpot par défaut nécessitent divers attributs, c'est-à-dire feuilles CSS et fichiers JavaScript, pour être affichés et fonctionner correctement. En voici une explication.
Les thèmes HubSpot par défaut ne sont disponibles que dans les nouveaux comptes HubSpot. Si vous souhaitez qu'un thème HubSpot standard soit installé dans un compte existant, suivez ces instructions pour vérifier que votre compte est compatible.

Classes de thème personnalisées

Des classes personnalisées doivent être appliquées à certains groupes et modules afin de réaliser divers aspects du design des thèmes HubSpot. Lorsque vous modifiez les modèles d'un thème, il est conseillé d'ajouter des modules aux groupes existants afin de préserver l'intégrité des classes personnalisées. Cliquez ici pour obtenir la liste de quelques-unes des classes personnalisées les plus courantes.

Feuilles de style indispensables pour un thème

Par défaut, les thèmes HubSpot intègrent une feuille de style principale qui porte le nom du thème attaché à chaque modèle. Le fichier CSS porte ainsi le nom du thème. La CSS du thème Stratus, par exemple, s'appelle stratus-style.css. Cette feuille de style est responsable de l'aspect des thèmes. Il s'agit du principal fichier à modifier si vous voulez effectuer des changements. 

Chaque fichier CSS attaché au niveau d'un modèle (Modifier > Modifier l'en-tête) désactive les fichiers CSS globaux. Cette configuration permet de s'assurer que le bon style est appliqué au thème. 

Edit head tag
Même si les thèmes HubSpot sont configurés pour n'appliquer que la feuille de style correspondante, les fichiers CSS qui sont intégrés comme balises de lien dans le code HTML de l'en-tête de votre site dans les paramètres du contenu s'appliquent toujours à ces modèles. Cela peut créer des problèmes d'affichage si ces fichiers entrent en conflit avec la CSS d'un thème. Pour vérifier qu'il n'existe pas de scripts incompatibles dans les balises des liens dans les paramètres du contenu, veuillez suivre ces instructions.

Fichiers CSS inclus

L'éditeur de fichier theme-name.css (c'est-à-dire velocity.css, clarity.css, etc.) comporte quelques autres fichiers CSS qui sont compilés dans un unique fichier CSS final. Ces fichiers comprennent :

  • required-base.css : un fichier CSS qui contient le code pour la grille adaptative de HubSpot
  • theme-foundation-v1-0.css : ce fichier comporte toutes les CSS pour les icônes de police et les animations CSS3. Il inclut la CSS de l'icône font-awesome et le code issu de animate.css pour les animations.
  • hubtheme-modules.css : ce fichier obligatoire qui contient les styles de base pour les modules du COS est inclus dans le fichier style.css. Vous ne devriez pas avoir besoin de le modifier.
  • recommended.css : ce fichier CSS supplémentaire comprend quelques réparations conseillées et le style des éléments HTML5.

Si vous modifiez l'un de ces fichiers, vous devrez également republier le fichier theme-name.css principal afin d'inclure les mises à jour des fichiers dans le fichier CSS unifié final. 

Included CSS files

Polices inclues

Les thèmes HubSpot par défaut utilisent une balise @import au sommet du fichier CSS afin d'inclure diverses polices Google. Pour en savoir plus sur l'ajout de polices Google personnalisées à un fichier CSS HubSpot, consultez cet article.

@import tag for fonts

Variables des couleurs

Les fichiers CSS des thèmes utilisent le concept de variables de couleurs dominantes dans la feuille de style afin de vous aider à créer rapidement un contenu correspondant à votre marque. Si vous êtes peu familiarisé avec ce concept,  il vous suffit de connaître la couleur de votre entreprise (valeur hex) et vous pourrez en peu de temps développer un site qui respecte sa marque et sa couleur.

Pour changer de couleur, modifiez le fichier theme-name.css (c'est-à-dire stratus.css, clarity.css, etc.) dans le Gestionnaire de conception. Les couleurs sont définies dans les variables HubL, vers le haut du fichier CSS (tel que décrit ci-dessous). Si vous modifiez les valeurs hex présentes entre des guillemets (par exemple "#666") et republiez le fichier CSS, les couleurs utilisées dans votre thème seront modifiées.

Color variables
Veuillez noter que toute erreur de syntaxe dans ces variables HubL peut entraîner une erreur de compilation de votre fichier CSS. Assurez-vous de ne modifier que la valeur entre guillemets lorsque vous modifiez les variables de couleurs.

Fichiers JavaScript requis

Les thèmes HubSpot par défaut reposent aussi sur deux fichiers JavaScript essentiels : theme-name-main.js (par exemple stratus-main.js, velocity-main.js) et theme-foundation-v1-0.js. Ces fichiers sont inclus dans cet ordre dans le module HTML d'un pied de page global. Ce pied de page global est compris dans chaque modèle de thème et ne doit pas être supprimé.

Javascript footer module

theme-name-main.js

Ce fichier JavaScript sert à créer/activer le menu mobile et à configurer les images d'arrière-plan des bannières de thème, mais il sert aussi de code pour que les shortcodes des modules d'icône soient affichés comme des icônes font-awesome.

theme-foundation-v1-0.js

Ce fichier JavaScript inclut du code issu de wow.js pour les animations déclenchées par le défilement, ainsi que du code permettant que les shortcodes des modules d'icône soient affichés comme des icônes font-awesome (également inclus dans le fichier theme-name-main.js). 

Supprimer le fichier theme-name-main.js ou theme-foundation-v1-0.js entraîne le dysfonctionnement de plusieurs fonctionnalités d'un thème. Nous vous conseillons de ne pas supprimer le pied de page global ou le module HTML JavaScript du pied de page des modèles des thèmes. Pour en savoir plus, consultez cet article.

Article précédent:

Article suivant: