Thème - Fichier CSS

Vous avez la possibilité d'ajouter votre propre feuille de style CSS (fichier *.css) pour votre site internet. Pour cela allez dans le menu Site Internet >> Thème, zone "Fichier CSS" et ajoutez votre fichier *.css.

🆕 NOUVEAU : Le Générateur de CSS (Sans code)

Si vous ne maîtrisez pas le langage informatique, nous mettons désormais à votre disposition un assistant visuel pour créer votre style simplement.

Cliquez sur le bouton orange "Générateur de css" pour ouvrir l'outil.

Les étapes de personnalisation :

• Typographie : Choisissez une police pour tout le site, mettez vos titres en gras et définissez leur couleur unique.
• Navigation : Personnalisez la barre de menu (couleur de fond, taille du texte, ombres).
• Pied de page : Changez la couleur du bas de page, la taille des titres et gérez l'affichage des logos partenaires.
• Contenu : Modifiez l'apparence des articles (fond, espacements) et la couleur des boutons d'action.
• Bandeaux : Attribuez des couleurs distinctes aux entêtes selon le type de publication (Actualité, Événement, Album...).

Une fois vos choix terminés dans l'onglet "Résultat", cliquez sur le lien généré pour télécharger votre fichier style.css

et passez à l'étape d'ajout ci-dessus.

Méthode Manuelle (Pour utilisateurs avancés)

Pour créer votre fichier CSS manuellement, vous pouvez créer un fichier texte (*.txt) puis modifier l'extension par *.css. Editez ensuite le fichier avec votre éditeur de texte préféré et copiez/collez le contenu de l'exemple ci-dessous. Enfin, enregistrez votre fichier.

Cet exemple de contenu permet de définir :

• la taille de base de la police de caractères du site internet.
• les couleurs de bandeau des différents types d'article (actualité, événement, album-photo).
• la police de caractères du site internet.
• la couleur de base de la police de caractères du site internet.
• la couleur de l'arrière-plan et la hauteur de logo.
• la couleur des différents types d'article (actualité, événement) publiées.
• mettre tous les titres en gras et la couleur de tous les titres.
• la couleur de la barre de navigation.
• la couleur de la partie basse d'un site internet (footer) et la taille de la police du titre.
• la couleur des boutons des articles publiés.
• la taille du contenu de la barre de navigation.
• un espace entre la barre de navigation et le contenu.
• une légère ombre à l'intérieur des éléments de la barre de navigation.
• ajouter le surlignement des liens dans la page adhésion.

Exemple de contenu de fichier CSS :

/** Taille générale de la police de caractères */
body {
font-size: 14px;
}

/** vignette article */
.article-posts article .post-heading.article-type-1 {
/** bandeau actualité */
background: rgba(0,255,255,0.2);
}

.article-posts article .post-heading.article-type-5 {
/** bandeau événement */
background: rgba(255,0,255,0.2);
}

.article-posts article .post-heading.article-type-11 {
/** bandeau album-photo */
background: rgba(255,255,0,0.2);
}

/** page article */
.article-post article .article-header.article-type-1 {
/** bandeau actualité */
background: rgba(0,255,255,0.2);
}

.article-post article .article-header.article-type-5 {
/** bandeau événement */
background: rgba(255,0,255,0.2);
}

.article-post article .article-header.article-type-11 {
/** bandeau album-photo */
background: rgba(255,255,0,0.2);
}

/** Police générale de caractères du site internet.*/
body {
font-family: Arial;
}

/** définir une couleur d'arrière-plan et une hauteur pour le logo*/
#logoBar {
background: rgba(255,255,0,0.2);
min-height: 100px;
}

/** la couleur des différents types d'article (actualité, événement) publiées*/
.article-posts > article {
background:grey;
}

/** les titre en gras*/
h1, h2, h3, h4, h5 {
font-weight: bold;
}

/** la couleur des titres*/
h1, h2, h3, h4, h5 {
color: rgba(255,255,0,0.2);
}

/** la couleur de la barre de navigation*/
.navbar-default {
background: rgba(255,255,0,0.2);
}

/** la couleur de footer*/
footer.footer-club {
background: rgba(255,0,255,0.2);
}

/** la taille de la police du titre de la partie basse du site internet.*/
#footer h4 {
font-size: 20px;
}

/** la couleur des boutons des articles publiées*/
.article-posts > article button {
background: rgba(255,255,0,0.2);
}

/** la taille du contenu de la barre de navigation*/
.navbar-default {
font-size: 20px;
}

/** espace entre la barre de navigation et le contenu*/
#content .container-layout {
padding: 23px;
}

/** une légère ombre à l'intérieur des éléments de la barre de navigation*/
#club-menu > ul > li {
box-shadow: 0px 0px 6px 3px rgba(255,255,0,0.2) inset;
}

/** Lien dans les blocs - surlignement*/

.panel-body a {
text-decoration: underline;
}

Astuce : Comment trouver ma couleur au format rgba (couleur + transparence) :

Vous pouvez utiliser les sites hexcolortool.com, materialui.co ou encore hashtagcolor.com