Thèmes — Personnalisation visuelle

NGZ Ads intègre un système de thèmes qui vous permet de changer entièrement l'apparence du site depuis le panneau d'administration, sans toucher au code. Vous pouvez également créer vos propres thèmes.

Vous cherchez à réorganiser le contenu de la page d'accueil (ordre des sections, annonces vedettes, catégories...) plutôt que son apparence ? Voir le chapitre Page d'accueil — Widgets.

Changer de thème

Depuis l'administration

1. Connectez-vous en tant qu'administrateur.
2. Rendez-vous dans Administration → Paramètres → onglet Thèmes.
3. Les thèmes disponibles s'affichent sous forme de cartes avec un aperçu des couleurs, le nom, la description et la version.
4. Cliquez sur Activer pour basculer vers un thème.
5. Le changement prend effet immédiatement à la prochaine page chargée.

Le thème actif est indiqué par un badge Actif et une bordure bleue sur sa carte.

Thèmes inclus

Structure d'un thème

Chaque thème est un dossier dans themes/ contenant au minimum un fichier de métadonnées et une feuille de style :

themes/
└── mon-theme/
    ├── theme.json              ← Obligatoire : métadonnées
    └── css/
        ├── style.css           ← Obligatoire : styles principaux
        └── custom-style.css    ← Optionnel  : surcharges personnalisées
    └── templates/              ← Optionnel  : templates HTML
        ├── layout/
        │   ├── header.php
        │   └── footer.php
        ├── partials/
        │   └── ad-card.php
        ├── home.php
        ├── ads.php
        ├── ad.php
        └── ...

Mécanisme de fallback

Si votre thème ne contient pas un template, NGZ Ads le cherche automatiquement dans le thème core :

themes/{votre-theme}/templates/home.php  → introuvable ?
themes/core/templates/home.php           → utilisé automatiquement

Cela signifie qu'un thème CSS uniquement (sans aucun template) fonctionne parfaitement : il hérite de toute la structure HTML du thème core.

Créer un thème CSS-only (recommandé pour débuter)

C'est l'approche la plus simple : vous ne changez que les couleurs et le style, sans modifier les templates HTML.

Étape 1 — Créer le dossier

Dans themes/, créez un nouveau dossier avec le nom de votre thème (minuscules, sans espaces) :

themes/mon-theme/

Étape 2 — Créer theme.json

{
    "name": "Mon Thème",
    "description": "Un thème personnalisé avec mes couleurs.",
    "version": "1.0.0",
    "author": "Votre Nom",
    "colors": {
        "primary": "#7c3aed",
        "secondary": "#4b5563",
        "accent": "#f59e0b"
    }
}

Étape 3 — Créer css/style.css

Copiez le fichier themes/core/css/style.css dans themes/mon-theme/css/style.css, puis modifiez les variables CSS au début du fichier :

:root {
    --ngz-primary:   #7c3aed;   /* Couleur principale (violet) */
    --ngz-secondary: #4b5563;   /* Couleur secondaire */
    --ngz-warning:   #f59e0b;   /* Couleur d'alerte */
    --ngz-bg-light:  #f5f3ff;   /* Fond clair */
    --ngz-border:    #ddd6fe;   /* Couleur des bordures */
    --ngz-shadow:    0 2px 12px rgba(0,0,0,.08);
    --ngz-radius:    .5rem;
    --ngz-transition: .2s ease;
}

Pour que Bootstrap 5 utilise aussi vos couleurs (boutons, focus rings, liens…), ajoutez les surcharges Bootstrap :

:root {
    /* ... vos variables NGZ ... */

    /* Surcharges Bootstrap 5 */
    --bs-primary:           #7c3aed;
    --bs-primary-rgb:       124,58,237;
    --bs-link-color:        #7c3aed;
    --bs-link-hover-color:  #6d28d9;
    --bs-body-bg:           #f5f3ff;
}

Étape 4 — css/custom-style.css (optionnel)

Ce fichier est chargé après style.css. Utilisez-le pour des ajustements fins sans modifier le fichier principal :

/* Exemple : navbar personnalisée */
.navbar {
    background-color: #1e1b4b !important;
}
.navbar .navbar-brand,
.navbar .nav-link {
    color: #fff !important;
}

Étape 5 — Activer le thème

Rendez-vous dans Administration → Paramètres → Thèmes et cliquez sur Activer sur votre nouveau thème.

Créer un thème avec templates personnalisés

Si vous souhaitez modifier la structure HTML (pas seulement le style), vous pouvez surcharger tout ou partie des templates.

Templates disponibles

Bonne pratique

Ne copiez que les templates que vous souhaitez modifier. Les autres seront automatiquement résolus depuis le thème core. Ainsi, votre thème reste léger et les mises à jour futures du core s'appliquent sans intervention.

themes/mon-theme/
├── theme.json
├── css/
│   ├── style.css
│   └── custom-style.css
└── templates/
    ├── layout/
    │   └── header.php     ← Navbar personnalisée
    └── partials/
        └── ad-card.php    ← Carte d'annonce redesignée
    (tous les autres templates viennent du core automatiquement)

Variables CSS de référence

Ces variables sont utilisées dans tous les composants du site. Les définir dans votre :root suffit à adapter l'ensemble de l'interface :

Constantes PHP disponibles dans les templates

Si vous créez des templates personnalisés, ces constantes sont disponibles partout :

Exemple d'utilisation dans un template :

<!-- Charger un fichier du thème actif -->
<link rel="stylesheet" href="<?= THEME_URL ?>/css/style.css?v=<?= ASSET_VERSION ?>">
<img src="<?= THEME_URL ?>/img/logo.png" alt="Logo">

Récapitulatif

Conseil : commencez par dupliquer le thème orange (le plus minimal) et modifiez uniquement ses variables CSS. C'est le moyen le plus rapide d'obtenir un résultat professionnel.