Un compte avec un accès Enseigne ou Restaurant du backoffice peut ajouter du CSS pour personnaliser l’apparence de la borne.

⚠️ Innovorder ne fournit pas d’aide à la mise en place du code CSS, ni à sa maintenance. Nous fournissons une liste de CSS possible à appliquer par vous-même.

Avant d’activer la fonctionnalité de code CSS personnalisé, nous vous recommandons :

• de mettre en place un processus de test et mise à jour du code avant de l’activer ;

• de faire appel à un·e développeur·se si vous prévoyez de faire des changements CSS importants sur votre plateforme.

Si vous décidez que le CSS personnalisé correspond à vos besoins, le propriétaire de la borne doit être préparé à :

• d'adapter le code aux changements visuels de la plateforme, et assurer le support vis-à-vis de ses propres utilisateurs.

⚠️ Attention : Le code s’ajoute au niveau d'un restaurant, et cette personnalisation sera effective pour uniquement UN restaurant. Il faudra alors le copier-coller sur les autres restaurants.

Recommandations générales

1. Testez le code sur votre navigateur. (kiosk-innovorder.fr)

2. Copiez-collez le code dans votre restaurant.

3. Sauvegardez une copie du code dans un fichier à part.

Ajouter, modifier ou supprimer du code CSS personnalisé

1. Depuis la page d’accueil, dans la barre de gauche, cliquez sur Enseigne.

2. Se rendre dans l'onglet Restaurants et choisissez celui de votre choix.

3. Cliquer sur Canaux

4. À droite de Borne, cliquez sur Configurer.

5. Dans la barre du haut, cliquez sur Style.

6. Descendez jusqu’à la section CSS.

7. Ajoutez, modifiez ou supprimez le code CSS.

8. Cliquez sur Enregistrer, en dehors du champ, pour sauvegarder les modifications.

9. Rafraîchissez la page de la Borne de votre navigateur pour voir les modifications.

Exemples de CSS

Pour modifier le CSS de la plateforme, vous devez identifier l’élément ("element") et la propriété ("property") de ce que vous souhaitez modifier.

• Element: .mobile-category-wrapper

• Property: background

Les modifications simples ressembleront donc à ceci :

/*description du changement pour une meilleure visibilité*/

element { 
property: value; 
}

Autres ressources :

• HTML Color Codes

• W3Schools: CSS Reference

   

Besoin d'un coup de main ?

N'hésitez pas à nous contacter via le chat ou par email support@innovorder.fr