Feuilles de style de Yaou Info’

Suite à de nombreuses demandes, une petite explication sur les feuilles de styles fournies avec le squelette s’imposait

Quelques liens

Vous débutez avec les CSS ? Quelques liens utiles sur http://www.spip-contrib.net/spikini....

Les fichiers

Pour une première approche des css qui ne soit pas trop indigeste - avec des feuilles de styles de plusieurs kilomètres comme on le voit souvent - , les feuilles de styles sont découpées en plusieurs fichiers.

 screen.css : ce fichier est appelé par l’entête de chaque page (cf le fichier inclusions/inc_structure_meta.html) Je le détaille quelques lignes plus loin.
 structure.css : ce fichier concerne le positionnement général des principaux éléments du site : le header - ou entête pour les puristes de la langue française-, le menu et le conteneur. Le conteneur englobe tout sauf le menu et le header. A noter qu’il n’est pas nécessaire de modifier cette page par défaut.
 polices.css : ce fichier est dédié aux fontes utilisées.
 espace.css : ce fichier concerne l’espacement -comme son nom l’indique- Il permet aussi un ajustement de l’affichage entre les différents navigateurs (On ne citera ici que Firefox et Internet Explorer : un affichage correct sur ces 2 navigateurs implique la même chose sur d’autres plus exotiques)
 deco.css : ce fichier est le plus important (en longueur et en travail de votre part)
 impression.css : ce fichiers est dédié à l’impression des pages (affichage minimal, pas d’images) Il est fortement inspiré du fichier spip_impression.css proposé dans le squelette par défaut de SPIP. (Utilisable sans modifications)

Avant de mettre les mains dans le camboui

Quelques modifications temporaires

Bien qu’aucune confirmation ne m’a jamais été apportée, j’ai remarqué que la répercution des modifications dans les feuilles de styles plus s’avérait longue lorsque je conserve cet appel des feuilles de style : la feuille de style sreen.css faisant appel aux autres feuilles de style. Il peut donc être intéressant de modifier la ligne :

 < link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/screen.css" media="projection, screen, tv" title="Normal" />

par

 < link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/structure.css" media="projection, screen, tv" title="Normal" />
 < link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/polices.css" media="projection, screen, tv" title="Normal" />
 < link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/espace.css" media="projection, screen, tv" title="Normal" />
 < link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/deco.css" media="projection, screen, tv" title="Normal" />

dans le fichier inclusions/inc_structure_meta.html tant que vous éditez vos feuilles de style.

Astuces pour l’affichage entre IE et Firefox

Vous verez parfois apparaitre des lignes du genre : margin-top : 80px ; margin-top /**/ : 75px ; Comme vous devez le savoir, l’interprétation des feuilles de style entre IE et Firefox est parfois légèrement différente. Cette ligne est un hack indiquant à IE de prendre comme margin-top 80px et à Firefox 75px.

Le fichier structure.css

Ce fichier concerne le positionnement général des principaux éléments du site : le header, le menu et le conteneur. Il n’est pas nécessaire de modifier cette page. Je n’y reviens donc pas plus que celà.

Le fichier polices.css

Ce fichier est dédié aux polices et fontes utilisées. Par défaut, ce fichier n’existe pas dans l’archive ; c’est donc à vous de le créer pour redéfinir entre autres la couleur du texte, des liens, des balises h1, h2, ..., h5.

Juste un exemple : supposons que nous sommes dans la classe .sommaire, et que nous souhaitons redéfinir la balise h2 - couleur verte de taille 16px - , nous écrirons alors :
 .sommaire h2 { color : green ; font-size : 16px ; }

Le fichier espace.css

Comme son nom l’indique, ce fichier est dédié aux espacements Vous ne devriez écrire ici que des attributs du genre margin ou padding.

Le fichier deco.css

Comme vous pouvez le deviner, le gros de votre travail commence ici. Il s’agit de redéfinir les balises qui sont indiquées dans les différents fichiers du squelette comme par exemple :
 #haut pour l’entête (ajout d’une image de background, ...)
 #haut #logo pour l’entête (ajout d’un logo ...)
 #menu2 pour le menu (pour l’historique, une première version du menu s’appelait #menu1)
 #menu2 .boite pour les différentes boîtes du menu
 #explainSite .kezako pour l’image en sommaire présentant le site (sur Yaou Info des étudiants devant leur PC)
 #position pour la hiérachie du site
 .....