Un thème de place de marché éditorial pour LaraClassifier : hero pleine largeur, pilule de recherche qui se transforme, cartes photo au format 4:5 et panneau vendeur fixe. Construit sur Bootstrap 5.3 avec un système de design piloté par des tokens et un mode sombre de premier ordre.
Présentation du thème
Aurora est un second thème front-end pour LaraClassifier au ton éditorial : des surfaces quasi neutres laissent les photos des annonces porter la couleur, une seule teinte de marque saturée signale tout ce qui est interactif, et un unique accent chaud est réservé à la mise « en avant ».
Points forts
- 10 sections de page d'accueil
- Hero de page d'accueil pleine largeur
- Pilule de recherche qui s'ancre dans la barre de navigation
- Mode sombre de premier ordre
- Entièrement responsive
- Prise en charge du RTL
- Prêt pour le multilingue
- 5 styles de diaporama de galerie
- 5 familles de polices Google Fonts
- Injection de CSS & JS personnalisés
Palette de couleurs
| Couleur | Valeur |
|---|---|
| Primaire | #0B6B53 |
| Secondaire | #5C6660 |
| Accent | #E5A50A |
| Urgent | #B23A5B |
| Texte / Dalle | #141A17 |
| Fond | #F4F2EE |
La couleur primaire est un vert sapin utilisé pour les liens, les boutons, les anneaux de focus et les pastilles de prix ; l'accent est un safran réservé aux badges « en avant » et aux notes ; le prune signale les annonces urgentes ; et la page repose sur un fond lin chaleureux.
Typographie
- Fraunces : titres et textes d'affichage (serif variable)
- Inter : interface et texte courant : base de 16px
Trois autres familles, Instrument Serif, Manrope et Lexend, sont préchargées et sélectionnables dans les sélecteurs de polices du thème : chaque choix de l'administrateur s'affiche donc exactement comme dans l'aperçu, sans repli sur une police système.
À qui s'adresse ce thème ? Aurora convient aux places de marché où la photo fait vendre : immobilier, véhicules, mode, mobilier, art. Son interface discrète, ses espaces blancs généreux et ses grands titres serif donnent à un site de petites annonces l'allure d'un catalogue éditorial, tout en conservant intactes toutes les fonctionnalités de LaraClassifier.
Prise en main
Activez Aurora et faites-en le thème front-end de votre site en quelques minutes.
-
Connectez-vous à votre Panneau d'administration
Rendez-vous dans l'espace d'administration de votre site (généralement
/admin) et connectez-vous avec vos identifiants d'administrateur. -
Allez dans Thèmes
Cliquez sur Thèmes dans la barre latérale de l'administration (
/admin/themes). Vous verrez une carte pour chaque thème installé sousextensions/themes/. -
Activez « Aurora »
Repérez la carte Aurora et cliquez sur Activer. Aurora est un thème payant : si votre installation exige une validation de licence, votre code d'achat Envato vous sera demandé une seule fois ; il est ensuite mémorisé.
-
Personnalisez-le à votre goût
Ouvrez Thèmes → Aurora → Paramètres (
/admin/themes/aurora/settings) pour modifier les couleurs, les polices, les options d'en-tête et de pied de page, le style de la galerie des annonces, et plus encore. Les modifications s'appliquent immédiatement : aucune recompilation n'est nécessaire. -
Organisez votre page d'accueil
Allez dans Sections de la page d'accueil (
/admin/page-sections) pour activer, réordonner et configurer les sections de la page d'accueil. Aurora fournit des valeurs par défaut éditoriales pour chacune ; tout ce que vous y enregistrez les remplace, thème par thème.
Code d'achat (clé de licence)
Le thème Aurora 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 manière dont vous recevez un code d'achat dépend de l'endroit où vous avez acheté le produit.
| Plateforme / Marketplace | Comment obtenir le code d'achat | Où le retrouver |
|---|---|---|
| Boutique bedigit.com Achat sur le site (Boutique) |
Généré automatiquement lorsque la commande est payée, puis envoyé par e-mail, soit dans un e-mail de licence dédié, soit dans l'e-mail de confirmation de commande. | Mon compte → Mes licences sur bedigit.com |
| Gumroad | Créé dès que Gumroad nous notifie la vente, puis envoyé dans un e-mail séparé, en plus du reçu Gumroad. | L'e-mail de licence, votre Bibliothèque Gumroad et Mon compte → Mes licences sur bedigit.com |
| Envato Market CodeCanyon |
Délivré par Envato, et non par nous, et jamais envoyé par e-mail : vous le téléchargez vous-même depuis votre compte Envato. | Compte Envato → Downloads → License certificate & purchase code |
Vérifiez votre dossier de spam. Pour les achats effectués sur la Boutique bedigit.com comme sur Gumroad, le code d'achat est envoyé par e-mail, et les e-mails de licence automatisés sont très souvent filtrés. Si le message n'est pas dans votre boîte de réception, regardez dans votre dossier spam / courrier indésirable avant de contacter le support, et ajoutez notre adresse d'expédition à vos contacts ou à votre liste d'autorisation.
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 à l'adresse e-mail 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 également disponible sous Mon compte → Mes licences, où vous pouvez la révéler, 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 génère 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, repérez l'article, puis 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?
Vous avez perdu votre code d'achat ? Recherchez dans votre boîte mail (dossier de spam inclus) les termes « licence » ou « code d'achat », puis consultez Mon compte → Mes licences sur bedigit.com pour les achats Boutique et Gumroad, ou Downloads → License certificate sur Envato. S'il est toujours introuvable, ouvrez un ticket sur notre Centre d'aide en indiquant votre numéro de commande (Boutique), l'identifiant de vente Gumroad ou l'e-mail de l'acheteur (Gumroad), ou votre nom d'utilisateur Envato et le nom de l'article (Envato).
Personnalisation
Adaptez chaque aspect du thème depuis le Panneau d'administration : aucun code requis.
Couleurs
Modifiez les couleurs primaire, secondaire, d'accent et du texte avec des sélecteurs de couleur, ou activez un skin prédéfini. Tout le site se redessine via les variables CSS : boutons, liens, anneaux de focus, pastilles et étiquettes de prix, en une seule opération.
Typographie
Choisissez la police des titres (Fraunces, Instrument Serif, Inter, Manrope ou Lexend), la police du texte (Inter, Manrope ou Lexend) et la taille de police de base. Chaque famille proposée est préchargée : ce que vous choisissez est exactement ce qui s'affiche.
Mise en page
Mise en page large avec un conteneur de 1250px (1320px pour les bandeaux larges), plus un réglage d'alignement du hero : le hero centré classique, ou une page entièrement alignée à gauche.
En-tête
La barre de navigation transparente au-dessus du hero est entièrement configurable : réglages distincts pour son état par défaut et son état après défilement, un troisième jeu pour les pages autres que l'accueil, dimensionnement du logo, bordures, ombres et recherche ancrée dans la barre de navigation.
Pied de page
Un pied de page sombre et aéré par défaut. Configurez la couleur ou l'image de fond, les couleurs des titres, du texte et des liens, la couleur du séparateur intérieur, les espacements et le bouton de retour en haut.
Avancé
Choisissez parmi 5 styles de diaporama de galerie pour la page d'annonce, définissez l'image de fond des pages d'authentification, et injectez du CSS et du JavaScript personnalisés directement depuis le Panneau d'administration.
Astuce : Toutes les options se trouvent dans Thèmes → Aurora → Paramètres. Les valeurs enregistrées sont stockées en base de données (par thème) et fusionnées avec les valeurs par défaut fournies avec le thème : remplacer les fichiers du thème ne fait donc jamais perdre votre personnalisation. Une action Réinitialiser restaure à tout moment les valeurs par défaut du thème.
Sections de la page d'accueil
La page d'accueil est composée de 10 types de sections que vous pouvez activer, réordonner et configurer depuis Sections de la page d'accueil dans le Panneau d'administration. Aurora fournit son propre gabarit et son propre style éditorial pour chacune d'elles.
Hero
- Formulaire de recherche
Un hero pleine largeur de 620px de haut : grand titre serif, sous-titre et pilule de recherche sur une photographie de fond, avec la barre de navigation transparente par-dessus. Une zone de formulaire étendue optionnelle ajoute des champs de recherche supplémentaires.
Navigation
- Catégories
- Localités
La section Catégories propose quatre types d'affichage : liste à grandes icônes, liste normale, liste illustrée (vignettes photo) et liste normale avec sous-catégories. La section Localités présente les villes les plus actives et peut afficher une carte SVG interactive de votre pays.
Annonces
- Annonces premium
- Dernières annonces
Les annonces mises en avant et les plus récentes, en grille ou en carrousel, avec les cartes photo 4:5 d'Aurora. Le nombre d'éléments, l'ordre, la mise en cache et un bouton « voir plus » sont tous configurables par section.
Engagement & contenu
- Newsletter
- Statistiques
- Zone de texte
Le bloc Newsletter recueille des abonnés (avec nom et téléphone en option) ; Statistiques affiche des compteurs animés pour les annonces, les localités et les utilisateurs ; Zone de texte est un bandeau libre pour du contenu éditorial, par langue.
Publicité
- Publicité en haut
- Publicité en bas
Deux emplacements publicitaires reliés aux entrées Publicité configurées dans le Panneau d'administration.
Les valeurs par défaut éditoriales d'Aurora : un rythme vertical uniforme et généreux entre les sections (des espaces blancs, jamais de bandeaux teintés), un hero plus haut avec un voile plus dense pour que le titre serif reste lisible sur les photos, et des coins de formulaire de recherche nets, presque carrés, au lieu de la pilule du cœur. Ce sont des valeurs par défaut appliquées à l'affichage : tout ce que vous enregistrez dans le formulaire d'administration de la section l'emporte, et le style des sections est stocké par thème, de sorte que la page d'accueil de votre thème Default reste intacte.
Gabarits de pages
Aurora redessine chaque page front-end de LaraClassifier avec ses propres gabarits Blade.
| Page | Ce qu'apporte Aurora |
|---|---|
| Page d'accueil | Page en sections construite à partir des 10 sections de page d'accueil ci-dessus, sous la barre de navigation transparente |
| Résultats de recherche | Résultats par catégorie, ville, tag et mot-clé avec modes d'affichage grille, liste et compact, barre latérale de filtres (panneau inférieur sur mobile), navigateur des catégories racines et fil d'Ariane |
| Détail d'une annonce | Galerie photo avec 5 styles de diaporama (Swiper horizontal/vertical, bxSlider horizontal/vertical, carrousel Bootstrap), valeurs des champs personnalisés, panneau vendeur fixe, conseils de sécurité et barre de contact ancrée sur téléphone |
| Publier une annonce | Assistant en plusieurs étapes : Détails → Photos → Formules → Fin, avec des champs personnalisés par catégorie et une barre latérale de progression |
| Modifier une annonce | Les mêmes étapes sous forme d'écrans de modification distincts (détails, photos, formules) |
| Compte utilisateur | Vue d'ensemble avec statistiques, mes annonces, alertes de recherche enregistrées, notifications, préférences, profil, sécurité (mot de passe & double authentification), comptes liés, transactions, abonnement, clôture du compte |
| Messagerie | Interface de conversation complète : barre latérale des fils de discussion, historique des messages, fenêtre modale de nouveau message |
| Profil vendeur | Page de profil public listant les annonces actives d'un utilisateur |
| Tarifs | Formules de promotion et formules d'abonnement, ainsi que le parcours de paiement (choix de la formule et moyens de paiement) |
| Contact & pages CMS | Formulaire de contact et pages statiques (conditions, FAQ, …) créées depuis le Panneau d'administration |
| Pays & plan du site | Page de sélection du pays et plan du site HTML |
| Pages d'authentification | Les écrans de connexion, d'inscription et de double authentification partagent la compilation Bootstrap et les tokens du thème, sur une image de fond configurable |
Remarque : Toute page qu'Aurora ne remplace pas se rabat automatiquement sur les vues standard de l'application : les add-ons et les futures fonctionnalités continuent ainsi de fonctionner, même avant que le thème ne les habille.
En-tête & pied de page
La signature d'Aurora est sa barre de navigation à deux états : transparente au-dessus du hero de la page d'accueil, opaque dès que l'on fait défiler la page.
En-tête sur la page d'accueil
| État | Comportement (réglages par défaut) |
|---|---|
| Par défaut | 84px de haut, transparente au-dessus de la photographie du hero, libellés clairs (blancs) avec une légère ombre portée pour la lisibilité, animation en fondu |
| Après défilement (« fixée ») | Après 240px de défilement, la barre passe en fondu enchaîné à une barre sombre opaque de 68px avec bordure inférieure et ombre ; le logo bascule automatiquement vers sa variante claire |
| Relais de la recherche | Dès que la pilule de recherche du hero sort de l'écran, un champ de recherche compact apparaît en fondu dans la barre de navigation : il y a donc toujours exactement un seul champ de recherche à l'écran |
En-tête sur les autres pages
Les pages de recherche, d'annonce, de compte et CMS utilisent un jeu de réglages d'en-tête indépendant : une barre de navigation claire et opaque de 72px dès le premier affichage (64px une fois fixée). Les pages qui ont leur propre barre de recherche (résultats de recherche, catégories, villes) n'affichent la recherche de la barre de navigation qu'une fois celle-ci sortie de l'écran ; les pages qui n'en ont pas l'affichent immédiatement.
Options de l'en-tête
| Option | Description |
|---|---|
| Style | Transparent (au-dessus du hero) ou opaque |
| Hauteurs | Hauteurs distinctes par défaut et après défilement, par famille de pages |
| Variante sombre | Barre claire ou sombre par état, qui détermine le contraste des libellés et du logo |
| Animation | Transitions en fondu / fondu enchaîné entre les états |
| Fond | Classe de couleur, couleur personnalisée ou image |
| Bordure & ombre | Style, épaisseur et couleur de la bordure inférieure ; ombre portée par état |
| Couleurs des liens & du texte | Par état, avec une ombre portée optionnelle sur les éléments au-dessus de photos chargées |
| Dimensions du logo | Hauteur et largeur maximales avec conservation des proportions (38px sur la barre de la page d'accueil, 34px ailleurs par défaut) |
| Recherche dans la barre de navigation | Activer/désactiver la recherche par mot-clé ancrée, par famille de pages |
Options du pied de page
| Option | Par défaut |
|---|---|
| Pied de page sombre | Activé : fond encre #141A17 |
| Espacement élevé | Activé : marges intérieures éditoriales généreuses |
| Couleurs des titres / du texte / des liens | #FFFFFF / #B7BEB8 / #D8DDD8 (survol #FFFFFF) |
| Séparateur intérieur | rgba(255, 255, 255, 0.12) |
| Image de fond, marges extérieures et intérieures | Vides : définissez-les si votre marque en a besoin |
| Retour en haut | Activé : apparaît après une hauteur d'écran de défilement |
Les colonnes de liens du pied de page et ses options de comportement (masquer les liens, masquer « powered by », …) sont des paramètres de l'application : ils sont donc conservés lors d'un changement de thème.
Mode sombre
Le mode sombre n'est pas un ajout de dernière minute : c'est un jeu de tokens à part entière, conçu en même temps que le thème clair.
Vert sapin, pas ardoise
Aurora remplace la palette sombre en gris neutre de Bootstrap par un vert sapin profond, afin que les photos des annonces gardent la même tonalité chaude dans les deux modes.
Bascule pour les visiteurs
Un sélecteur de mode dans l'en-tête permet aux visiteurs de choisir le mode clair, le mode sombre, ou de suivre la préférence de leur système. Le choix est conservé d'une visite à l'autre.
Contrôles administrateur
Définissez le mode par défaut et l'affichage ou non de la bascule, depuis les paramètres du thème.
La dalle : certains panneaux, comme la pastille de prix, l'arrière-plan de la galerie ou le bloc newsletter, sont volontairement sombres dans les deux modes. En mode sombre, la dalle devient simplement plus profonde que la page afin de rester lisible comme un panneau distinct. C'est voulu, pas un bug.
Configuration
- Mode par défaut : indique si les nouveaux visiteurs démarrent en mode clair ou en mode sombre (par défaut : clair)
- Autoriser la bascule de mode : affiche ou masque le commutateur clair/sombre dans l'en-tête (par défaut : activé)
Mise à jour
Comment mettre à jour ce thème vers une version plus récente.
Téléversement depuis le Panneau d'administration (recommandé)
- Téléchargez le dernier fichier
.zipde ce thème. - Allez dans Panneau d'administration → Thèmes et cliquez sur le bouton Téléverser.
- Sélectionnez ou glissez le fichier
.zipdans la zone de téléversement. - Une demande de confirmation affiche les numéros de la version actuelle et de la nouvelle version. Confirmez pour remplacer les fichiers du thème.
Astuce : Les paramètres de votre thème (couleurs, polices, options d'en-tête et de pied de page, CSS personnalisé) et le style de chaque section de votre page d'accueil sont stockés en base de données et ne seront pas perdus lors du remplacement des fichiers du thème.
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 Aurora en en activant un autre. Allez dans Panneau d'administration → Thèmes et cliquez sur Activer sur le thème que vous souhaitez utiliser à la place.
- Aurora reste installé : ses fichiers restent sous
extensions/themes/aurora/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 stockés en base de données, tout comme le style que vous avez donné à 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 redemande donc pas.
Réactivez-le quand vous le souhaitez : le front-end revient exactement tel que vous l'aviez laissé.
Suppression
Comment supprimer définitivement ce thème, et ce qui disparaît avec lui.
La suppression retire le thème pour de bon. Le thème actif ne peut pas être supprimé : la suppression se fait donc toujours en deux étapes :
- Activez un autre thème (voir Désinstallation).
- Cliquez sur Supprimer sur la carte Aurora et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/aurora/; - ses ressources publiées sous
public/themes/aurora/; - son cache CSS généré sous
public/cache/css/aurora/; - ses artefacts de compilation Vite : les fichiers hachés sous
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 : les couleurs, polices, options de mise en page et le CSS personnalisé que vous avez configurés sont donc perdus.
Cette action est irréversible. Exportez ou notez tout CSS personnalisé que vous souhaitez conserver avant de supprimer le thème : une réinstallation ultérieure repart des paramètres par défaut du thème.
Le style de chaque section de la page d'accueil est stocké sous le nom du thème et non dans la ligne du thème : il survit donc à la suppression. Réinstallez Aurora et le style de vos sections est toujours là, tandis que les paramètres propres au thème repartent de leurs valeurs par défaut.
La suppression est refusée, avant que quoi que ce soit ne soit supprimé, lorsque le thème est encore actif ou lorsque l'utilisateur du serveur web (PHP) ne peut pas supprimer extensions/themes/aurora/. Dans ce dernier cas, accordez à cet utilisateur les droits 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 compilation et la ligne de la table themes restent tous en place. Utilisez plutôt Supprimer dans le Panneau d'administration.
Questions fréquentes
Réponses aux questions courantes sur le thème Aurora.
Puis-je modifier les couleurs et les polices sans coder ?
Oui. Toutes les couleurs, les cinq familles de polices, la taille de police de base et les options de mise en page se configurent depuis Thèmes → Aurora → Paramètres dans le Panneau d'administration. Aucune modification de code ni recompilation des ressources n'est nécessaire : les changements prennent effet immédiatement.
Passer à Aurora modifie-t-il la configuration de ma page d'accueil ?
L'ordre de vos sections et leur état activé/désactivé sont partagés, mais les valeurs de style et de contenu des sections sont stockées par thème. Aurora part de ses propres valeurs par défaut éditoriales ; tout ce que vous enregistrez lorsqu'Aurora est actif est conservé séparément de ce que vous avez configuré avec le thème Default, de sorte que vous pouvez passer de l'un à l'autre sans rien perdre.
Le thème fonctionne-t-il sur mobile ?
Oui. Aurora est entièrement responsive : les filtres de recherche deviennent un panneau inférieur, les actions de contact de l'annonce s'ancrent en bas de l'écran, et la barre de navigation se replie dans un tiroir.
Comment changer la galerie photo des annonces ?
Dans les paramètres du thème, l'option Diaporama des photos permet de choisir l'un des cinq styles de galerie : Swiper horizontal (par défaut), Swiper vertical, bxSlider horizontal, bxSlider vertical ou le carrousel Bootstrap.
Aurora prend-il en charge les langues qui s'écrivent de droite à gauche ?
Oui. La mise en page s'inverse correctement pour les langues RTL comme l'arabe et l'hébreu, y compris les listes déroulantes et les effets de survol directionnels.
Pourquoi certains blocs sont-ils sombres même en mode clair ?
C'est la « dalle » : un élément de design volontaire. La pastille de prix, l'arrière-plan de la galerie et le bloc newsletter restent sombres dans les deux modes pour ancrer la page ; en mode sombre, ils deviennent plus profonds que le fond pour rester distincts.
Puis-je injecter du CSS ou du JavaScript personnalisé ?
Oui. Les paramètres du thème comprennent des champs CSS personnalisé et JS personnalisé dont le contenu est injecté sur chaque page front-end : idéal pour de petits ajustements ou des extraits tiers, sans toucher aux fichiers du thème.
Le thème prend-il en charge plusieurs langues ?
Oui. Tous les textes du thème passent par le système de traduction de LaraClassifier, les titres et contenus des sections de la page d'accueil sont modifiables par langue, et la structure des URL s'adapte à la langue active.
Puis-je passer à un autre thème plus tard ?
Oui. Vous pouvez changer de thème à tout moment depuis Panneau d'administration → Thèmes. Votre contenu, vos annonces et vos paramètres sont conservés : seule la présentation visuelle change, et chaque thème conserve ses propres paramètres enregistrés.