Ajouter une 4e colonne au skin yacs_2007

L'ajout d'une 4e colonne nécessite 3 opérations distinctes:

• la création de la colonne dans template.php
• le formattage (//styling//) de cette colonne dans la feuille de style CSS
• l'ajout de contenu dans cette colonne.

Supposons que notre skin s'appelle yacs_4colonnes et appelons notre 4e colonne nouv_bloc. (Vous pouvez choisir un autre nom, mais vous ne pouvez pas utiliser de caractêres accentués dans ce nom, donc "boîtes_extra_2" devra sacrifier son petit chapeau)

Première étape : créons la 4e colonne par l'ajout du code HTML approprié dans template.php. Pour commencer et pour tester, insérez les lignes suivantes (sauf les 2 dernières) juste au-dessus de l'instruction créant le wrapper (les 2 dernières ligne du code ci-dessous).

.
    // creation de notre 4e colonne
    echo "\n".'<div id="nouv_bloc">'."\n";
    // contenu de notre 4e colonne
    echo "Contenu de la 4e colonne dans template.php"."\n";
    //Skin::nouv_bloc();
    // fin de notre 4e colonne
    echo '</div>'."\n"."\n";
.
    // several columns in the middle
    echo '<div id="wrapper">'."\n";

Vous pourriez placer ce code ailleurs, notamment à l'intérieur du wrapper, mais ici je le place au même niveau que le wrapper et le side-panel. Quoique la structure de la page HTML varie d'un skin à l'autre (ce qui présente des avantages au niveau de la flexibilité mais des inconvénients au niveau de la rationalisation et de la documentation) ce positionnement donne le même résultat, que notre skin yacs_4colonnes soit dérivé de yacs_2007 ou de grigloo.

Seconde étape : formattons notre 4e colonne à l'aide des CSS. Par exemple et pour tester, insérez la règle de style suivante dans yacs_4colonnes.css.

#nouv_bloc {
		float: right;
		width: 150px;
		padding: 10px;
		margin: 10px;
		background: red;
}

Évidemment, vous ne voudrez probablement pas d'une colonne à fond rouge, mais cela permet de tester l'affichage, qui pourra être affiné plus tard. Vous pouvez inclure cette règle n'importe où dans la feuille de style mais 2 endroits semblent plus appropriés : soit au voisinage des règles relatives au wrapper, soit à la toute fin, avec vos autres règles perso.

Vérification : téléportez ces 2 fichiers modifiés dans le dossier de votre skin sur le site distant et affichez une page, vous devriez avoir une boîte rouge à droite, notre 4e colonne !

Dernière étape : insérons du contenu. Ici, je ne serai pas de grande utilité, car ça demande plus de connaissance en PHP que je n'en ai.

Une première façon d'inclure du contenu, c'est de le coder dans template.php, ce qu'on a déjà fait ci-dessus, à la première étape. Ce n'est vraisemblablement pas suffisant.

Une deuxième façon, c'est d'appeler une fonction préxistante en PHP ou d'en créer une nouvelle et de l'appeller, à partir du fichier template.php

Créons donc une nouvelle fonction en insérant le code suivant dans skin.php, juste avant l'accolade finale }** qui précède le code ?> à la toute fin du fichier.

.
    function nouv_bloc() {
        // contenu de notre 4e colonne
        echo "\n"."Contenu de la 4e colonne dans skin.php"."\n";
    }

Enfin, décommentez la ligne Skin::nouv_bloc();// que nous avons ajouté au fichier ##template.php, pour l'activer. Autrement dit, enlevez les 2 traits obliques devant cette ligne.

**Vérification : téléportez ces 2 fichiers mis à jour sur votre site distant et raffraichissez la page. Notre 4e colonne, toujours rouge, affiche maintenant 2 phrases.

Et maintenant : il ne vous reste plus qu'à modifier de nouveau ces 3 fichiers selon vos besoins et préférences :

• vous voudrez probablement supprimer le bout de texte dans template.php
• vous voudrez probablement modifier les règles de CSS et en ajouter d'autres en fonction du contenu de votre 4e colonne (par exemple en ajoutant des règles pour #nouv_bloc dl comme il en existe pour #side_panel dl)
• vous aimerez consulter nos autres éminents confrères pour des conseils sur les fonctions à appeler à partir de template,php ou sur la façon d'en créer de plus utiles que ma nouv_bloc ()

Si vous aimeriez voir le résultat de ces suggestions avant de vous lancer dans l'aventure, j'ai laissé l'exemple sur mon site de test, siteoueb.com pour que vous puissiez le visualiser. Bon succès !