Modification du thème prédéfini

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.

modification thème boostrap

 

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

affichage des éléments de base 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

modification du logo de votre plateforme

 

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.

Paramétrer l'icône raccourci

 

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

Styles CSS

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/

inspection du bouton appeler

 

Pour modifier l'apparence du bouton "success", ouvrez l'onglet "Boutons" et modifier la ligne correspondante :

modification du bouton success

Catégorie