Personnalisation CSS des Fiches

Apprenez à styliser et modifier en profondeur le design de votre fiche de serveur sur ServerWorld à l'aide de notre documentation de classes et d'exemples CSS.

Fonctionnement Général

L'éditeur CSS personnalisé est accessible directement depuis l'édition de votre fiche de serveur dans l'étape Identité Visuelle (VIP Gold ou Diamond requis). Les règles CSS saisies dans cet éditeur sont injectées de manière sécurisée en haut de votre fiche publique.

Règle importante d'application (!important) Les feuilles de styles par défaut de ServerWorld utilisent des sélecteurs très précis. Pour écraser correctement nos règles de styles de base (comme les couleurs, les polices ou les dimensions), nous vous conseillons d'ajouter !important à la fin de vos propriétés CSS.

Classes CSS disponibles

Voici la structure des classes et balises HTML de base que vous pouvez cibler pour modifier chaque élément :

Sélecteur CSS suggéré	Élément de la page	Possibilités de modification
body	Arrière-plan global de la page	Changer la couleur de fond, ajouter une image fixe ou un dégradé dynamique.
.banner-container	Boîte de la bannière ou de la vidéo de présentation	Changer la hauteur, ajouter des ombres portées ou un effet de flou.
.logo-container	Cadre contenant le logo du serveur	Ajouter des bordures lumineuses (glow), arrondir les angles, ajouter un effet de rotation au survol.
h1, h2, h3	Titres principaux et en-têtes	Modifier la police de caractères (Google Fonts), la couleur, ou ajouter un effet d'ombrage textuel.
.glass-effect	Boîtes et sections descriptives	Modifier la transparence du fond, changer les couleurs des bordures transparentes, ou augmenter le flou d'arrière-plan.
.btn-glow-purple, .btn-glow-gold	Boutons d'action (Voter, Devenir VIP)	Personnaliser les dégradés de couleurs des boutons, modifier l'intensité de la lueur au survol.

Modèles de code CSS prégénérés

Copiez-collez ces styles directement dans votre éditeur CSS ServerWorld et modifiez-les selon vos besoins.

🎨 Image de fond fixe et conteneurs ultra-sombres

body {
    background-image: url('https://mon-site.com/images/wallpaper.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
}

.glass-effect {
    background: rgba(10, 5, 20, 0.9) !important;
    border-color: rgba(111, 41, 153, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

⭐ Lueur dorée (Gold Glow) sur le logo et le titre

.logo-container {
    border-color: #ffbd59 !important;
    box-shadow: 0 0 20px rgba(255, 189, 89, 0.6) !important;
    border-radius: 24px !important;
}

h1 {
    color: #ffbd59 !important;
    text-shadow: 0 0 10px rgba(255, 189, 89, 0.4) !important;
}

🔥 Dégradé de texte animé et boutons stylisés

@keyframes pulse-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

h1 {
    background: linear-gradient(270deg, #ffbd59, #ff59b3, #8a33bd) !important;
    background-size: 600% 600% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: pulse-gradient 8s ease infinite !important;
}

.btn-glow-purple {
    background: linear-gradient(135deg, #8a33bd, #ff59b3) !important;
    box-shadow: 0 5px 15px rgba(255, 89, 179, 0.4) !important;
}

Sommaire CSS

Personnalisation CSS des Fiches

Fonctionnement Général

Classes CSS disponibles

Modèles de code CSS prégénérés

Confirmation

Protection des Données & Cookies