mars 2002, par Spipèdes (copID)

Le style, c'est la police de caractère, les couleurs, les tailles des élements affichés à l'écran.

Il vous faut repérer quel élément vous voulez changer dans SPIP, puis il vous suffit de modifier des parametres d'apparence dans les instructions concernant cet élément.

spip_style.css fourni par défaut

Pas de panique, c'est plus simple que çà en a l'air.

Lancez WordPad ou un autre éditeur de texte, faites ouvrir, choisissez le type : tous*.* et ouvrez le fichier spip_style.css qui se trouve au même endroit-racine que index, sommaire, etc. Vous y voyez les instructions ci-dessous (toutes les accolades que vous voyez dans votre fichier sont représentées ici par des |) :

... avec SPIP 1.2

a |
text-decoration : none ;
|

a :hover |
color :#FF9900 ;
text-decoration : underline ;
|

h3.spip |
font-family : Verdana,Arial,Helvetica,sans-serif ;
font-weight : bold ;
font-size : 120% ;
text-align : center ;
|

table.spip |
|

table.spip tr.row_first |
background-color : #FCF4D0 ;
|

table.spip tr.row_odd |
background-color : #C0C0C0 ;
|

table.spip tr.row_even |
background-color : #F0F0F0 ;
|

... avec SPIP 1.3 b7

a |
text-decoration : none ;
|

a :hover |
color :#FF9900 ;
text-decoration : underline ;
|

a.spip_url | |
a.spip_in | | 
a.spip_out | | 

.spip_code | |

p.spip_note | |

h3.spip |
font-family : Verdana,Arial,Helvetica,sans-serif ;
font-weight : bold ;
font-size : 120% ;
text-align : center ;
|

table.spip |
|

table.spip tr.row_first |
background-color : #FCF4D0 ;
|

table.spip tr.row_odd |
background-color : #C0C0C0 ;
|

table.spip tr.row_even |
background-color : #F0F0F0 ;
|

table.spip td |
padding : 1px ;
text-align : left ;
vertical-align : center ;
|

hr.spip | |

b.spip | |
i.spip | |

.forml | width : 100% ; background-color : #FFDDAA ;|

.spip_encadrer |
width : 100% ;
background-color : #FFFFFF ;
padding : 5px ;
border : 1px #666666 solid ;
|

.spip_cadre -
width : 100% ;
background-color : #FFFFFF ;
padding : 5px ;
|

.spip_bouton | background-color : #FFCC00 ;|

.formrecherche | width : 100% ; background-color : #FFDDAA ;|

.reponse_formulaire |
font-family : Verdana,Arial,Helvetica,sans-serif ;
font-weight : bold ;
font-size : 110% ;
color : red ;
|

Vous remarquerez des blocs d'instructions entre accolades.

Chaque bloc est précédé d'une autre instruction qui définit un élément dans SPIP (.reponse_formulaire par exemple, voir tableau ci-dessous).

Les instructions entre accolades (entre | ici) définissent les styles à appliquer à cet élément (couleurs, tailles etc.).

Chacune des instructions entre accolades comprend un parametre d'apparence (en gras ci-dessus), comme un numéro de couleur, qui peut être remplacé facilement par une valeur différente pour changer du style dans cet élément.

.spip_bouton | background-color : #FFCC00 ;|

La ligne ci-dessus veut dire : Appliquer la couleur de fond #FFCC00 aux boutons de SPIP.

Changement : PRINCIPE

Dans les lignes du fichier spip_style.css changez le parametre d'apparence dans une instruction de style pour chaque élément que vous voulez modifier.

Vous pouvez aussi ajouter des instructions de style lorsque rien n'est écrit entre les accolades. Dans ce cas allez bien strictement à la ligne et respectez les sauts de ligne, les blancs et les  ; exactement comme pour les autres éléments.

Gardez une copie du spip_style.css original (par exemple renommez en FTP celui qui est sur votre site en spip_styleORIG.css), que vous remettrez si vous vous êtes planté(e).

Après vos changements, sauvez votre nouveau fichier spip_style.css, chargez-le sur votre site et faites Recalculer ou Vider le cache.

ELEMENTS SPIP

Le bloc...	concerne L'ELEMENT...
a :hover	Survol des liens
a.spip_url	Liens de texte affichant l'url (I>url)
a.spip_in	Liens de texte internes (Inom->articlexxI)
a.spip_out	Liens de texte externes (Inom->http...I)
.	.
forml	Formulaires
spip_encadrer	Séparations de parties de formulaires
spip_bouton	Boutons de formulaires
.	.
formrecherche	Formulaire "Rechercher"
.	.
h3.spip	Intertitre dans les textes (3 accolades SPIP)
.	.
p.spip_note	Notes de bas de page (double crochet)
p.spip	Paragraphes SPIP (saut de ligne)
.	.
table.spip	Tableaux créés avec raccourcis SPIP
row_first	Première rangée
tr.row_odd	Lignes paires
tr.row_even	Lignes impaires
td	Cases du tableau

PARAMETRES D'APPARENCE

Codes couleurs :

De #000000 (noir) à #FFFFFF (blanc) en passant par tous les mélanges de Rouge (deux premiers) de Vert (deux du milieu) et de Bleu (deux de droite) à des intensités croissantes de 00 (mini) à FF (maxi) soit la progression : 00, 01, ... , 09, 0A, 0B, ... , OF, 10, 11, ... , 1F, 20, ... , 9F, A0 , ... , FF

Parfois en anglais : red (rouge) pour l'élément .reponse_formulaire) est la couleur des réponses aux formulaires d'inscription auto et de pétition)

underline : souligné
bold : gras
italic : italique

left : à gauche
right : à droite
center : au centre

