Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Navigation, couleurs, habillage

Navigation, couleurs, habillage

FTP : installation et usage

 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 :

  1. 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>&nbsp;&nbsp;<span style="background-color:#FFF1C9"><a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></span></h2>

Le fait d’écrire &nbsp;&nbsp; permet d’éloigner un peu le titre du bord.

  1. 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 :

Nom du site

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 du 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 »

Voir ici

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.


NOTES:

Note :
(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.