Thème du site web

1. Thème

1.1. Configuration du thème

Thème :

• Nom du thème : Donnez un nom à votre thème pour le reconnaître facilement, par exemple "Thème Entreprise Moderne".

Police Google Font :

• Sélectionnez une police Google Font appropriée pour votre site. Par exemple, "Roboto", "Open Sans" ou "Lato".

Taille de la police :

• Définissez une taille de police par défaut, comme "16px" ou "14px".

Propriétés de la police :

• Vous pouvez garder les propriétés actuelles ou les ajuster en fonction des styles de votre police choisie.

Exemple : "wght@300;400;500;600;700;800".> Les propriétés de la police permettent de définir différents niveaux d'épaisseur pour le texte. Les valeurs typiques pour le poids de la police (weight) vont de 100 (très fin) à 900 (très épais).

Boutons :

• Permet de personnaliser l'esthétique des boutons.

Couleurs :

• Choisissez des couleurs de texte, généralement un gris foncé ou noir pour une bonne lisibilité, par exemple, "#333333".

1.2. Feuille de style

• Ecrasements de style personnalisés

Vous pouvez utiliser cette section pour ajouter des styles CSS personnalisés qui écraseront les styles par défaut du thème.

Exemple : Redéfinir la largeur maximale du conteneur

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

• SCSS personnalisé

Si vous préférez utiliser SCSS pour une gestion plus avancée des styles, vous pouvez ajouter des styles SCSS dans cette section.

Exemples :

• Personnalisation des liens :

a {
  color: #6F2B51; 
}

a:hover {
  color: darken(#6F2B51, 10%); 
}

• Personnalisation des boutons :

.btn-primary {
    background-color: $teal;
    color: $orange;
}

• Inclure le thème de l'application

Vous pouvez voir les différentes applications pour lesquelles le thème sera appliqué. Assurez vous de cocher toutes les applications pertinentes pour que le thème soit cohérent à travers tous les modules de votre site.

Utilisation de Bootstrap 4 : Bibliothèque de styles CSS et JavaScript open-source qui facilite la création de sites web réactifs et modernes

1.3. Script

• Cette section vous permet d'ajouter du JavaScript personnalisé à votre thème. Le JavaScript peut être utilisé pour ajouter des interactions dynamiques, améliorer l'expérience utilisateur et intégrer des fonctionnalités supplémentaires sur votre site web.

Exemple : Pour afficher une fenêtre de bienvenue

document.addEventListener('DOMContentLoaded', function() {
    alert('Bienvenue sur notre site web !');
});

2. Fichiers de thème inclus

Si vous jetez un œil au thème par défaut généré par la boîte de dialogue de configuration, il importe frappe/public/scss/websiteet erpnext/public/scss/website. Ce sont les fichiers de thème par défaut pour frappeet erpnextapp. Si vous avez installé d'autres applications, elles peuvent également fournir leur propre website.scssfichier.

La section "Fichiers de thème inclus" répertorie toutes les applications installées. Chaque application peut apporter son propre fichier de thème ( app/public/scss/website.scss). Un thème peut être complet, fournissant des styles pour l'ensemble du site Web, ou simplement un module complémentaire. Par exemple, il peut styliser uniquement les éléments qu'il introduit. En cochant les cases, vous pouvez choisir quel thème doit être inclus dans votre site Web.