Personnalisez vos interfaces Qodly avec CSS

avril 3, 2025 6 min de lecture

Dans Qodly Studio, chaque widget peut être stylé directement à l’aide de ses propriétés. Toutefois, pour conserver une apparence cohérente dans l’ensemble de votre application et pour appliquer facilement des styles globaux (tels que la couleur de la police, la taille du texte ou l’apparence des sélections), les feuilles de style CSS sont votre meilleur allié.

Dans cet article, nous allons explorer les bases de l’utilisation de CSS dans Qodly Studio, avec des exemples tirés de l’application Performance Review.

Application Performance Review

Qu’est-ce que CSS ?

CSS (Cascading Style Sheets) est un langage de style permettant de contrôler l’apparence visuelle des éléments HTML sur une page web. Elles sont utilisées pour définir les couleurs, les polices, les marges, les animations et bien plus encore, afin de créer des interfaces cohérentes, esthétiques et adaptables.

Dans ce blog, nous allons simplement vous montrer comment utiliser et créer une classe CSS dans Qodly Studio, ainsi que quelques exemples simples. Si vous souhaitez apprendre à écrire du CSS, il existe de nombreuses sources de documentation, des formations et des vidéos sur le sujet.

Comment utiliser une classe CSS dans Qodly

Créer une classe CSS

Qodly vous permet d’ajouter des classes CSS directement dans votre projet. Voici comment procéder :

Allez dans le menu Styling de Qodly Studio.
Créez une classe CSS.
Précisez si elle est locale ou partagée.
Rédigez la définition CSS.

Types de CSS dans Qodly

Qodly propose trois types de CSS pour une flexibilité maximale :

Local: S’applique uniquement à un composant ou à une page spécifique.
Basé sur un thème: Partagé entre plusieurs composants pour maintenir la cohérence au sein d’une section de votre application.
Partagé: Disponible globalement dans l’ensemble du projet.

Ces options vous offrent une grande flexibilité dans la structuration et la gestion de vos styles.

Appliquer une classe CSS

Une fois que vous avez créé votre CSS, vous pouvez appliquer une classe à différents widgets en quelques étapes seulement :

Sélectionnez le widget dans Qodly Studio.
Allez dans l’onglet Propriétés.
Recherchez l’option Classe CSS et saisissez le nom de la classe définie dans votre fichier CSS.

Cas d’utilisation réels

Prenons l’exemple de la page de connexion de l’application Performance Review.

Exemple 1 : stylisation d’un bouton de connexion

Nous voulons styliser le bouton de connexion avec

Texte blanc
Arrière-plan rouge
Coins arrondis
Effet de survol avec un rouge plus foncé

Nous créons une classe « button-full ».

Nous entrons la description CSS suivante :

self {
  border-radius : 4px ;
  border : 1px solid #dd3c4c ;
  couleur de fond : #dd3c4c ;
  couleur : #FFFFFF ;
  transition-duration : 0.4s ;
}

self:hover {
  border : 1px solid #c32232 ;
  background-color : #c32232 ;
  color : #FFFFFF ;
}

Dans Qodly Studio, appliquez ce style en utilisant la classe « button-full » sur vos boutons.

Exemple 2 : boutons adaptatifs pour les modes clair et foncé

Avec les requêtes média, vous pouvez créer des styles adaptatifs qui s’ajustent automatiquement en fonction du thème clair ou foncé de l’utilisateur.

Pour le mode sombre, nous voulons un rouge plus foncé avec un effet de survol plus clair. Ceci est facilement réalisable en utilisant le sélecteur @media (prefers-color-scheme : dark):

self {
  border-radius : 4px ;
  border : 1px solid #dd3c4c ;
  couleur de fond : #dd3c4c ;
  couleur : #FFFFFF ;
  transition-duration : 0.4s ;
}

self:hover {
  border : 1px solid #c32232 ;
  background-color : #c32232 ;
  color : #ffffff ;
}

