Débutant4 min de lecture

    Personnaliser le header et les couleurs de votre site

    Votre site événement, c'est la vitrine de votre course. En cinq minutes, vous y mettez votre logo, vos couleurs et votre identité, sans toucher une ligne de code. Dossario vous propose même une palette automatique extraite de votre logo pour gagner du temps.

    Avant de commencer

    • Vous avez un logo de votre événement (idéalement format PNG transparent ou SVG, taille minimum 400 × 400 px).
    • Vous savez approximativement quelles couleurs représentent votre course (ou vous laissez Dossario les extraire de votre logo).

    Étapes

    1. Aller sur Page & site puis Site événement

      Dans la sidebar de votre événement, cliquez sur Page & site. Vous arrivez sur la page « Présence en ligne » avec quatre onglets : Page Dossario, Site événement, Visibilité, Galeries photos. Sélectionnez l'onglet Site événement. Vous accédez à l'éditeur complet de votre mini-site.

      Onglet Site événement avec ses paramètres
      Onglet Site événement avec ses paramètres

    2. Ouvrir le panneau Paramètres

      Dans l'éditeur de site, le panneau « Paramètres » est ouvert par défaut (bouton ember en haut du panneau de gauche). C'est ici que se trouvent les paramètres globaux qui s'appliquent à toutes les pages : logo, couleurs, titre, sous-domaine, SEO.

    3. Uploader votre logo

      Dans la section Logo, cliquez sur Choisir un fichier (ou glissez-déposez l'image). Formats acceptés : PNG, JPG, SVG, WebP. Le logo apparaît immédiatement dans l'aperçu en direct sur le côté droit.

      • Format recommandé : PNG avec fond transparent, ou SVG.
      • Taille minimum : 400 × 400 px (Dossario adapte automatiquement à toutes les tailles d'écran).
      • Poids : moins de 2 Mo pour un chargement rapide.
      Si votre logo est sombre et que votre fond est sombre aussi, il deviendra illisible en dark mode. Préparez deux versions (claire et sombre) ou choisissez un logo qui fonctionne sur les deux fonds. Dossario ne génère pas automatiquement la version inversée.

    4. Choisir vos couleurs

      Dans la section Apparence, vous avez deux champs : Couleur principale (boutons, liens, accents) et Couleur secondaire (gradients, arrière-plans). Cliquez sur chaque pavé coloré pour ouvrir un sélecteur, ou saisissez un code hexadécimal directement dans le champ à côté.

      Section Apparence avec logo et couleurs
      Section Apparence avec logo et couleurs
      Si vous hésitez, partez de votre logo : prélevez la couleur dominante avec un outil de pipette (Aperçu sur Mac, Couleur Pickr en ligne) et collez son code hex dans le champ. Pour la couleur secondaire, choisissez une teinte contrastée mais cohérente (souvent une variation plus sombre ou plus claire de la couleur principale).

    5. Régler le titre, sous-titre et description

      Plus bas dans Settings, renseignez le titre du site (souvent le nom de votre course en majuscules), un sous-titre court (« 10 km et 21 km, 6 juin 2026 ») et une description plus longue qui apparaît en SEO et en partage social.

    6. Vérifier l'aperçu en direct

      L'aperçu sur la droite se met à jour à chaque changement (sans rechargement). Cliquez sur les différentes pages dans le panneau Pages pour vérifier que vos couleurs et votre logo s'affichent bien partout. Mode mobile et desktop disponibles via les icônes en haut de l'aperçu.

      Vérifiez le contraste entre vos couleurs et le texte. Une couleur primaire jaune fluo donne des boutons illisibles. Si vous hésitez, utilisez un outil de vérification de contraste WCAG (ratio minimum 4,5 pour le texte normal). Dossario applique des règles de fallback pour le texte sur les boutons mais ne peut pas tout sauver.

    7. Sauvegarder et publier

      Vos modifications sont automatiquement sauvegardées en draft. Pour les rendre publiques, retournez sur Page & site et activez le toggle Site Internet publié si ce n'est pas déjà fait. Votre site mis à jour est immédiatement visible sur votre URL (votre-course.dossar.io ou votre domaine custom).

    Erreurs fréquentes

    Mon logo apparaît coupé ou trop petit.

    C'est généralement un souci de format. Préférez une image carrée (proportions 1:1) ou rectangulaire avec marges intégrées. Si votre logo a beaucoup de marge interne, le crop automatique le rendra trop petit dans le header. Dans ce cas, recadrez l'image avant l'upload pour qu'elle remplisse mieux son conteneur.

    Mes couleurs sont sauvegardées mais le site public ne change pas.

    Vérifiez que vous avez bien le toggle Site Internet publié activé. Si vous êtes en draft, vos changements sont visibles dans l'aperçu mais pas sur l'URL publique. Vérifiez aussi que vous regardez la bonne URL : le sous-domaine généré peut différer de votre slug d'événement (par exemple votre-course-2026.dossar.io).

    Comment changer la police d'écriture ?

    Dossario applique sa propre typographie (DM Sans pour le corps, Instrument Serif pour les titres) qui est cohérente avec le Design System. Cette typographie n'est pas modifiable côté orga pour préserver la lisibilité et la cohérence cross-device. Si votre identité visuelle nécessite vraiment une police custom, contactez-nous, nous pouvons étudier au cas par cas pour les comptes Pro.

    Questions fréquentes

    Puis-je connecter mon propre nom de domaine ?

    Oui. Dans Settings, renseignez votre domaine (par exemple votre-course.fr) et suivez les instructions DNS affichées (un CNAME à pointer vers Dossario). Une fois la propagation DNS effectuée (1 à 24 h), votre site est accessible sur votre domaine et le sous-domaine dossar.io continue de fonctionner en parallèle.

    Mes couleurs s'appliquent-elles aussi à la Page Dossario en marketplace ?

    Non. La Page Dossario marketplace conserve l'identité Dossario (orange ember, neutre noir/blanc) pour cohérence à travers tous les événements. Vos couleurs personnalisées ne s'appliquent qu'à votre Site Internet (sous-domaine ou domaine custom). C'est volontaire : la marketplace reste un espace neutre où le coureur reconnaît Dossario.

    Combien de fois puis-je changer mon logo ou mes couleurs ?

    Aucune limite. Vous pouvez modifier votre identité visuelle autant que vous voulez, la propagation est instantanée. Utile par exemple pour aligner votre site avec votre communication d'année en année (un sponsor majeur change, vous adaptez votre palette).

    À faire ensuite

    Retour à l'AcadémieCe guide vous a aidé ? Dites-le-nous.