Nous allons maintenant travailler sur la (les) feuille(s) de styles ou CSS (Cascading Style Sheet). La fréquentation assidue de ressources comme le site Alsacreations (déjà cité en exemple dans de précédents tutoriels) est impérative. De même, la possession d’un aide-mémoire CSS comme CSS précis & concis des éditions O’Reilly ou Aide-mémoire CSS2 des éditions OEM EYROLLES (il en existe plein d’autres chez d’autres éditeurs) est fortement recommandé afin d’accélérer notre travail et s’assurer que les codes utilisés existent bel et bien.

Nous allons configurer d’abord l’affichage de chacune des parties de notre squelette puis nous nous attaquerons aux couleurs générales du site pour finaliser notre page.

L’en-tête de la page

Notre en-tête présente le logo du site et sa description (cette dernière avait d’ailleurs été oubliée dans les précédents tutoriels : ajouter la balise [(#REM) Description du site ][<p>(#DESCRIPTIF_SITE_SPIP)</p>] dans le fichier /squelettes/inc-bioentete.html).

Le titre du site n’apparaît à l’affichage que pour permettre une navigation aisée sans les CSS (cas des navigateurs textuels pour les mal-voyants...).

Nous allons donc supprimer de l’affichage ce titre inutile (inutile car repris dans l’image du site) :

/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }

Cette portion de notre page /squelettes/css/bio_habillage.css aura pour effet de supprimer de l’affichage tout bloc possédant la class="invisible".

Il nous reste une bodure inesthétique autour de l’image du site. Pour cela, jettons un oeil sur le code de la page (source de la page sous Firefox). Nous nottons que l’image en question possède la classe .spip_logos.

.spip_logos {
border: none;
}

Pour faire un peu "première page d’hebdomadaire", nous rajoutons un code barre en décoration de fond :

div#header {
height: 190px;
background-image: url(../images/biotechno_barcode.png) ;
background-position: right;
background-repeat: no-repeat;
}

Enfin, la petite phrase de présentation du site est un peu trop collée a bord gauche de la page :

div#header p {
padding-left: 1em;
}

Notre en-tête est maintenant finalisée au niveau de la forme. Nous reviendrons pour les couleurs plus tard.

Les deux captures d’écran ci-dessus montre le résultat obtenu suivant deux résolutions d’écran différentes. Le design passe bien, même avec des résolutions plutôt faiblardes (800x600)

L’affichage du menu des rubriques

Nous souhaitons un affichage des rubriques un peu plus joli qu’une simple liste à puces rondes. Pour cela, nous allons utiliser les icônes du projet Tango.

/* Menu des rubriques */

div.rubriques li {
	margin-left: 30px;
}

div.rubriques li, div.rubriques li a{
	list-style-position: outside;
	text-decoration:none;
	font-family: verdana,helvetica,sans-serif;
	font-size : 1em;
	vertical-align:middle;
}

div.page_principale li, div.page_principale li a {
	}

div.rubriques a:hover {
}

div.page_principale li a:hover {
	}

div.rubriques li {
	list-style-image: url(../images/repertoire.png);
}

div.rubriques li.on {
	list-style-image: url(../images/repertoire_ouvert.png);
}

li#mots_cles {
	list-style-image: url(../images/mots_cles.png);
}

li#docs_joints {
	list-style-image: url(../images/fichier_joint.png);
}

li#lien_forum {
	list-style-image: url(../images/forum_mini.png);
}

div.rubriques li.le_cercle {
	list-style-image: url(../images/le_cercle.png);
}

div.rubriques li.le_cercle_on {
	list-style-image: url(../images/le_cercle_ouvert.png);
}

div.rubriques a.on {
	}	

Le formulaire de recherche

Nous allons assortir notre champ de recherche avec le bouton que nous avons choisi :

/* Formulaire de recherche */
	
form.formrecherche div input.formrechercheimage
		{
		vertical-align: text-bottom;
		}	
		
form.formrecherche { 
	padding: 6px;
}

input.formrecherche {
vertical-align: text-bottom;
   top : 6px;
	padding-left: 6px;
	width: 150px;
	border: 0px solid;
	font-weight: bold;
	font-family: verdana,helvetica,sans-serif;
	font-size : 1em;
}

/* couleurs formulaire de recherche */
input.formrecherche {
	border-color: blue;
	color: #ececec;
	background-color: #0255c2;
}

Le formulaire d’inscription

On va le détacher un peu des bords et lui redonner un peu plus de présence :

/* Formulaire Inscription */
.formulaire_inscription {
	padding:10px;
}

.formulaire_inscription legend {
	font-weight: bold;
}

.formulaire_inscription p {
	margin: 10px 10px 10px 10px;
	text-align:justify;
}	

.formulaire_inscription label {
	font-family:sans-serif;
	text-align: left;
}

.formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription {
	border:none;
	font-family:sans-serif;
	font-weight:bold;
}

.formulaire_inscription .spip_bouton input {
	border:none;
	font-family:sans-serif;
	font-weight:bold;
}

.formulaire_inscription .spip_bouton input:hover,.formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription  {

}	

Le Fil d’Ariane

Nous prévoyons déjà que certains liens seront cliquables sur ce Fil d’Ariane :

/* Fil d'Ariane */

div#haut, div#haut>a {
	font: 0.71em sans-serif;
	text-decoration:none;
}	

div#haut>a:hover {
	text-decoration:underline;
	}

Le pied de page

On peaufine un peu le pied de page en centrant les icône-liens et en retirant la bordure des images :

/* Pied de page */
div#pied {
	padding-top: 3px;
	clear:both;
	text-align:center;
}

On complète le CSS concernant l’absence de bordure aux images. On en profite pour supprimer les bordures aux boutons du plugin Boutons d’admin supplémentaires qui est certainement LE plugin à installer sous SPIP pour travailler rapidement :

/* En-tete du site et boutons admin supplementaires (plugin) et pied de page */
.spip_logos, div#boutons_admin_supp img, div#bouton_montrer img, div#pied img {
border: none;
}

La publicité pour OpenOffice.org

Nous allons créer un joli encart dont le but est d’inciter les visiteurs du site à télécharger la suite bureautique OpenOffice.org :

/* Telecharger OOo */
div#telecharger_ooo {
	background:white url(../images/ooo_mascote.png) no-repeat bottom right;
	border: inset;
	margin:10px 10px 10px 10px;
	padding: 5px 5px 5px 5px;
}

div#telecharger_ooo h2 {
	font-family: sans-serif;
	text-align: center;
}	

div#telecharger_ooo ul li {
	list-style-position: inside;
}

li#linux{
	list-style-image: url(../images/linux.png);
}

li#mac {
	list-style-image: url(../images/macosx.png);
}

li#windows {
	list-style-image: url(../images/windows.png);
}

div#telecharger_ooo ul li a {
	vertical-align:super;
	text-decoration: none;
	font-size:1.15em;
	font-weight: bold;
}

div#telecharger_ooo ul li a:hover {
}	

Le Centre de la page

Tout le reste de la page est réservé à l’affichage particulier à la page sommaire. Nous allons donc créer les styles dédiés correspondant. Mais c’est le but du prochain tutoriel...