@media (prefers-color-scheme : dark) {
  self {
    border-radius : 4px ;
    border : 1px solid #c32232 ;
    couleur de fond : #c32232 ;
    couleur : #ffffff ;
    transition-duration : 0.4s ;
  }
	
  self:hover {
    border : 1px solid #dd3c4c ;
    background-color : #dd3c4c ;
    color : #ffffff ;
    }
}

Le résultat en images :

Thème clair

Thème sombre

Exemple 3 : utilisation de variables CSS

Les variables CSS permettent de définir des constantes réutilisables, ce qui rend la gestion des styles plus facile et plus dynamique.

Par exemple, vous pouvez centraliser la gestion des couleurs et les appliquer dynamiquement en fonction du mode clair ou foncé.

Étape 1 : Définir une feuille de style partagée

Créez une feuille de style partagée et définissez toutes vos constantes:

:root {
   --main-bg-color : #FFFFFF ;
   --main-fg-color : #000000 ;
   --accent-color1 : #dd3c4c ;
   --accent-color2 : #c32232 ;

  @media (prefers-color-scheme : dark) {
    --main-bg-color : #121212 ;
    --main-fg-color : #E0E0E0 ;
    --accent-color1 : #c32232 ;
    --accent-color2 : #dd3c4c ;
  }
}

Étape 2 : Appliquer la variable à la classe button-full.

Pour utiliser une variable dans une classe CSS, il suffit d’utiliser la fonction var() :

self {
  border-radius : 4px ;
  border : 1px solid var(--accent-color1) ;
  background-color : var(--accent-color1) ;
  color : var(--text-color1) ;
  transition-duration : 0.4s ;
}

self:hover {
  border : 1px solid var(--accent-color2) ;
  background-color : var(--accent-color2) ;
  color : var(--text-color1) ;
}

Désormais, chaque fois que vous mettrez à jour les variables de couleur, tous les éléments stylisés seront automatiquement mis à jour, ce qui garantira un thème cohérent dans toute l’application.

Exemple 4 : stylisation d’un composant réactif

L’exemple suivant montre comment créer un design réactif qui s’adapte à la largeur de l’écran.

Le panneau de connexion se compose de trois boîtes de style :

Une boîte pour le titre de l’application.
Une boîte pour les champs de connexion et de mot de passe.
Un conteneur enveloppant les deux boîtes.

Le conteneur utilise display : flex ; et flex-wrap : wrap ; pour garantir la réactivité. Si les boîtes deviennent trop larges, elles s’empilent verticalement au lieu d’être côte à côte.

Ensuite, pour les deux autres boîtes, la largeur est modifiée entre 50 % et 100 % en fonction de la taille de l’écran. Pour des raisons esthétiques, la bordure est également modifiée.

Voici l’exemple CSS de la boîte positionnée à gauche ou en haut, selon l’écran :

self {
    border-radius : 10px 0 0 10px ;
    width : 50% ;
    height : 100% ;
}

@media screen and (max-width : 800px) {
    self {
      border-radius : 10px 10px 0 0 ;
      width : 100% ;
      height : fit-content ;
    }
}

Le résultat en images :

Une astuce pour commencer

Si vous ne savez pas comment structurer votre CSS, Qodly propose une fonction pratique. Vous pouvez définir des styles via les propriétés des widgets et les exporter en tant que CSS.

Cela vous permet de voir à quoi ressemble une règle CSS et de créer et modifier facilement vos propres classes CSS.

Aller plus loin

Nous espérons que ces exemples ont démontré la puissance et la flexibilité de CSS dans Qodly Studio. Pour aller plus loin, consultez ces ressources supplémentaires :

Avec CSS, vous pouvez transformer vos applications Qodly en expériences visuelles uniques et professionnelles, tout en simplifiant la gestion de vos styles. Commencez et partagez vos créations ou posez vos questions sur le 4D Forum !