Navigation |
Aller au contenu de l'article |
Aller au menu |
Texte seul |
Liste complète des articles |
PLan du site |
Retour à l'accueil |
Aide |
Contact
Accueil > Aides pour les nuls > Navigation, couleurs, habillage
Navigation, couleurs, habillage
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 :
_
Colonnes de navigation
Par d ?faut, SPIP donne la colonne de navigation ? droite.
et dans habillage.css on trouve ceci :
Pour mettre la colonne de navigation ? gauche, il faut modifier habillage.css de la fa ?on suivante :
(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 :
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(« »)
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 , en ?crivant
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 :
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 :
J’ai mis ceci ? la place :
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 o ? j’ai ?crit ceci :
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 :
et j’ai mis ceci :
c’est ? dire que j’ai encadr ? le #TITRE par et ?a marche !
Couleur de fond des pages
Dans habillage.css
On trouve ceci :
/* Des couleurs specifiques selon les types de menus */
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 :
Choisir la couleur que l’on veut ? la place de #F0EEDF
Couleur du Post Scriptum
Dans habillage.css, chercher ceci :
et modifier la couleur indiqu ?e ici : background-color :#cc9900 ;
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 :
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(« »)
| 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 :
| 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 :
| 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 :
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 :
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 :
Dans habillage.css chercher ceci :
Il suffit de modifier la couleur ici :
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 :
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 :
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 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 :
en n’oubliant pas de remplacer yellow (mis par erreur) par
blue
Rappel : un fichier .php commence par et finit par
hr.spip : trait de s ?paration
Dans le fichier style_spip.css, chercher ceci :
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,
i.spip : italiques
Dans le fichier style_spip.css chercher :
Moi j’ai mis :
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 :
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 :
.
Cela donne ceci :
lien habituel
– Mais on peut vouloir que, ponctuellement, le lien soit violet,
on indique donc ... style=« color : #FF00FF ; » comme ceci :
.
– Cela donne ceci :
lien en violet
– On peut faire la m ?me chose avec un titre, h2 par exemple :
donne ceci :
Titre habituel
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 »
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.
Article effacé suite piratage ?. Désolant ! Cherchez donc ici : https://journal-la-mee.fr/recup_articles_pdf/ ou écrivez-nous ! journal-la-mee(at)orange.fr
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. |
