Même quand on est très très néophyte en la matière, on peut personnaliser l’apparence du site web, simplement changeant quelques paramètres dans le fichier default.css. Et, comme on ne peut pas le supprimer, mais qu’on peut le réinitialiser, on ne risque pas de tout casser.

Qui peut le faire ?

→ Une personne qui a les droits en administration sur le site. Il est très fortement conseillé de ne laisser cette possibilité qu’à un très petit nombre de membres .

Le fichier default.css

Le principe d’un site html est de séparer la forme (la mise en écran) du fond (le contenu). Ce sont les fichiers css qui définissent l’allure du site.

Dans Paheko, le fichier que l’on va modifier pour personnaliser le site est le fichier default css qui contient tout ce qu’il est possible de modifier facilement par des néophytes.

Les éléments de base de tout fichier css :

• l’élément (ou sélecteur) concerné, par exemple le corps de la page : body
• la propriété, par exemple la couleur du texte : color
• la valeur, par exemple, pour la couleur noire : #000

La syntaxe est très simple :

• après le sélecteur on met une accolade ouvrante {
• on saisit ensuite les propriétés suivies des deux-points : (pas d’espace avant les :)
• suivies des valeurs. S’il y en a plus d’une, elles sont séparées d’un point-virgule ;
• on ferme par une accolade fermante }.

Dans la feuille de style de Paheko, la configuration du corps de la page est définie comme suit :

body {
font-size: 100.01%;
color: #000;
font-family: "Trebuchet MS", Helvetica, Sans-serif;
background: #fff;
}

Cela définit la taille du texte, font-size (on n’y touchera pas), sa couleur (ici noir), le type police (le navigateur affichera le texte selon la police qui existe dans le terminal) et l’arrière-plan de la page (ici blanc).

Les éléments que l’on va modifier

Si vous n’avez aucune connaissance, ou des connaissances minimales en css, les éléments que l’on va modifier pour personnaliser l’allure du site sont :

• les couleurs, propriété color
• éventuellement la police, font-family, on ne touchera pas aux tailles données en pourcentage,
• les couleurs des arrières-plans, background,
• les bordures, border.

On ne s’occupera pas du reste dans le cadre de cette page.

Donc on agira sur les sélecteurs : body, header.nav (barre de navigation) et ses variantes, header.main et footer.main.

Les couleurs sont données en code hexadécimal : un # suivi de six caractères. Si on n’a pas déjà une charte graphique, on peut utiliser n’importe quel outil utilisant les couleurs : un logiciel de dessin, bureautique comme LibreOffice, un utilitaire de sélection couleur (KcolorChooser sour Linux par exemple) ou encore faire une recherche sur internet ou sur Wikipédia.

Méthodologie et recommandations

Quand on est néophyte, il vaut mieux procéder par petites touches pour voir le rendu.

Idéalement, on a sa liste couleurs avec leurs codes hexadécimaux par-devers soi. Cela permet d’être plus efficace et de voir aussi, parce que cela suppose qu’on a testé un peu avant ce qui va ensemble. Noter aussi ce que vous avez fait peut être utile.

Attention cependant à avoir des contrastes suffisants, les gris trop pâles par exemple rendent les sites illisibles à bien des yeux. Et éviter certaines combinaisons de couleurs, surtout si elles ont la même tonalité, pour les personnes daltoniennes ou les autres troubles de perception des couleurs, à savoir :

• rouge et vert,
• vert et marron,
• vert et bleu,
• bleu et violet,
• vert et gris,
• vert (plutôt foncé) et noir.

Au cours du travail pour voir ce que vous avez fait, n’hésitez pas à ouvrir le site dans un autre onglet, après avoir enregistré les modifications, voire un autre navigateur[¹].

Modifications

Aller dans le module « Site web », onglet « Configuration ».

Aller sur le fichier default.css et cliquer sur « Éditer ».

Un exemple de modifications.

Le body, on va par exemple changer la couleur générale du texte, de noir, #000 à vert épinard : #175732.

Les polices par Cantarell, "DejaVu Sans", Verdana, Sans;.

On va donner un blanc lunaire, #FAFEFE à l’arrière-plan, background.

Ce qui donne :

body {
    font-size: 100.01%;
    color: #175732;
    font-family: Cantarell, "DejaVu Sans", Verdana, Sans;
    background:  #FAFEFE;
}

On peut modifier les bordures, border. Changer le gris pâle de l’arrière-plan de la navigation en haut de la page, header.nav et la couleur du nom de l’association ,header.main h1et header.main h1 a. Éventuellement adopter la même séquence de police que pour le body.

Voilà ce que cela peut donner et c’est à la portée de toute personne qui découvre les CSS. Mais évidemment, on peut faire mieux avec un choix de couleurs plus judicieux.

Le logo est celui de l’association, configuré dans le menu Configuration.

Aller plus loin

• Les tutoriels du site Alsacréations pour approfondir ses connaissances en matière de css.
• Comment utiliser des palettes adaptées aux daltoniens pour rendre vos graphiques accessibles.

1

Il peut y avoir un cache qui fait qu’on ne voit pas forcément les modifications tout de suite.