Colorisation

La colorisation n’est pas toujours une chose aisée.

Nous pouvons choisir de sélectionner des couleurs dans le logo du site avec The Gimp :

Puis trouver des couleurs assorties pour colorier les polices et les cases du site :

Finalement, nous avons choisi deux couleurs assorties : le rouge utilisé dans l’en-tête du site et le bleu qui reviendra sur le design. La distinction entre les différentes parties se fera sur des dégradés de gris (2 gris différents en fait).

/* ******************************** */
/*                                  */
/*         COULEURS DU SITE         */
/*                                  */
/* ******************************** */


a, .rubriques a:hover {
color: #0255c2;
}

a:hover, .rubriques a, dl.date_list dt, dl.date_list dt small {
color: #c30;
}

/* couleurs des DIV principales */

/* Body */

#droite, #derniere_breve, #liste_sur_web, #liste_forum {
background-color: #ddd;
}

/* couleur rouge */
#header, .formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription {
background-color: #c30;
}

#header p, .formulaire_inscription .spip_bouton input:hover, .formulaire_inscription input#nom_inscription, .formulaire_inscription input#mail_inscription {
color: white;
}

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


#haut, #dernier_article, #liste_derniers_articles, #derniere_modif, #liste_dernieres_modifs  {
background-color: #eee;
}

#centre, #moitie_gauche, #moitie_droite {
background-color: #fff;
}


/* Telecharger OOo */
div#telecharger_ooo {
	background-color:white;
	}

Je dois bien avouer avoir été obligé de rajouter des marges (margin : 1em ;) dans quelques blocs de DIV pour finaliser la répartition des aplats de gris.

Corrections pour les autres navigateurs internet

Notre squelette est terminé (en tout cas pour la page sommaire du site). Mais il faut nous assurer que le design est correctement interprété sur tous les navigateurs dont, le plus problématique, Microsoft Internet Explorer dans ses versions antérieures à la version 7.

Notre site est bien visible sous Firefox, donc il le sera certainement sous tous les autres navigateurs exceptés, peut-être, ceux de Microsoft. Nous allons donc procéder à une vérification sous les navigateurs MSIE 5, MSIE 5.5, MSIE 6 et MSIE 7 grâce au formidable site BrowserShots (mais il y en a d’autres).

MSIE 5	MSIE 5.5	MSIE 6	MSIE 7

form.formrecherche div input.formrechercheimage
		{
		vertical-align: middle;
		}

.formulaire_inscription p {
	text-align:left;
}

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

div#moitie_gauche, div#moitie_droite {
	width:48%;

}

div#telecharger_ooo ul li a {
	vertical-align:sub;
}

div#liste_derniers_articles, div#liste_forum, div#liste_dernieres_modifs, div#liste_sur_web {
background-image: none;
}

/*  ----------------------------------------------------------- */
/*  Correction problèmes de % sur les deux colonnes centrales   */
/*  ----------------------------------------------------------- */


body, #conteneur {
width: 100%;
}

#centre {
float:left;
margin-right: 0px;
width: 72%;
}

#droite {
float:right;
width: 22%;
}

div#moitie_gauche, div#moitie_droite {
	width:48%;
}

/* format PNG */
.format_png { behavior: url(win_png.htc); }

Les corrections vont être placées dans des feuilles de style différentes (de toutes petites feuilles de styles ne comprenant que les codes CSS ci-dessus). Ces feuilles de style seront placées dans le répertoire /squelettes/css (les noms des feuilles sont donnés dans le code qui suit).

Un appel conditionnel à ces feuilles de style est fait dans le fichier /squelettes/inc_biohead.html :

[(#REM) correctifs MSIE]
<!--[if IE 5.0]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_IE_5.css}|direction_css)]" type="text/css" media="all" /><![endif]-->
<!--[if gte IE 5.0]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_gte_IE_5.css}|direction_css)]" type="text/css" media="all" /><![endif]-->
<!--[if gte IE 5.5000]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_gte_IE_5_5.css}|direction_css)]" type="text/css" media="all" /><![endif]-->
<!--[if gte IE 6]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_gte_IE_6.css}|direction_css)]" type="text/css" media="all" /><![endif]-->
<!--[if lt IE 6]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_lt_IE_6.css}|direction_css)]" type="text/css" media="all" /><![endif]-->
<!--[if lt IE 7]><link rel="stylesheet" href="#URL_SITE_SPIP/[(#CHEMIN{css/bio_habillage_lt_IE_7.css}|direction_css)]" type="text/css" media="all" /><![endif]-->

Après corrections, nous obtenons les résultats suivants :

MSIE 5	MSIE 5.5	MSIE 6	MSIE 7

Les différences qui subsistent sont :
– sous MSIE 5 : le logo du site n’est pas traité par le script win_png.htc qui, pourtant, fonctionne bien sous MSIE 5.5 et MSIE 6 ;
– sous MSIE 5, 5.5 et 6 : les images .png qui sont incluses dans la feuille de style ne peuvent pas être traitées par le fichier win_png.htc. Ces images ont donc un fond de couleur légèrement différent de la couleur de fond sur lequel elles sont posées.

Il y a des moyens de réduire à néant (ou presque) ces défauts. Nous avons, par exemple, modifié la couleur du fond du logo du site pour qu’apparaisse la couleur rouge lorsque la transparence ne fonctionne pas (c’est à dire uniquement sous MSIE 5). Le résultat est quasi invisible (il y a tout de même une légère différence d’interprétation d’un même code couleur entre le logiciel d’édition graphique et le navigateur internet) :

Nous pourrions faire de même avec tous les fichiers .png qui sont intégrés aux feuilles de style pour leur attribuer les deux gris utilisés dans les applats du site. Peut-être plus tard, si nous en avons le temps...

Changer les couleurs des fonds transparents !!!

Finalement j’ai eu le temps :o)

Pour modifier la couleur transparente du fond des images .png, il suffit de bien veiller à ce que la couleur de fond de Gimp soit la bonne lorsqu’on enregistre l’image :

Il fallait créer également une autre image bloc-note avec un fond plus foncé car cette image était positionnée à la fois sur les deux tons de gris. Un appel à cette seconde image est fait dans la feuille de style corrective /squelettes/css/bio_habillage_lt_IE_7.css qui corrige les versions 5, 5.5 et 6 de MSIE :

div#liste_forum dl.date_list dt, div#liste_sur_web  dl.date_list dt{
	background-image :url(../images/blocnotes_fonce.png);
}

Le résultat en captures d’écrans sous MSIE 5.0 :

Les fichiers du tutoriel n°7