Thème Rebirth : Bootstrap fait son retour !

Précedemment utilisé dans sa version 2 sur les premiers thèmes responsive proposés par e-monsite, cette version 4 permet de  mettre en forme rapidement et facilement les différents composants de votre site internet : vignettes des modules Boutique et Photos, menus de navigation, listes d'éléments d'un module, etc.
La documentation proposée par Bootstrap propose des modèles de ces composants. Vous pouvez donc l'imaginer comme une bibliothèque dans laquelle vous pourrez venir piocher les composants qui vous intéressent afin d'obtenir une personnalisation poussée de votre site. Depuis l'éditeur visuel, il vous suffira alors de passer en mode HTML pour pouvoir manipuler le code HTML tel qu'il est proposé sur la documentation officielle.

Cette nouvelle génération de thèmes e-monsite introduit la notion de couleur "principale" et couleur "secondaire". La couleur dite "principale" sera utilisée pour la mise en avant d'éléments importants : boutons de validation, mise en avant d'une ligne ou d'une colonne, etc. Quant à la couleur "secondaire", elle serait utilisée essentiellement pour l'apparence des boutons présents sur votre site. Lors de la définition de cette couleur secondaire, vous pouvez choisir la valeur "automatique" : dans ce cas, la couleur secondaire sera une déclinaison de la couleur du texte de votre site, garantissant ainsi une homogénéité du design. Typiquement, les couleurs "principale" et "secondaire" peuvent reprendre celles de votre logo.

Comme tous les thèmes proposés sur e-monsite, vous pouvez personnaliser votre design depuis le formulaire de personnalisation de l'apparence.

Pour aller plus loin, afin d'offrir un maximum de souplesse dans la personnaliation de vos thèmes via des styles CSS, les styles CSS du thème Rebirth reposent sur des variables CSS. Tous les paramètres définis au niveau du formulaire de personnalisation (couleur de la police, des liens, etc.) sont ainsi stockés dans des variables CSS auxquelles vous pouvez ensuite faire  référence dans vos propres styles.

 

Aperçu des variables CSS disponibles sur les thèmes Bootstrap V4 d'e-monsite, depuis la console du navigateur Chrome.

Pour rappel, il existe différents moyens de surcharger le design de votre site web avec des styles CSS personnalisés  :

• Depuis Configuration > Réglages > Zones Éditables > Styles CSS supplémentaires
• En bas du formulaire de personnalisation du thème (Configuration > Apparence > Personnaliser)
• Depuis l'éditeur visuel, en mode HTML, directement sur l'élément à personnaliser via l'attribut "style".

Nous vous conseillons cependant de tous les écrire au même endroit, afin de faciliter leur maintenance. La seconde solution est la plus recommandée.

Dans tous les cas, quelle que soit la solution retenue, les variables CSS du thème resteront accessibles. 
La manipulation de variables CSS dans vos propres styles CSS fera l'objet d'un projet billet, tant les possibilités et les avantages sont multiples.