Guide du thème Olive pour Larapen

Présentation du thème

Un thème chaleureux et organique qui apporte à votre site la beauté des tons terreux naturels.

Olive est un thème premium pour Larapen CMS, conçu autour d’une esthétique aux tons terreux adoucis. Il propose une palette soigneusement choisie de vert sauge, de terracotta et d’argile, sur un fond crème chaleureux, pour créer une atmosphère organique et accueillante sur votre site.

Le thème utilise une typographie premium : Outfit pour les titres (moderne, arrondie) et Satoshi pour le texte courant (nette, géométrique), chargées via l’API Fontshare. Chaque élément visuel, des coins arrondis aux ombres aux tons chauds, contribue au caractère organique si distinctif du thème.

Avec 42 sections, 20 modèles de page et une prise en charge complète du mode sombre aux tons chauds, Olive s’adapte parfaitement à tout type de site tout en conservant son caractère terreux.

En un coup d’œil

Fonctionnalités clés

Premiers pas

Installez et activez Olive en quelques étapes simples.

1. Téléverser le thème

   Placez le dossier olive dans votre installation Larapen, à l’emplacement extensions/themes/olive/. Vérifiez que tous les fichiers sont présents, y compris le manifeste theme.json.

2. Publier les ressources

   Exécutez la commande suivante dans votre terminal pour publier les ressources du thème (CSS, JS, images) dans le répertoire public :

   php artisan theme:publish olive

3. Compiler les ressources

   Reconstruisez le manifeste Vite afin que les nouveaux fichiers SCSS et JS soient compilés et disponibles :

   npx vite build

4. Activer dans l’administration

   Allez dans Panneau d’administration → Apparence → Thèmes, trouvez « Olive » dans la liste et cliquez sur Activer. Votre site utilise immédiatement le thème Olive.

Code d’achat (clé de licence)

Le thème Olive est vendu sous une licence distincte de celle de l’application principale et de chaque autre thème ou add-on, il possède donc son propre code d’achat (clé de licence). Il vous est demandé la première fois que vous activez le thème dans Panneau d’administration → Thèmes.

Nos produits sont vendus sur trois plateformes. La façon dont vous recevez un code d’achat dépend de l’endroit où vous avez acheté le produit.

1. Boutique bedigit.com (achat sur le site)

Dès que votre commande passe au statut Payée, une clé de licence est générée automatiquement pour chaque article sous licence de la commande (une clé par unité achetée) et envoyée par e-mail à l’adresse utilisée pour la commande, soit dans un e-mail de licence dédié, soit dans l’e-mail de confirmation de commande. La clé reste aussi disponible sous Mon compte → Mes licences, où vous pouvez l’afficher, la copier, voir les domaines sur lesquels elle est activée, et désactiver un domaine pour libérer un emplacement d’activation. La facture correspondante se trouve sous Mon compte → Mes commandes.

2. Gumroad

Un achat sur Gumroad produit deux e-mails distincts : le reçu Gumroad (envoyé par Gumroad, donnant accès aux fichiers) et un e-mail de clé de licence (envoyé par bedigit.com) qui contient votre code d’achat. Ce second e-mail est généré dès que Gumroad nous notifie la vente, il arrive donc normalement quelques secondes après le paiement. Lorsque le produit utilise la fonctionnalité de clés de licence propre à Gumroad, la même clé apparaît aussi dans le reçu Gumroad et sous Bibliothèque → votre achat sur gumroad.com. Utilisez la même adresse e-mail sur bedigit.com que sur Gumroad : vos clés sont alors liées automatiquement à votre compte, sous Mon compte → Mes licences ; vous pouvez aussi ajouter une clé Gumroad manuellement depuis Mon compte → Mes licences Gumroad.

3. Envato Market (CodeCanyon)

Envato délivre et fournit lui-même le code d’achat : nous ne l’envoyons jamais par e-mail, il n’y a donc rien à chercher dans votre dossier de spam. Connectez-vous à votre compte Envato / CodeCanyon, ouvrez la page Downloads, trouvez l’article et choisissez License certificate & purchase code dans le menu déroulant Download ; le code est inscrit dans ce certificat. Il ressemble à 12345678-90ab-cdef-1234-567890abcdef et ne change jamais, même lorsque vous renouvelez le support de l’article. Consultez l’article officiel : Where Is My Purchase Code?

Personnalisation

Adaptez Olive à votre marque tout en conservant son esthétique organique.

Paramètres du thème dans l’administration

