Construire ses propres squelettes SPIP (cours n°7)

, par Patrice HARDOUIN

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

Design du squelette sous Firefox

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 5MSIE 5.5MSIE 6MSIE 7
MSIE 5
MSIE 5.5
MSIE 6
MSIE 7
version du navigateurcode de sélectionproblème à corrigerCSS
MSIE 5 IE 5.0 bouton OK du champ de recherche décalé
form.formrecherche div input.formrechercheimage
                {
                vertical-align: middle;
                }
MSIE 5, 5.5, 6 et 7 gte IE 5.0 justification abusive du texte dans la formulaire d’inscription et absence d’écart entre les puces et le texte dans la liste des rubriques du menu
.formulaire_inscription p {
        text-align:left;
}

div.rubriques li a {
margin-left: 8px;
}
MSIE 6 et 7 gte IE 6 les colones des listes se chevauchent
div#moitie_gauche, div#moitie_droite {
        width:48%;

}
MSIE 5.5, 6, 7 gte IE 5.5000 texte des puces de téléchargement d’OOo décalées vers le haut
div#telecharger_ooo ul li a {
        vertical-align:sub;
}
MSIE 5 et 5.5 lt IE 6 images de fond répétées anormalement dans les listes et les deux colones centrales de liste ne comprenant pas les tailles de marges en pixels associées aux pourcentages
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%;
}
MSIE 5, 5.5 et 6 lt IE 7 transparence des images au format .png ne fonctionnant pas
/* format PNG */
.format_png { behavior: url(win_png.htc); }

ce code fait appel à un fichier win_png.htc que l’on place dans le répertoire /squelettes/css.

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 5MSIE 5.5MSIE 6MSIE 7
MSIE 5 1/2
MSIE 5 2/2
MSIE 5.5 1/2
MSIE 5.5 2/2
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) :

Correctif du logo du site pour une meilleure intégration à MSIE 5

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 :

Enregistrement de la couleur de fond sous Gimp

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);
}
bloc-note avec fond transparent gris foncé

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

Correction des fonds transparents 1/3
Correction des fonds transparents 2/3
Correction des fonds transparents 3/3

Les fichiers du tutoriel n°7

Tous les fichiers du squelette en fin de tutoriel n°7

P.-S.

Le but du prochain tutoriel est d’améliorer le référencement du site dans les moteurs de recherche et de le configurer pour répondre correctement aux filtres parentaux qui sont de plus en plus utilisés (notamment dans les établissements scolaires).