1px : 1 pixel de longueur sur l'écran (beaucoup d'écrans sont de largeur x hauteur de 800 x 600 pixels)

Instructions de styles

color : couleur
background-color : couleur de fond (tableau, lien, etc.)
padding : écartement
width : Largeur (en pourcentage ici)
border : bordure (de cadre)
text-align : Alignement du texte
vertical-align : Alignement vertical
font-size : taille de police (de caractères)
font-weight : style/poids de police
font-family : famille de police

Vous trouverez une liste complète d'instructions de style chez laltruiste ou à jussieu, ou à l'INRIA ou sur commentcamarche.

EXEMPLE : COULEUR

Dans color :#FF9900 ; vous pouvez remplacer #FF9900 qui est la couleur orange bien connu des liens SPIP par #000099 qui est un bleu foncé. Vous verrez ainsi vos liens bleus et soulignés (underline) au survol de la souris.

Voyez ICI pour choisir vos couleurs (et vous aurez en prime la couleur corrigée qui permet une bonne visibilité fond/texte). Petit rappel : #000000 c'est noir, et #FFFFFF c'est blanc.

EXEMPLE : AJOUTER UNE INSTRUCTION DE STYLE POUR LES LIENS PERSOS EXTERNES

Pour qu'un fond clair apparaisse sous vos liens externes dans les textes ajoutez entre les accolades comme suit :

a.spip_out |
background-color : #FCF4D0 ;
|

RAPPEL : Remplacez les | que vous voyez ici par des accolades d'ouverture (au début) ou de fermeture (à la fin).

PLUS GENERAL

Pour aller plus loin vous pouvez cop/coller des instructions et des paramètres sur w3.org.

Cochez un style et HTML Element Sampler puis Show me ! pour voir ce qu'il donne.

Puis cochez le même style et Show me only the stylesheet I selected above puis Show me ! pour cop/coller les instructions correspondantes (instructions générales ou instructions de style avec paramètres).

Vous les ajouterez ou vous les substituerez dans votre fichier spip_style.css.

Le meilleur site pour comprendre et choisir les paramètres : chez laltruiste

Pour verifier la syntaxe d'une feuille de style : htmlhelp

Un générateur automatique de feuille de style : internetservices  

Couleurs WebGéné en 3 minutes

Voici une solution très simple pour mettre votre site sous spip aux couleurs de WebGenerAction, ou autres en suivant la piste.

cliquez ici pour ouvrir spip_style.doc, choisissez si on vous le demande ouvrir avec WordPad ou autre éditeur de texte, puis Enregistrez sous... sur votre bureau ou dans votre dossier spip.

La tabulation est prévue pour WordPad, mais vous pouvez utiliser TeachText ou BlocNote ou autre.

Si ça bloque ou si la tabulation est mauvaise, essayez avec le fichier spip_style.txt (ce fichier ne tabulera pas correctement à l'ouverture, mais la tabulation devrait être correcte après enregistrement).

Vous pouvez aussi ouvrir le fichier équivalent sans les commentaires, actuellement en service sur ce site : spip_style.css

Pour ouvrir dans une nouvelle fenêtre :
spip_style.css *
spip_style.txt *
spip_style.doc *

Renommez-le en spip_style.css avant de le chargez en FTP à la place du fichier d'origine.

Enfin Videz le cache (menu Configurer) pour voir immédiatement toutes les transformations, c'est fini !

... un peu plus ?

Pour modifier les couleurs, les tailles ou autres, tout est expliqué dans le fichier (.doc ou .txt).

Ce fichier hyper simple fonctionne très bien, y compris pour colorer les ascenseurs ou mettre une image ou une couleur en fond. Les paramètres s'appliquent sur toutes les pages du sites. Pour différencier un type de page du style général (sommaire.html par exemple), repérez et modifiez en haut de cette page l'instruction :

Pour le sommaire par exemple, remplacez dans l'instruction de la page sommaire.html : "spip_style.css" par "stylesommaire.css", puis ajoutez un deuxième fichier de style portant le même nom : stylesommaire.css contenant le style voulu pour le sommaire.

Si vous supprimez cette instruction d'une page, ou si cette instruction ne trouve pas son fichier, le style n'est plus actif dans cette page.

Bonnes couleurs !

NOTE JUILLET 2003 : Attention les dernières versions de SPIP utilisent plusieurs fichiers de style où sont réparties différentes fonctions : spip_style.css typographie.css habillage.css impression.css

NOTA : Nous ne parlerons pas des codes suivants...
hr.spip : Ligne obtenu par quatre tirets
b.spip : Gras (bold)
i.spip : Italique (italic)
spip_code : Balise "code" de SPIP pour laisser visible des lignes codées en HTML dans les textes
spip_cadre : Balise "cadre" de SPIP pour laisser visibles et encadrées des lignes codées en HTML dans les textes

Un fichier spip_style.css est fourni depuis la version SPIP 1.2, il est malheureusement très incomplet.

fil: > Look SPIP : spip_style.css

18 janvier 2002, par Walk   [Début forum] Pour générer facilement votre propre spip_style.css

En ce moment un fichier spip_style.css est installé (provisoirement) sur ce site. Il s'ouvrira en cliquant ICI et il est en débat et en amélioration sur le site : http://www.multimania.com/spippourtous/ Il vous suffit de l'installer à la place du fichier standard pour modifier certaines apparences de SPIP. Vous pouvez facilement changer les couleurs et autres.

• FAIRE SAVOIR SVP
  28 janvier 2002, par Walk   [Début forum]

  ---

  Si vous utilisez les outils proposés par WebGenerAction, il est bon de le signaler par un simple message afin de faire savoir aux informaticiens le bon usage qui est fait de leurs créations pour tous.

  Merci.