Avertissement : tout ceci a bien fonctionné tant que j’étais en php3.
Maintenant que j’ai changé de version de spip, et que je suis en php, il faut adapter !
Il s’agit en général de toucher au fichier « habillage.css ». Ce fichier se trouve habituellement dans le dossier squelettes ou dans dist (1)
1- Aller dans le « site distant », dans le dossier « dist »
2- Cliquer sur le fichier habillage.css
3- Expédier ce fichier, par FTP, sur le « site local »
4- Ouvrir ce fichier, le modifier (voir plus loin).
(pour faire des essais, prendre une couleur qui tranche vraiment, pour pouvoir, ensuite, voir la modification. On peut prendre par exemple la couleur ORANGE : FF6600)
5- Enregister sous « habillage01.css »
6- Renvoyer, par FTP, dans le dossier « squelettes » et renommer en habillage.css
7- Attendre de voir la modification (ça peut être long, même si on vide le cache de SPIP et du navigateur)
Les couleurs dans SPIP :
http://www.lorand.org/article.php3?id_article=560
[Un procédé simple : le couteau suisse]
Choisir les couleurs
Un petit logiciel « couleurs » très sympa chez Tontonolive : http://www.tontonolive.com
Couleur de fond
Sans que je sache très bien pourquoi, on peut toucher à
Disposition à l’ecran : colonnes, encarts, cartouches
dans le fichier « habillage.css » :
– dans # principal, si on ajoute.... background : blue
on peut voir ce qui change dans la page d’accueil (ce sont les articles principaux)
– dans #plan si on ajoute.... background : blue
on peut voir ce qui change dans le plan du site
– dans # navigation, si on ajoute.... background : blue
on peut voir ce qui change dans la barre de navigation (celle où il y a les rubriques et sous-rubriques).
On peut aussi mettre une texture :
– au lieu de mettre .... background : blue
– on peut mettre :
background : url(« http://www.unsite.com/Wb0184345.jpg »)
si l’on peut trouver l’adresse de cette texture
Mais j’ai aussi expérimenté ceci :
Dans habillage.css , à la ligne .contenu , en ajoutant : background-color : #660033, on peut donner une couleur rouge au fond de la partie principale
Dans typographie.css , à la ligne <body> (ligne 7 ou 8)
, en écrivant <body background-color: #660033:
on obtient une couleur rouge sur TOUT le site
Changer la couleur des textes
Si le fond est rouge foncé, les textes en noir ne sont plus lisibles. On peut donner une autre couleur au fond des textes, en allant voir dans habillage.css, vers les lignes 7 ou 8 :
.texte {
padding: 5px;
background-color: #FFF1c9;
}
Il suffit de changer la couleur de background
Changer la couleur des titres
Si le fond est rouge foncé, les titres en noir ne sont plus lisibles. Deux façons de faire :
- Garder la couleur d’origine et mettre un fond clair à ces titres. Pour cela je suis allée sur la page sommaire.html dans la partie
J’y ai vu ceci :
<h2 class="titre-extrait"><a href="#URL_ARTICLE">#TITRE</a></h2>
J’ai mis ceci à la place :
<h2 class="titre-extrait"><span style="background-color:#FFF1C9"><a href="#URL_ARTICLE">#TITRE</a></span></h2>
Cela donne alors ceci : un titre écrit en noir sur fond de couleur
TITRE
J’ai fait la même modification plus loin dans la partie <!-- Articles recents-->
où j’ai écrit ceci :
<h2> <span style="background-color:#FFF1C9"><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></span></h2>
Le fait d’écrire
permet d’éloigner un peu le titre du bord.
- ou alors, on peut changer la couleur du titre. Pour moi j’ai mis du blanc de la façon suivante :
Je suis allée voir ici :
<!-- Articles recents -->
<BOUCLE_articles_recents(ARTICLES) {par date} {inverse} {6,30}>
<h2 class="titre-extrait"><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]><#TITRE</a></h2>
et j’ai mis ceci :
<!-- Articles recents -->
<BOUCLE_articles_recents(ARTICLES) {par date} {inverse} {6,30}>
<h2 class="titre-extrait"><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]><span style= "color: #FFF">#TITRE</span></a></h2>
c’est à dire que j’ai encadré le #TITRE par <span style ="color: #FFF> ... </span>
et ça marche !
Couleur de fond des pages
Dans habillage.css
On trouve ceci :
/* Des couleurs specifiques selon les types de menus */
/*
* Styles pour le contenu (c-a-d. la colonne principale)
*/
.contenu {
margin: 15px;
background-color: #couleur;
}
En modifiant : background-color : #couleur ;
On donne une couleur au fond de la page centrale. Cela change la couleur de toutes les pages.
Si la ligne background-color : #couleur ; n’y est pas, on peut la rajouter. Et remplacer le mot couleur par le code que l’on veut !
Couleur de fond d’une page précise
Il s’agit en fait de fabriquer un tableau avec une seule cellule.
Au début de l’article, avant d’écrire le texte, indiquer ceci :
<table WIDTH="100%" CELLPADDING=8 BGCOLOR="#F0EEDF"> <td>
Puis à la fin du texte, écrire ceci : </td></table>
Choisir la couleur que l’on veut à la place de #F0EEDF
Couleur du Post Scriptum
Dans habillage.css, chercher ceci :
/*
* Mise en page des textes (bordures...)
*/
etc
etc
.ps {
padding-top: 0.6em;
margin-top: 0.6em;
border-top: 1px dashed #404040;
background-color:#cc9900;}
et modifier la couleur indiquée ici : background-color :#cc9900 ;
Couleur du menu général - Navigation
Le menu général est celui où il y a :
Plan du site En résumé Espace privé |
Dans habillage.css, chercher ceci :
/* Des couleurs specifiques selon les types de menus */
.general { background-color: #FFFFFF; text-align:center; }
_ .general .menu-titre { background-color: #F2FFF2; }
En modifiant background-color : #FFFFFF ;
on modifie la couleur de la partie 1 (celle où il y a « nom du site »
En modifiant background-color : #F2FFF2 ;
on modifie la couleur de la partie 2 (celle où il y a : plan du site, En résumé, Espace privé)
Texture |
Au lieu de mettre une couleur précise, on peut aussi mettre un dessin ou une texture à partir du moment où l’on a l’adresse . Cela donne ceci par exemple :
background : url(« http://www.journal-la-mee.fr/Wb018434.jpg »)
Titre blanc |
Sur la texture précédente, on peut souhaiter mettre les caractères en couleur. Il faut aller ici :
Espace privé/configuration
Alors, dans la ligne « nom du site » on peut indiquer la couleur, par exemple ceci donne uneéÚcriture en blanc :
<span style="color:#FFFFFF;">
Nom du Site </span>
Logo |
On peut aussi souhaiter mettre un petit dessin ou un logo.
Il faut aller ici :
Espace privé/configuration
Alors, dans la ligne « nom du site » on peut ajouter la référence du dessin n°1341. Cela donne ceci :
<span style="color:#FFFFFF">Nom du Site </span> <emb1341|right>
Modifier |
On peut modifier ce menu de navigation :
– ouvrir le fichier sommaire.html (qui se trouve en principe dans dist)
– faire affichage/ code source de la page
– sélectionner tout ce code source et le copier dans une page de « bloc notes » (2)
– chercher alors les lignes suivantes :
<!-- Menu de navigation general -->
<div class="menu">
<ul class="general">
<li class="menu-titre">
[<a href="(#URL_SITE_SPIP)" title="<:accueil_site:>"><b>#NOM_SITE_SPIP</b></a>]
</li>
<li class="menu-item">
<a href="plan.php3"><:plan_site:></a>
</li>
<li class="menu-item">
<a href="resume.php3" title="<:articles_populaires:>"><:en_resume:></a>
</li>
<li class="menu-item">
<a href="ecrire/"><:espace_prive:></a>
</li>
</ul>
</div>
On peut alors remplacer <:plan_site :> par Machin truc-chouette à condition de bien indiquer la page où le trouver, en modifiant l’adresse indiquée dans a href=« plan.php3 »
De même on peut modifier la ligne : <a href="ecrire/"><:espace_prive:></a>
Quand c’est fait, terminer ainsi :
– enregistrer sous sommaire01.html
– envoyer par FTP dans squelettes
– supprimer le sommaire.html existant [ou, mieux, le nommer autrement pour pouvoir le retrouver. Moi je le nomme : sommaire.html#]
– renommer sommaire01.html en sommaire.html
Couleur des rubriques
Il s’agit du tableau où il y a :
<table width="200" cellspacing="1" cellpadding="1" border="1" align="">
<tbody>
<tr>
<td>rubrique 1</td>
</tr>
<tr>
<td><center>sous rubrique1-1 :
Sous-rubrique 1-2
Sous-rubrique1-3</center></td>
</tr>
<tr>
<td>rubrique 2</td>
</tr><tr>
<td><center>sous rubrique2-1 :
Sous-rubrique 2-2
</center></td>
</tr>
</tbody>
</table>
Dans habillage.css chercher ceci :
/* Des couleurs specifiques selon les types de menus */
.general { background-color: #FFFFFF; text-align:center; }
.general .menu-titre { background-color: #FFFFFF; }
.rubriques { background-color: #FFFFFF; text-align:center; }
.rubriques .menu-titre { background-color: #FF6600; }
Il suffit de modifier la couleur ici :
.rubriques .menu-titre background-color : #FF6600 ;
Couleur du bouton « rechercher »
A la racine du site, chercher le fichier spip_style.css
Le télécharger sur le site local et chercher la ligne :
input.formrecherche
On peut alors modifier la taille du texte (en écrivant font-size : 120% ; par exemple).
On peut modifier la place du texte (en ajoutant : text-align : center ; par exemple)
On peut modifier la couleur de fond (background) ou la couleur du texte (color)
Quand la modification est faite : enregistrer le fichier et renvoyer spip_style.css à la racine du site distant..... et puis tâtonner si le résultat n’est pas bon
!
On trouve aussi, dans le fichier habillage.css :
/* * Formulaires */
.formrecherche {
background-color: #f2f2f2;
color: #505030;
margin: 0px;
padding: 2px;
border: solid 1px #909090;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight: normal;
on peut y changer la couleur de fond (background), la couleur d’écriture (color), la bordure d’encadrement (border) et tout ce qu’on veut.
Couleurs du « plan du site »
Dans le fichier habillage.css, aller voir
1) Habillage du plan du site
_ .plan-secteur h1
et modifier la couleur du background.
– Cela modifie la couleur de fond des titres des rubriques.
2) aller voir Eclaircissement progressif des rubriques en fonction de la profondeur : cela modifie la couleur de fond des sous-rubriques
– a) aller voir ul.plan-rubrique et modifier la couleur du background-color
– b) même chose avec ul ul.plan-rubrique
– c) et avec ul ul ul.plan-rubrique
Enregistrer sous habillage.css
et envoyer sur le site distant dans le dossier dist
Raccourci couleur
On peut utiliser http://www.spip-contrib.net/Des-couleurs-dans-le-texte]... [/bleu]
pour mettre une partie de phrase en bleu.
Par exemple : on peut mettre une partie de phrase en bleu, et une autre partie en rouge
Voir les explications ici : http://www.spip-contrib.net/Des-couleurs-dans-le-texte
en n’oubliant pas de remplacer yellow (mis par erreur) par
blue
Rappel : un fichier .php3 commence par
<?php[/bleu] et finit par [bleu]?>
CaractÞres gras et bleus voir page 5000
hr.spip : trait de séparation
Dans le fichier style_spip.css, chercher ceci :
hr.spip {
padding: 2px;
background-color: #007700
}
Moi j’ai mis ceci :
hr.spip
padding : 2px ;
background-color : #007700
Cela me donne un trait de largeur 2 px (padding:2 px)
et de couleur : vert foncé (#007700)
i.spip : italiques
Dans le fichier style_spip.css chercher :
i.spip {}
Moi j’ai mis :
i.spip {
color: #800000;
}
Cela fait que les lignes en italique sont de couleur rouge foncé (#800000)
Couleur des liens
On distingue deux sortes de liens :
– les liens externes qui renvoient à un autre site
– les liens internes qui renvoient à une autre page du même site.
La couleur de ces liens se trouve dans le fichier typographie.css , dans la partie « Styles généraux », vers les 11e ou 12e lignes :
– a.spip_out pour les liens externes
– a.spip_in pour les liens internes
Voir ici :
_ a.spip_out { text-decoration: none; color: #a02020; }
_ a.spip_in, a.spip_url { text-decoration: none; color: #2020a0; }
Si on met text-decoration : none, les liens ne seront pas soulignés
Si on met text-decoration : underline, les liens seront soulignés
En changeant color, on peut changer la couleur des liens
Couleur du mot recherché
SPIP surligne le mot recherchÚ dans les articles.
La couleur du surlignage se trouve dans les fichiers habillage.css et spip_style.css, en général à la ligne
.spip_surligne
On y trouve par défaut le background-color ; #FFFF66
C’est cette couleur qu’on peut modifierà sa guise
Bordures
Il faut jouer sur « border »