Jul6art Jul6art · Docs

Jul6art SaaS Admin

Thèmes CMS

Le module CMS est livré avec huit thèmes prêts à l'emploi, chacun conçu pour une typologie de marque distincte. Ils partagent tous les mêmes fonctionnalités (menus multi-niveaux, sidebar optionnelle, pagination, commentaires, partage, shortcodes — activables par l'admin de l'organisation) et ne se différencient que par leur identité visuelle.

Changement de thème en un clic

Depuis /organization/cms/theme, l'admin organisation choisit son thème dans la liste déroulante. Au premier changement, les trois couleurs de marque (principale / secondaire / accent) sont automatiquement réinitialisées aux valeurs d'usine du thème sélectionné. L'admin peut ensuite surcharger n'importe laquelle des trois depuis la même page — les polices Google Fonts, les variantes de header/footer, les toggles partage/commentaires et le CSS personnalisé restent sous son contrôle.

Les palettes par défaut sont définies dans src/Modules/Cms/Theme/Palette/{Theme}Palette.php — un fichier PHP par thème, modifiable par l'équipe tech si la marque plateforme doit rebrander.


Les huit thèmes

1. Starter — sobre, polyvalent

Le thème neutre de démarrage. Fond clair, sans-serif Inter, cards blanches avec hairlines. Pour les organisations qui ne veulent rien de marqué — le contenu prend toute l'attention.

  • Principale #6366F1 (indigo) — liens, CTA
  • Secondaire #8B5CF6 (violet) — accents doux
  • Accent #F59E0B (amber) — badges

2. Corporate — professionnel, assuré

Gradient hero bleu, density card pour le blog, sticky header avec blur. Le thème des sociétés de services, cabinets conseil, SaaS B2B.

  • Principale #2563EB (blue) — hero gradient, boutons
  • Secondaire #1E40AF (deep blue) — second plan du gradient
  • Accent #0EA5E9 (sky) — tags, highlights

3. Magazine — éditorial, dense

Feature post avec image + overlay gradient, grid éditoriale, drop-cap sur l'article, byline soigné. Pour les rédactions, publications sectorielles, blogs d'entreprise ambitieux.

  • Principale #B91C1C (crimson) — kickers, liens
  • Secondaire #1E293B (slate) — encres, footer
  • Accent #F59E0B (amber) — drop-cap, highlights

4. Minimal — carnet, épuré

Listes façon notebook, colonnes étroites, hairlines, zéro border-radius, flèches à droite des pages. Pour les blogs personnels type « rédacteur solo », les marques minimalistes.

  • Principale #0F172A (near-black) — textes, boutons
  • Secondaire #475569 (slate-grey) — textes muets
  • Accent #F43F5E (rose) — badges, points actifs

5. Journal — carnet d'essais, serif chaleureux

Papier crème, EB Garamond en serif principal, fleurons §/, drop-cap, mesures courtes (680 px). Idéal pour les essais longs, newsletters littéraires, blogs personnels de fond.

  • Principale #8A5A3C (terracotta) — accents éditoriaux
  • Secondaire #B89076 (sable) — encre douce
  • Accent #C9A27E (beige) — décorations

6. Studio — portfolio créatif, typographie massive

Titres clamp(3rem, 9vw, 8rem), grille 12 colonnes asymétrique, kickers numérotés verticaux, footer noir profond. Pour les agences de design, photographes, studios d'architecture.

  • Principale #FF4D1F (orange pop) — CTA, hover
  • Secondaire #0A0A0A (near-black) — masse typographique
  • Accent #F4F4F2 (paper) — zones de respiration

7. Soft — lifestyle, pastel chaleureux

Palette pêche-terracotta, rondeurs 16-32 px, serif Fraunces, ombres douces, pills pour les CTA. Pour les marques bien-être, boutique-hôtels, lifestyle brands.

  • Principale #C96E4E (terracotta) — CTA, liens
  • Secondaire #EEB2A4 (rose poudré) — gradients
  • Accent #B6C4A2 (sage) — secondes images

8. Terminal — tech, dark mode first

Fond #0c0e0d, monospace partout, prompt $ _ qui clignote, ASCII box drawings, tags #hashtag. Pour les blogs dev, side-projects, newsletters tech, portfolios d'ingénieurs.

  • Principale #00FF87 (néon vert) — prompts, accents
  • Secondaire #FF4FFF (magenta) — signalétique secondaire
  • Accent #00D9FF (cyan) — hover et liens actifs

Ce qui reste configurable après sélection

  • Les 3 couleurs (même si auto-réinitialisées au switch, l'admin peut ensuite les personnaliser).
  • Les 2 polices Google Fonts (heading + body).
  • Le logo et le favicon.
  • La variante de header (centered / left / transparent).
  • La variante de footer (simple / columns / minimal).
  • L'affichage ou non de la sidebar blog.
  • L'affichage ou non des partages / commentaires.
  • Les liens réseaux sociaux (Twitter / LinkedIn / Facebook / Instagram).
  • Un bloc CSS personnalisé (validé côté serveur — aucune faille XSS possible).

Extensions côté tech

Pour rajouter un neuvième thème :

  1. Créer templates/public/themes/{nom}/*.html.twig (7 fichiers) + public/css/themes/{nom}/style.css.
  2. Ajouter le case à App\Modules\Cms\Enum\BaseTheme.
  3. Créer App\Modules\Cms\Theme\Palette\{Nom}Palette.php et l'enregistrer dans le ThemePaletteRegistry.
  4. Ajouter la clé de traduction cms.theme.base.{nom} dans translations/cms.fr.yaml.

Les huit thèmes actuels couvrent la majorité des typologies B2B / B2C — de la PME sage (Starter, Corporate) à la marque éditoriale (Magazine, Journal), en passant par le studio créatif (Studio, Soft) ou l'indie tech (Terminal, Minimal).