Votre marketplace Skod est livrée avec un thème complet, responsive et optimisé pour le référencement. Dans ce chapitre, vous trouverez les paramétrages de base pour ce thème : couleurs, espaces, polices, boutons, arrondis.
Vous avez toutefois la possibilité d'avoir un thème sur mesure, par exemple si vous souhaitez migrer votre ancien site en gardant la charte graphique.
Modifier l'apparence de base du thème prédéfini.
Accédez à la page de configuration du thème :
Marketplace » Thème
Paramétrage des éléments Bootstrap
Le thème fourni avec la plateforme est construit via le framework Bootstrap, version 4. La première section vous permet de configurer une partie des éléments de base de Bootstrap.
Les éléments modifiables sont :
- Le contenu de la page (largeur totale ou conteneur bootstrap)
- L'apparence des boutons (colorer les boutons en fonction du texte, rouge pour les warning ...)
- Les images (arrondies par défaut ...)
- Les tableaux (coins arrondis, lignes strippées, ...)
- Le fil d'ariane
- La barre de navigation
- ....
Il se peut que certain comportement ne soient pas paramétrables malgré la possibilité de le faire sur cette page pour assurer une cohérence globale de rendu de votre plateforme, merci de prendre contact avec nos équipes pour forcer tel ou tel paramétrage qui serait verrouillé.
Affichage des éléments sur le site
Cette section vous permet d'activer ou de désactiver certain éléments sur les pages de votre marketplace. Même remarque, certain éléments ont été verrouillés pour un rendu final optimisé de vos pages.
Modification du logo
Cette section a été décrite dans le chapitre Intégrez vos logos
Paramètre de l'icône raccourci
Correspond à la favicon de votre marketplace. Renseignez votre propre icône de raccourci ou laissez celle par défaut de Skod si vous n'en avez pas.
Pour la création d'icône de raccourci par notre agence, merci de prendre contact avec le support technique.
Styles CSS
Enfin, la section Styles CSS rend paramétrable les styles CSS de base de votre thème :
- Le styles des boutons : couleur, arrière-plan, couleur de la bordure, couleur au survol de la souris
- Les couleurs des textes : Modifier les couleurs primaires utilisées sur la marketplace
- Espacement, modifier l'espace entre les différents éléments
- La taille des textes
- Les bordures en général
Les éléments ci-dessus correspondent aux variables Bootsrap suivantes, que vous pouvez retrouver dans le code source de la page ou en inspectant un élément avec votre navigateur.
Table de correspondance des éléments Bootstrap;
Boutons | https://getbootstrap.com/docs/4.5/components/buttons/ |
Couleur du texte | https://getbootstrap.com/docs/4.5/utilities/colors/ |
Espacement | https://getbootstrap.com/docs/4.5/utilities/spacing/ |
Taille du texte | https://getbootstrap.com/docs/4.5/content/typography/#headings |
Bordures | https://getbootstrap.com/docs/4.5/utilities/borders/#border-radius |
Le thème prédéfini intégré avec votre marketplace utilise le plus possible les classes Bootstrap, ce qui vous permet de pouvoir modifier davantage le rendu de votre site. Pour inspecter un élément, par exemple un bouton, faites un clic droit puis Inspecter l'élément ou bien ouvrez les outils de développements de votre navigateur.
Dans la capture d'écran ci-dessous, le bouton "Appeler" est inspecté et la classe "btn-success" est appliquée, cf la section Bootstrap correspondante : https://getbootstrap.com/docs/4.5/components/buttons/
Pour modifier l'apparence du bouton "success", ouvrez l'onglet "Boutons" et modifier la ligne correspondante :