Un thème de site d'emploi épuré, à base de cartes, pour JobClass, avec une recherche hero affirmée, une typographie soignée et une prise en charge complète du mode sombre & du RTL.
Présentation du thème
Un second visage pour votre site d'emploi JobClass : moderne, aéré et à base de cartes, sans toucher à vos données ni à vos add-ons.
Points forts
- 11 sections de page d'accueil
- Ensemble complet de pages de site d'emploi
- Barre de recherche hero affirmée
- Prise en charge du mode sombre
- Prise en charge des langues RTL
- Entièrement responsive
- Prêt pour le multilingue
- En-tête à deux états au défilement
- Injection de CSS & JS personnalisés
- Google Fonts
Palette de couleurs
| Couleur | Valeur |
|---|---|
| Primaire | #4f46e5 |
| Secondaire | #64748b |
| Accent | #f59e0b |
| Texte | #0f172a |
| Fond | #f6f7fb |
La couleur primaire est volontairement un indigo plutôt que le bleu par défaut, afin que Modern s'affirme comme une identité à part entière à côté de l'apparence standard de JobClass. L'accent ambre met en valeur les offres d'emploi premium et mises en avant, et les salaires disposent de leur propre vert sémantique pour que les candidats repèrent la rémunération d'un coup d'œil.
Typographie
- Manrope : titres : graisse 700–800, interlettrage serré
- Inter : texte courant : base de 15px
À qui s'adresse ce thème ? Modern s'adresse aux sites JobClass qui veulent une apparence plus affirmée, digne d'un produit : un hero sombre avec une barre de recherche arrondie, des cartes blanches sur un fond blanc cassé discret et une hiérarchie typographique marquée. Il fournit des gabarits pour chaque page front-end de JobClass : recherche d'emploi, détail d'une offre, entreprises, candidats, assistant de publication et tout l'espace compte.
Prise en main
Activez le thème Modern et commencez à le personnaliser 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
Dans la barre latérale de l'administration, cliquez sur Thèmes (
/admin/themes). Vous verrez une carte pour chaque thème installé sousextensions/themes/. -
Activez « Modern »
Repérez la carte du thème Modern et cliquez sur Activer. L'activation publie les ressources statiques du thème dans
public/themes/modern/et vide automatiquement les caches CSS générés : le front-office change immédiatement. -
Personnalisez le thème
Ouvrez les Paramètres du thème (
/admin/themes/modern/settings) pour modifier les couleurs, les polices, la mise en page, l'en-tête, le pied de page et les options de mode d'affichage. Les modifications s'appliquent immédiatement. -
Organisez votre page d'accueil
Allez dans Sections de page (
/admin/page-sections) pour activer, désactiver, réordonner et styliser les sections de la page d'accueil : formulaire de recherche hero, catégories, offres d'emploi premium, entreprises, et plus encore.
Code d'achat (clé de licence)
Le thème Modern 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 le thème depuis le Panneau d'administration : aucun code requis.
Couleurs
Choisissez les couleurs primaire, secondaire, d'accent et du texte avec des sélecteurs de couleur, ou activez un skin prédéfini qui remplace la couleur primaire de bout en bout.
Polices
Choisissez les polices des titres et du texte dans la liste de Google Fonts fournie, et ajustez la taille de police de base (15px par défaut).
Mise en page
Mise en page large avec un conteneur de 1275px par défaut, pensé pour la grille de cartes. La largeur du conteneur est réglable depuis le formulaire des paramètres.
En-tête
Deux configurations d'en-tête indépendantes (l'une pour les pages en sections (page d'accueil), l'autre pour toutes les autres pages) chacune avec des états distincts par défaut et après défilement.
Pied de page
Pied de page sombre par défaut, avec des options pour l'image/la couleur de fond, les couleurs des titres, du texte et des liens, les bordures, les espacements personnalisés et le bouton de retour en haut.
Avancé
Injectez du CSS et du JavaScript personnalisés depuis le formulaire des paramètres, et changez l'image de fond des pages d'authentification.
Astuce : Toutes les options se trouvent dans Thèmes → Modern → Paramètres (/admin/themes/modern/settings). Vos valeurs sont stockées en base de données par-dessus les valeurs par défaut du thème et prennent effet immédiatement, sans recompilation ni déploiement. Une action Réinitialiser permet de ramener chaque option aux valeurs par défaut fournies avec le thème.
Gabarits de pages
Modern fournit son propre gabarit pour chaque page front-end de JobClass.
| Page | Rôle | Espace |
|---|---|---|
| Page d'accueil | Page d'accueil en sections, construite à partir du registre des sections de la page d'accueil (voir le chapitre suivant) | Public |
| Recherche d'emploi | Résultats de recherche avec cartes en liste et barre latérale de filtres : catégories, villes, date, fourchette de salaire, type d'offre et champs personnalisés | Public |
| Détail d'une offre | Offre d'emploi individuelle avec résumé, description, valeurs des champs personnalisés, actions (postuler, ajouter aux favoris, signaler), conseils de sécurité et barre latérale de l'entreprise | Public |
| Entreprises | Annuaire des entreprises avec recherche, plus une page de profil d'entreprise listant ses offres d'emploi ouvertes | Public |
| Candidats | Recherche de CV pour les employeurs, avec un écran d'abonnement requis lorsqu'une formule est nécessaire | Public |
| Profil utilisateur | Page de profil public d'un compte utilisateur | Public |
| Assistant de publication | Parcours de publication d'une offre d'emploi en plusieurs étapes : détails de l'offre → entreprise → formules → fin, avec les écrans de modification correspondants | Users |
| Espace compte | Vue d'ensemble avec statistiques, profil, sécurité (mot de passe & double authentification), préférences, mes offres d'emploi, candidatures, CV, entreprises, alertes emploi, messagerie, notifications, transactions, abonnement, comptes liés et clôture du compte | Users |
| Tarifs | Formules de promotion et formules d'abonnement présentées sous forme de tableaux de tarifs | Public |
| Paiement | Écrans de choix de la formule et du moyen de paiement utilisés par le parcours de paiement et les add-ons de paiement | Users |
| Pages CMS & contact | Pages statiques gérées depuis le Panneau d'administration, et page du formulaire de contact | Public |
| Mise en page d'authentification | Mise en page des écrans de connexion, d'inscription, de réinitialisation du mot de passe et de double authentification, avec sa propre feuille de style et une option d'image de fond | Auth |
| Pages utilitaires | Liste des pays, plan du site HTML et pages d'erreur | Public |
Remarque : Toute vue que le thème ne remplace pas se rabat automatiquement sur les gabarits du cœur de JobClass : les add-ons et les futures pages du cœur continuent ainsi de fonctionner, même si Modern ne leur fournit pas de design dédié.
Sections de la page d'accueil
La page d'accueil est composée de 11 sections configurables que vous pouvez activer, réordonner et styliser individuellement.
Recherche & offres d'emploi
- Formulaire de recherche hero
- Offres d'emploi premium
- Dernières offres d'emploi
Navigation
- Catégories
- Localités
- Entreprises
Engagement & contenu
- Statistiques
- Newsletter
- Zone de texte
Publicité
- Publicité en haut
- Publicité en bas
Rôle de chaque section
| Section | Description |
|---|---|
| Formulaire de recherche hero | Hero pleine largeur (560px de haut dans Modern) sur un fond encre sombre, avec une barre de recherche aux coins arrondis, une image de fond optionnelle avec un voile de lisibilité et un titre en texte blanc |
| Catégories | Catégories d'emploi selon l'une de quatre dispositions : liste à grandes icônes, liste normale, liste illustrée ou liste avec sous-catégories |
| Offres d'emploi premium | Offres d'emploi mises en avant / premium, en grille ou en carrousel |
| Dernières offres d'emploi | Offres d'emploi les plus récentes, en grille ou en carrousel |
| Entreprises | Grille d'entreprises mises en avant : une section propre à JobClass |
| Localités | Villes principales avec une carte SVG interactive du pays en option |
| Statistiques | Compteurs animés pour les offres d'emploi, les utilisateurs et les localités |
| Newsletter | Carte d'inscription par e-mail sur un bandeau teinté |
| Zone de texte | Bloc de contenu HTML libre pour du texte SEO ou des annonces |
| Publicité en haut / en bas | Emplacements publicitaires reliés aux paramètres Publicité |
Gérer les sections : Allez dans Sections de page (/admin/page-sections) dans le Panneau d'administration. Les sections forment un ensemble fixe : vous pouvez modifier le contenu et le style de chacune (par exemple /admin/page-sections/search_form), l'activer ou la désactiver, et la faire glisser pour la réordonner, mais pas créer ni supprimer de types de sections. Modern applique ses propres valeurs par défaut, plus sobres (un rythme vertical régulier de 40px entre les bandeaux) ; tout ce que vous enregistrez dans l'onglet Style de la section l'emporte toujours sur les valeurs par défaut du thème.
En-tête & pied de page
Une barre de navigation à deux états et un pied de page entièrement configurable.
Deux configurations d'en-tête indépendantes
Modern configure l'en-tête séparément pour les pages en sections (la page d'accueil, où la barre de navigation peut se superposer au hero) et les pages sans sections (toutes les autres pages, où la barre de navigation se place au-dessus du contenu). Les deux groupes de réglages ne se mélangent jamais : vous pouvez donc utiliser une barre de navigation transparente au-dessus du hero tout en conservant une barre opaque partout ailleurs.
Options de l'en-tête (par configuration)
| Option | Description |
|---|---|
| Style | Par défaut (opaque) ou Transparent (pages en sections uniquement, superposé au hero) |
| Logo | Largeur maximale (216px par défaut) et hauteur, avec verrouillage des proportions |
| État par défaut | Hauteur (75px), bascule de variante sombre, classe de fond ou couleur hexadécimale, bordure inférieure, couleurs des liens/du texte, ombre portée du texte optionnelle et animation d'entrée (glissement vers le bas, fondu ou glissement vers le haut) |
| État fixe | Appliqué après un défilement au-delà d'un décalage configurable (100px) : hauteur, couleurs et ombre propres, et transition en fondu enchaîné. Tout champ laissé vide reprend la valeur de l'état par défaut |
| Image de fond | Image optionnelle derrière la barre de navigation |
L'état fixe permet de réaliser en deux champs le schéma classique « transparent au-dessus du hero, opaque après défilement » : définissez uniquement les couleurs de fond et du texte de l'état fixe et laissez le reste vide.
Options du pied de page
| Option | Description |
|---|---|
| Variante sombre | Activée par défaut : le pied de page s'affiche sur une surface sombre |
| Fond | Couleur unie ou image |
| Couleurs | Couleurs des titres, du texte, des liens et des liens au survol, plus la couleur du séparateur intérieur |
| Bordures | Épaisseur et couleur de la bordure supérieure |
| Espacement | Bascule d'espacement élevé plus marges extérieures et intérieures personnalisées par côté (toute longueur CSS) |
| Largeur | Bascule pleine largeur |
| Retour en haut | Afficher ou masquer le bouton de retour en haut |
Remarque : Les options liées au contenu du pied de page (masquage des colonnes de liens, des logos de paiement, de la mention « powered by » et des liens vers les applications mobiles) sont des paramètres généraux de JobClass sous Paramètres → Pied de page, et non des paramètres du thème, ils sont conservés lors d'un changement de thème. Les paramètres du thème ci-dessus ne contrôlent que l'apparence du pied de page.
Mode sombre
Offrez à vos visiteurs un confort de lecture de jour comme de nuit.
Détection du système
Le thème peut suivre la préférence du système d'exploitation du visiteur et basculer automatiquement entre le mode clair et le mode sombre.
Bascule manuelle
Une bascule de mode dans l'en-tête permet aux visiteurs de passer du mode clair au mode sombre. Leur choix est mémorisé pendant 30 jours grâce à un cookie.
Préférence du compte
Les utilisateurs connectés peuvent fixer leur préférence sur Clair, Sombre ou Système depuis leur compte, et elle les suit sur tous leurs appareils.
Options de configuration (paramètres du thème) :
- Mode par défaut : indique si le site démarre en mode clair ou en mode sombre pour les nouveaux visiteurs
- Autoriser la bascule de mode : affiche ou masque le commutateur clair/sombre dans l'en-tête
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.
- Allez dans Panneau d'administration → Mise à jour du système (
/admin/update) pour appliquer les éventuelles migrations de base de données en attente.
Astuce : Les paramètres de votre thème (couleurs, polices, CSS personnalisé) sont stockés en base de données et ne seront pas perdus lorsque vous remplacerez les 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 Modern 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.
- Modern reste installé : ses fichiers restent sous
extensions/themes/modern/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 Modern et confirmez.
Cela supprime :
- le répertoire du thème
extensions/themes/modern/; - ses ressources publiées sous
public/themes/modern/; - son cache CSS généré sous
public/cache/css/modern/; - 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 Modern 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/modern/. 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 Modern.
Le thème Modern est-il gratuit ?
Modern est un thème payant pour JobClass, édité par BeDigit. Une fois installé sous extensions/themes/modern/, il apparaît sur la page Thèmes du Panneau d'administration, prêt à être activé.
Puis-je modifier les couleurs et les polices sans coder ?
Oui. Toutes les couleurs, les polices et les options de mise en page se configurent depuis Thèmes → Modern → Paramètres. Les sélecteurs de couleur pilotent toute la page via les variables CSS, aucune modification de code n'est nécessaire.
Le thème fonctionne-t-il sur mobile ?
Oui. Modern est entièrement responsive et s'affiche parfaitement sur les téléphones, tablettes, ordinateurs portables et écrans de bureau de toutes tailles.
Prend-il en charge les langues qui s'écrivent de droite à gauche ?
Oui. La feuille de style est livrée avec des surcharges RTL générées : l'arabe, l'hébreu et les autres langues RTL s'affichent donc correctement dès l'installation, y compris les widgets de recherche et de filtres.
Comment modifier ce qui apparaît sur la page d'accueil ?
Allez dans Sections de page (/admin/page-sections). Activez ou désactivez les sections, faites-les glisser pour les réordonner, et ouvrez n'importe quelle section pour modifier son contenu et son style.
Mes offres d'emploi, entreprises et paramètres survivront-ils à un changement de thème ?
Oui. Les thèmes ne modifient que la présentation. Vos offres d'emploi, entreprises, CV, utilisateurs et paramètres généraux ne sont pas modifiés. Les paramètres du thème sont stockés par thème : les personnalisations du thème Default sont donc toujours là si vous y revenez.
Puis-je injecter du CSS ou du JavaScript personnalisé ?
Oui. Le formulaire des paramètres du thème comporte des champs CSS personnalisé et JS personnalisé. Le code saisi est injecté sur chaque page, ce qui est idéal pour de petits ajustements ou des scripts de suivi tiers.
Le thème prend-il en charge plusieurs langues ?
Oui. Tous les textes du thème utilisent le système de traduction de JobClass et s'adaptent à la langue active. Gérez les langues sous Langues dans le Panneau d'administration.
Puis-je passer à un autre thème plus tard ?
Oui. Vous pouvez changer de thème à tout moment depuis Thèmes dans le Panneau d'administration. Seule la présentation visuelle change.