Documentation

  1. Accueil
  2. Docs
  3. Documentation
  4. Principales fonctionnalit...
  5. Le thème
  6. Thème ‘Voscouleurs’

Thème ‘Voscouleurs’

Le thème ‘Voscouleurs’ vous permet de personnaliser votre instance depuis la configuration du thème, menu « Admin/Configuration », au moyen de variables de couleurs.

Il est donc important de penser à sauvegarder votre config, au même titre que le modèle et le jeu de données.

Par le même moyen, il prévoit la possibilité d’ajouter une en-tête avec logos, titre et sous-titre, tous optionnels et d’autres paramètres comme une police spécifique pour les titres entre autres.

Ci-dessous la configuration de ce thème au format natif JSON avec les indications de saisie :


"front": {
         "theme": {
            "information": "Par défaut, les couleurs sont celles du navigateurs.Toutes les configurations ci-dessous sont optionnelles. Pour les désactiver, supprimer \"le texte entre les guillemets\"",
            "siteTitle": "titre du site",
            "summary": "promesse du site, sous-titre",
            "logo": {
                "file": "url fichier du logo de l'organisme",
                "alt": "nom de l'organisme",
                "url": "url de l'organisme",
                "size": "100"
            },
            "font": {
                "information": "utiliser strictement les fonts disponibles via https://fonts.google.com/",
                "family": "nom d'une famille de googlefont construit le lien dans head ",
                "title": "nom de cette font pour les titres déclaration css",
                "titleSize": "taille maximale de cette font pour les titres déclaration css",
                "titleGraph": "nom de cette font pour les titres des graphiques",
                "titleGraphSize": "taille de cette font pour les titres des graphiques",
                "titleHeader": "nom de cette font pour les titres de la bannière",
                "titleHeaderSize": "taille de cette font pour les titres de la bannière"
            },
            "color": {
                "info-theme": "Note : les trois couleurs suivantes permettent de mémoriser les codes couleur de 2 couleurs qui font l'identité de votre organisme",
                "themePrimary": "code couleur ",
                "themeSecondary": "code couleur",
                "info-fond": "bg, pour 'background' en css, permet de mettre une couleur de fond sur les différents éléments de structure de vos pages. 'bgContrast' permet de visualiser tout objet (texte, icon,...) dans le bg.",
                "bgBody": "",
                "bgContrast": "",
                "bgHeader": "",
                "bgHeaderUrl": "",
                "titleHeader": "",
                "bgContent": "",
                "bgFacet": "",
                "titles": "",
                "titleGraph": "",
                "info-bouton": "couleurs des liens, icons et boutons",
                "linkText": "",
                "linkTextHover": "",
                "icon": "",
                "iconHover": "",
                "button": "",
                "buttonHover": "",
                "TextContrast": "couleur contraste pour texte des boutons"
            }
        }
}

Par défaut, « Voscouleurs » est renseigné avec les couleurs de LODEX :


"theme": {
     "information": "Par défaut, le theme est prérempli aux couleurs de LODEX. Toutes les configurations ci-dessous sont optionnelles. Pour les désactiver, supprimer \"le texte entre les      guillemets\". Pour en savoir plus :https://www.lodex.fr/docs/documentation/principales-fonctionnalites-disponibles/le-theme/#le-th%C3%A8me-%E2%80%98voscouleurs%E2%80%99",
     "siteTitle": "titre du site",
     "summary": "promesse du site, sous-titre",
     "logo": {
          "file": "https://www.lodex.fr/wp-content/uploads/logo_carre_couleur-fond-blanc-01.svg",
          "alt": "LODEX",
          "url": "https://www.lodex.fr/",
          "size": "100"
          },
     "font": {
          "information": "utiliser strictement les fonts disponibles via https://fonts.google.com/",
          "family": "Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap",
          "title": "\"Source Sans 3\", serif",
          "titleSize": "1.5rem",
          "titleGraph": "\"Source Sans 3\", serif",
          "titleGraphSize": "1.4rem",
          "titleHeader": "\"Source Sans 3\", serif",
          "titleHeaderSize": "3rem"
          },
     "color": {
          "info-theme": "Note : les trois couleurs suivantes permettent de mémoriser les codes couleur de 2 couleurs qui font l'identité de votre organisme",
          "themePrimary": "darkorange ",
          "themeSecondary": "#7cbc41",
          "info-fond": "bg, pour 'background' en css, permet de mettre une couleur de fond sur les différents éléments de structure de vos pages. 'bgContrast' permet de visualiser tout objet (texte, icon,...) dans le bg.",
          "bgBody": "white",
          "bgContrast": "DarkSlateGray",
          "bgHeader": "white",
          "titleHeader": "#7cbc41",
          "bgContent": "white",
          "bgFacet": "",
          "titles": "#7cbc41",
          "titleGraph": "darkorange",
          "info-bouton": "couleurs des liens, icons et boutons",
          "linkText": "#7cbc41",
          "linkTextHover": "darkorange",
          "icon": "#7cbc41",
          "iconHover": "darkorange",
          "button": "#7cbc41",
          "buttonHover": "darkorange",
          "textContrast": "white"
          }
     }

Comment pouvons-nous aider ?