Modifier le 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 « habillage.css »
6- Renvoyer, par FTP, dans le dossier « dist »
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.php?id_article=560
_
Un proc ?d ? simple : le couteau suisse
Colonnes de navigation
Par d ?faut, SPIP donne la colonne de navigation ? droite.
et dans habillage.css on trouve ceci :
#conteneur { clear: both; float: left; width: 67%; overflow: hidden; }
#contenu { padding-top: 0.30em; }
#navigation { float: right; width: 30%; margin-top: 1em; overflow: hidden; }
#extra { float: right; clear: right; width: 30%; margin-top: 1em; overflow: hidden; }Pour mettre la colonne de navigation ? gauche, il faut modifier habillage.css de la fa ?on suivante :
#conteneur { clear: both; float:right; width: 67%; overflow: hidden; }
#contenu { padding-top: 0.30em; }
#navigation { float: left; width: 30%; margin-top: 1em; overflow: hidden; }
#extra { float: right; clear: right; width: 30%; margin-top: 1em; overflow: hidden; }(il y a seulement deux mots, right et left, qui ont ?t ? ?chang ?s)
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/IMG/jpg/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 r?cents--> 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: #F8F8e8;
}
En modifiant : background-color : #F8F8e8
On donne une couleur au fond de la page centrale. Cela change la couleur de toutes les pages.
Si la ligne background-color : #F8F8e8 ; n’y est pas, on peut la rajouter.
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/IMG/jpg/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.php"><:plan_site:></a>
</li>
<li class="menu-item">
<a href="resume.php" 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.php »
De m ?me on peut modifier la ligne : <a href="ecrire/"><:espace_prive:></a>
Quand c’est fait, terminer ainsi :
– enregistrer sous sommaire.txt
– envoyer par FTP dans dist
– supprimer le sommaire.html existant [ou, mieux, le nommer autrement pour pouvoir le retrouver. Moi je le nomme : sommaire.html#]
– renommer sommaire.txt 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 titre des rubriques, dans la navigation
il s’agit de modifier la couleur du lien dans .rubriques ul li
Il suffit de faire ceci dans le fichier habillage.css :
.rubriques ul li a {color: #FFFFFF; text-decoration: none;}
comme cela ?a donne une couleur blanche. Mais attention que ?a ne modifie pas la couleur des liens dans une autre partie du site ....
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 .php commence par [bleu]<?php[/bleu] et finit par [bleu]?>[/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 dnne un trait de largeur 2 px (padding:2 px)
et de couleur : vert fonc ? (#007700)
Mais je voulais qu’il soit indiqu ? « Retourner en haut de la page », j’ai donc utilis ? mes_fonctions.php ou, mieux, le couteau suisse.
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
Modifications ponctuelles
– On peut vouloir garder la couleur habituelle des liens. On ?crit par exemple ceci : <a href="http://www.journal-la-mee.fr"> lien habituel</a>.
Cela donne ceci :
lien habituel
– Mais on peut vouloir que, ponctuellement, le lien soit violet,
on indique donc ... style=« color : #FF00FF ; » comme ceci :<a href="http://www.journal-la-mee.fr" style="color: #FF00FF;"> lien en violet</a>.
– Cela donne ceci :
lien en violet
– On peut faire la m ?me chose avec un titre, h2 par exemple :Titre habituel </h2> donne ceci :
Titre habituel
<h2 style="color: #FF00FF;">Titre en violet</h2> donne ceci :
Titre en violet
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 »
Le squelette a fait des petits en couleur
Changer de couleur selon les jours ou les semaines
Notes :
(1) SPIP cherche les fichiers article.html, rubrique.html, etc. dans l’ordre
suivant : 1 - ? la racine ...... 2 - dans /squelettes ......_ 3 - dans /dist
(2) Pour un bloc-notes, t ?l ?charger le logiciel gratuit PSPad.
