BioSPIP et BioSquelettes v. 4.0

Un tutoriel pour débutants.

Créer ses propres squelettes

à partir des squelettes par défaut de SPIP

voici un tutoriel qui vous donne un exemple de création de squelettes en partant des squelettes par défaut livrés avec le paquet de fichiers de SPIP.

Prérequis  : il faut avoir installé SPIP sur son serveur (hébergement distant ou serveur local). Vous pourrez trouver de la documentation à ce sujet sur www.spip.net/fr et www.spip-contrib.net.

Prérequis 2  : vous devez avoir un contenu à votre site afin de visualiser les effets des modifications effectuées. Dans les captures d’écran suivantes, nous nous sommes basés sur le contenu du site www.naturalistes.info dont nous avons récupéré la base de données (sauvegarde SPIP) pour utiliser ce même contenu en local.

Pour commencer, votre site doit avoir l’aspect suivant (à la différence de contenu près) :

Création du répertoire de squelettes

À la base de notre hébergement, nous avons les répertoires suivants :
  CACHE
  dist
  ecrire
  formulaire
  IMG
  oo
  ...

Nous y ajoutons un répertoire dénommé "squelettes", ce qui nous donne l’arborescence suivante :
  CACHE
  dist
  ecrire
  formulaire
  IMG
  oo
  squelettes
  ...

C’est dans ce répertoire "squelettes" et dans lui seul que nous travaillerons et ajouterons/modifierons nos fichiers de squelettes.

6 fichiers pour commencer

Nous allons récupérer quelques fichiers du squelette par défaut de SPIP afin de les adapter à nos exigences.

Les squelettes par défaut de SPIP se trouvent dans le répertoire /dist. Nous faisons donc un copier/coller de certains fichiers de /dist vers /squelettes. Les fichiers choisis sont article.html, rubrique.html, sommaire.html, typographie.css, habillage.css et impression.css.

Pour les fichiers .css, la version 1.9.1 proposse des noms différents. Sélectionnez tous les fichiers se terminant par .css et la confusion n’aura plus lieu d’être. Par exemple, vous ne trouverez pas de fichier typographie.css dans la version 1.9.1 mais un fichier spip_style.css.

C’est, dorénavant, sur ces fichiers et dans ce répertoire (/squelettes) que nous allons travailler. Toute modification de fichiers concerne uniquement les fichiers contenus dans ce répertoire /squelettes.

Création d’une image en "bandeau haut de page"

Nous créons une image longue (un bandeau) pour le haut de page du site. Pour cela nous pouvons utiliser le logiciel libre et gratuit : The Gimp. L’image travaillée (découpage, contraste amélioré, couleurs "gama-isées"...) fait, ici, une taille de 1300x139 pixels. Ainsi, cette image s’adaptera sans problème à des résolutions d’écran jusqu’à 1280 pixels de large.

le fichier image bandeau_drapeaux.jpg

ATTENTION : cette image n’est pas libre d’utilisation. Elle est copyrightée et ne doit pas être utilisée sur un site internet autre que celui du propriétaire de l’image.

On enregistre cette image dans le répertoire /squelettes.

Par la suite, on peut imaginer facilement la création d’un sous-répertoire /squelettes/images dans lequel nous placerions toutes les images du design du site. Cela nous obligerait seulement à corriger les liens vers ces images dans les feuilles de style afin de respecter cette nouvelle localisation des fichiers images. Mais la solution retenue ici est de placer les images directement dans le répertoire /squelettes étant donné que le nombre d’images utilisées pour le design reste généralement peu élevé.

Mise en place du "bandeau haut de page"

Tout le travail de la mise en place de ce bandeau décoratif se fait dans les feuilles de style.

Le petit correctif suivant ne concerne que les version antérieures à SPIP 1.9 :

Nous allons corriger tout d’abord une erreur de logique en coupant/collant les lignes 20 et 21 du fichier typographie.css vers le fichier habillage.css :

/* bien regler la marge (bugs IE) */
body { background: white; margin: 10px; }

Les lignes précédentes sont collées directement au début du fichier habillage.css.

Les lignes suivantes de habillage.css sont modifiées de la sorte :

Les codes /* et */ permettent de mettre en commentaires les commandes css originales et ainsi de garder une trace du travail effectué.

Ainsi, dans la modification ci-dessus, on a modifié background : white ; par background : #c2cdd6 url(bandeau_drapeaux.jpg) scroll no-repeat top left ;.

Détaillons un peu la commande background (qui signifie litérallement : "fond de page") :
  #c2cdd6 : correspond à la couleur de fond de la page en code hexadécimal. Le logiciel libre et gratuit : The Gimp donne facilement le code hexadécimal en fonctione de la couleur affichée (notamment avec l’outil "pipette" du logiciel).
  url(bandeau_drapeaux.jpg) demande d’afficher l’image en question dans le fond de la page ;
  no-repeat : signifie que l’image n’est affichée qu’une seule fois dans la page et non pas en tapisserie mosaïque de la même image ;
  top left : signifie que l’image est placée en haut à gauche de la fenêtre.

En rechargeant la page nous obtenons l’équivalent de la capture ci-dessous :

Adaptation de la page au bandeau

Sur la précédente capture on se rend bien compte que la lecture du texte s’avère difficile car ce dernier se retrouve en partie au dessus de l’image du bandeau.

Nous allons donc décaler l’affichage du texte pour que ce dernier ne s’affiche qu’après l’image de bandeau.

Pour cela, nous éditons le fichier habillage.css et modifions la ligne 140 (numéro approximatif qui dépend des modifications déjà réalisées ci-avant) :

La ligne modifiée est top : 0px ; en top : 130px ; ce qui permet d’obtenir l’affichage suivant :

Récapitulatif des modifications pour le bandeau haut de page

L’ensemble des modifications des fichiers habillage.css et typographie.css se trouve dans les documents ci-joints :

fichier habillage.css après cette première adaptation

prise en compte d’une image (bandeau) dans l’en-tete du site.

fichier typographie.css après cette première adaptation

suppression de la partie de la feuille de style correspondant à l’habillage du corps du document (body).

Maintenant, quelques précisions à ce niveau :
  nous avons modifié la balise #principal car cela correspond à la partie du site où s’affiche le contenu. Le nom exact de cette partie (#principal), nous l’avons trouvé grâce à la fonctionnalité additionnelle de Firefox : Web Developper ;
  nous avons sélectionné la fonction Information/Afficher l’ordre des éléments div ;

  Ce qui nous donne l’affichage suivant dans Firefox :

Dans la capture d’écran précédente, nous voyons bien à quoi correspond la balise div#principal. Nous n’avons donc aucun mal à modifier les feuilles de style (en l’occurence habillage.css) en fonction de ces informations.

La suite...

La suite de ce tutoriel avec la mise en place d’un menu de gauche plus pertinent et plus joli. Seront développés des techniques de CSS ainsi que des modifications des squelettes avec l’utilisation de la balise INCLURE de SPIP.

SUITE : Créer ses propres squelettes : II...