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.

Comment créer votre fichier CSS ?

Pour créer votre fichier CSS, 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 copier/coller le contenu de l'exemple ci-dessous. Enfin, enregistrez votre fichier.

Exemple de contenu de fichier CSS :

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.
• la couleur de tous les titres.
• la couleur de la barre de navigation.
• la couleur de la partie basse d'un site internet (footer).
• la taille de la police du titre de la partie basse du site internet.
• la couleur des boutons des articles publiées.
• 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