Rendez-vous dans Panneau d’administration → Apparence → Paramètres du thème pour personnaliser ces options :

• Couleur principale : vert sauge par défaut (#7c8c6e). Utilisée pour les boutons, les liens et les accents.
• Couleur secondaire : terracotta par défaut (#c67a5c). Utilisée pour les mises en avant et les éléments d’appel à l’action.
• Couleur d’accent : argile par défaut (#a0845c). Utilisée pour les éléments décoratifs et les badges.
• Couleur de fond : crème chaleureux par défaut (#faf8f5). Peut être remplacée par n’importe quel ton chaud.
• Style de mise en page : large (conteneur de 1250px) par défaut.
• Transparence de l’en-tête : active ou désactive la superposition transparente de l’en-tête.
• Mode sombre : active ou désactive la prise en charge du mode sombre aux tons chauds.

Propriétés personnalisées CSS

Olive utilise des propriétés personnalisées CSS préfixées par --ol- pour faciliter la personnalisation. Redéfinissez-les dans votre CSS personnalisé pour ajuster le thème sans modifier ses fichiers :

CSS

:root {
    --ol-primary: #7c8c6e;
    --ol-secondary: #c67a5c;
    --ol-accent: #a0845c;
    --ol-bg: #faf8f5;
    --ol-bg-dark: #f0ece6;
    --ol-text: #3d3a36;
    --ol-radius: 0.625rem;
    --ol-shadow: 0 2px 16px ...;
    --ol-font-heading: 'Outfit';
    --ol-font-body: 'Satoshi';
    --ol-font-size: 16px;
}

Modèles de page

20 modèles de page dédiés à la plateforme principale et aux add-ons.

Modèles principaux

Modèles des add-ons

42 sections

Une riche bibliothèque de sections réutilisables à combiner pour construire n’importe quelle mise en page.

Les sections sont les briques de vos pages. Dans le panneau d’administration, utilisez le modèle de page Sectioned pour glisser et organiser les sections dans l’ordre de votre choix. Chaque section reprend l’esthétique aux tons terreux d’Olive, avec des coins arrondis, des ombres chaudes et des espacements organiques.

Catégories de sections

Toutes les sections disponibles

• Hero bannière
• Hero slider
• Hero vidéo
• Hero scindé
• À propos
• À propos étendu
• Fonctionnalités en grille
• Fonctionnalités avec icônes
• Fonctionnalités en liste
• Services
• Services détaillés
• Portfolio en grille
• Portfolio Masonry
• Portfolio en carrousel
• Équipe en grille
• Équipe en carrousel
• Témoignages
• Témoignages en carrousel
• Tableaux de prix
• Tarifs avec bascule
• FAQ en accordéon
• FAQ sur deux colonnes
• Logos des partenaires
• Partenaires en carrousel
• Formulaire de contact
• Contact scindé
• Appel à l’action
• Bannière CTA
• Newsletter
• Compteur de statistiques
• Statistiques mises en avant
• Chronologie
• Étapes du processus
• Galerie en grille
• Galerie Lightbox
• Derniers articles du blog
• Articles du blog à la une
• Carte
• Bloc de contenu
• Séparateur
• Espacement
• HTML personnalisé

En-tête transparent

Un style d’en-tête distinctif qui se superpose élégamment au contenu de vos pages.

Le thème Olive propose un en-tête transparent qui se place au-dessus du contenu de la page au lieu de le repousser vers le bas. Cela crée un effet plein écran raffiné, où les sections hero s’étendent jusqu’en haut de la fenêtre.

Fonctionnement

• L’en-tête est d’abord entièrement transparent, avec un texte blanc sur les fonds sombres.
• Lorsque l’utilisateur fait défiler la page, l’en-tête prend un fond crème chaleureux avec une ombre discrète.
• Les liens de navigation passent du blanc à la couleur de texte du thème.
• Le logo peut disposer de variantes claire et sombre distinctes pour chaque état.
• Le passage d’un état à l’autre est fluide et utilise des transitions CSS pour un rendu soigné.

Bonnes pratiques

• Utilisez des sections hero : commencez vos pages par une section hero dotée d’une image de fond ou d’une couleur sombre, afin que le texte blanc de l’en-tête reste visible.
• Testez toutes les pages : vérifiez que vos pages intérieures fonctionnent aussi bien avec l’en-tête transparent. Les pages de couleur claire peuvent nécessiter un espacement supérieur supplémentaire.
• Variantes du logo : téléversez une version claire (blanche) et une version sombre de votre logo dans les Paramètres du thème pour une visibilité optimale dans les deux états.
• Désactivez-le si besoin : vous pouvez désactiver l’en-tête transparent dans les Paramètres du thème et utiliser à la place un en-tête opaque standard.

Pied de page

Un pied de page sur 4 colonnes, au style chaleureux, avec des zones de contenu flexibles.

Le pied de page utilise un fond sombre aux tons chauds (et non un noir pur) qui complète la palette aux tons terreux. Sous les 4 colonnes, une barre inférieure affiche le texte de copyright, le sélecteur de langue et les liens de navigation du bas de page.

Mode sombre

Des tons sombres chauds qui préservent le caractère organique.

Contrairement aux thèmes qui utilisent un noir pur (#000) pour le mode sombre, Olive utilise des tons sombres chauds, naturels et cohérents avec la palette aux tons terreux. Le fond du mode sombre est un anthracite chaud, et les surfaces utilisent des gris chauds légèrement plus clairs.

Palette du mode sombre

Comportement

• Respecte la préférence système de l’utilisateur via prefers-color-scheme.
• Un bouton de bascule manuel est disponible dans la navigation de l’en-tête.
• La préférence est enregistrée dans le stockage local et conservée d’une visite à l’autre.
• Les 42 sections disposent toutes de styles dédiés au mode sombre.
• Les images peuvent, en option, voir leur luminosité réduite en mode sombre pour le confort visuel.
• Les couleurs d’accent vert sauge, terracotta et argile sont légèrement éclaircies en mode sombre pour garantir un contraste suffisant.

Palette aux tons terreux

Le système de couleurs complet qui donne à Olive son caractère organique et naturel.

Couleurs principales

Palette étendue

Couleurs du texte & de l’interface

Prise en charge des add-ons

Olive inclut des modèles stylisés pour tous les principaux add-ons Larapen.

Modules principaux

• Pages : pages de contenu standard et pages d’atterrissage à base de sections, avec prise en charge complète de l’éditeur WYSIWYG.
• Portfolio : mises en page en grille et Masonry avec lightbox, filtres et pages de détail des projets.
• Team : cartes des membres de l’équipe avec photos, fonctions, biographies et liens sociaux.
• FAQ : mises en page de FAQ en accordéon et sur deux colonnes, avec des animations fluides.
• Partners : vitrines de logos en carrousel ou en grille.
• Pricing : tableaux de prix avec bascule (mensuel/annuel) et comparaison des fonctionnalités.

Add-ons étendus

• Blog : liste des articles, détail, catégories et tags.
• Shop : catalogue de produits, panier, paiement et pages de commande.
• Booking : interface de prise de rendez-vous.
• Careers : offres d’emploi et formulaires de candidature.
• Events : calendrier des événements et pages de détail.
• Forum : forums de discussion et fils de discussion.
• HelpDesk : base de connaissances avec recherche.
• Glossary : définitions de termes classées par ordre alphabétique.

Lorsqu’un add-on est activé dans le panneau d’administration de Larapen, les modèles stylisés d’Olive sont utilisés automatiquement. Chaque modèle d’add-on suit l’esthétique aux tons terreux, avec une typographie homogène, des coins arrondis et des ombres chaudes.

Mise à jour

Comment mettre à jour ce thème vers une version plus récente.

Téléversement depuis le panneau d’administration (recommandé)

1. Téléchargez le dernier fichier .zip de ce thème.
2. Allez dans Panneau d’administration → Thèmes et cliquez sur le bouton Téléverser.
3. Sélectionnez ou faites glisser le fichier .zip dans la zone de téléversement.
4. Une demande de confirmation affiche le numéro de la version actuelle et celui de la nouvelle version. Cliquez sur Remplacer pour continuer.
5. Allez dans Panneau d’administration → Mise à jour du système (/admin/update) pour appliquer les éventuelles migrations de base de données en attente.

Désinstallation

Comment cesser d’utiliser ce thème sans rien perdre.

Les thèmes ne s’activent pas et ne se désactivent pas un par un : un seul thème est actif à la fois, vous cessez donc d’utiliser Olive en activant un autre thème. Allez dans Panneau d’administration → Thèmes et cliquez sur Activer sur le thème que vous souhaitez utiliser à la place.

• Olive reste installé : ses fichiers restent dans extensions/themes/olive/ et sa carte reste dans la liste.
• Ses paramètres (couleurs, polices, mise en page, options d’en-tête et de pied de page, CSS personnalisé) restent enregistrés dans la base de données, tout comme le style que vous avez appliqué à chaque section de la page d’accueil.
• Le code d’achat enregistré lors de l’activation est conservé : réactiver le thème ne vous le redemandera pas.

Réactivez-le quand vous le souhaitez : le front-end revient exactement tel que vous l’avez laissé.

Suppression

Comment supprimer définitivement ce thème, et ce qui disparaît avec lui.

La suppression efface le thème définitivement. Le thème actif ne peut pas être supprimé, la suppression se fait donc toujours en deux étapes :

1. Activez un autre thème (voir Désinstallation).
2. Cliquez sur Supprimer sur la carte Olive et confirmez.

Cela supprime :

• le répertoire du thème extensions/themes/olive/ ;
• ses ressources publiées dans public/themes/olive/ ;
• ses fichiers téléversés dans storage/app/public/themes/olive/ ;
• ses artefacts de build Vite : les fichiers hachés dans public/build/ et leurs entrées dans le manifeste ;
• sa ligne dans la table themes, c’est là que sont stockés ses paramètres, donc les couleurs, polices, options de mise en page et le CSS personnalisé que vous avez configurés pour lui sont perdus.

Le style appliqué à chaque section de la page d’accueil est enregistré sous le nom du thème et non sur sa ligne dans la table, il survit donc à la suppression : réinstallez Olive et vous retrouverez le style de vos sections, tandis que les paramètres propres au thème repartiront de leurs valeurs par défaut.

La suppression est refusée, avant toute suppression de fichier, lorsque le thème est encore actif ou lorsque l’utilisateur du serveur web (PHP) ne peut pas supprimer extensions/themes/olive/. Dans ce dernier cas, donnez à cet utilisateur le droit d’écriture sur le répertoire et sur son répertoire parent, puis réessayez.

Supprimer le dossier par FTP ou SSH n’est pas équivalent : les ressources publiées, les artefacts de build et la ligne de la table themes restent en place. Utilisez plutôt Supprimer dans le panneau d’administration.

Questions fréquentes

Questions courantes sur le thème Olive.

Puis-je modifier les couleurs aux tons terreux ?

Oui. Toutes les couleurs sont définies sous forme de propriétés personnalisées CSS (préfixées par --ol-). Vous pouvez les redéfinir dans les Paramètres du thème ou dans un fichier CSS personnalisé. Pour un résultat optimal, restez toutefois sur des tons adoucis et désaturés qui complètent l’esthétique organique.

La police Satoshi nécessite-t-elle une clé d’API ?

Non. Satoshi est chargée via l’API Fontshare, qui la fournit gratuitement. Aucune clé d’API ni inscription n’est requise. La police est chargée directement depuis api.fontshare.com.

Puis-je désactiver l’en-tête transparent ?

Oui. Allez dans Administration → Apparence → Paramètres du thème et désactivez l’option « En-tête transparent ». L’en-tête s’affiche alors comme une barre de navigation opaque standard, avec le fond crème chaleureux.

Comment fonctionne le mode sombre ?

Le mode sombre utilise des tons sombres chauds (et non un noir pur) pour préserver le caractère organique. Il respecte la préférence système de l’utilisateur et propose un bouton de bascule manuel dans l’en-tête. Les 42 sections disposent toutes de styles dédiés au mode sombre.

Le thème est-il responsive ?

Oui. Olive est entièrement responsive et conçu mobile-first. Les 42 sections, les modèles de page et l’en-tête transparent s’adaptent harmonieusement, du mobile au bureau.

Puis-je utiliser Olive avec des add-ons absents de la liste des add-ons pris en charge ?

Le thème inclut des modèles stylisés pour 20 types de pages d’add-ons. Pour les add-ons non listés, le système utilise les vues par défaut de l’add-on, qui fonctionnent toujours mais peuvent ne pas correspondre exactement à l’esthétique aux tons terreux.

Comment mettre à jour le thème ?

Remplacez le dossier extensions/themes/olive/ par la nouvelle version, puis exécutez php artisan theme:publish olive et npx vite build. Vos paramètres personnalisés dans le panneau d’administration seront conservés.

Puis-je créer des sections personnalisées ?

Oui. Créez un nouveau partial Blade dans extensions/themes/olive/views/sections/ et enregistrez-le dans la configuration du thème. Suivez la structure des sections existantes pour rester cohérent avec le système de design aux tons terreux.