Skip to main content Help Control Panel

Login   A+   A-

Community «   Le forum «   Web design «  

Possibilité d'une île ?

Comment rajouter une colonne dans un skin à trois colonnes ?
Pardon,le véritable titre est, pour rester concret: possibilité d'une colonne...
Mais en réalité, ma question porte sur le principe à appliquer pour introduire un nouveau bloc (donc une île...), dans un skin YACS

Quelques bouts de ficelle de code, svp...

Il n'est pas ici question d'utiliser les possibilités concernant les méta-informations, possibilités nouvelles offertes par YACS, au niveau d'une page, îles possibles que je salue au passage ...
Mais bien dériver un skin trois colonnes, tel digital ou YACS_2007, en disposant de quatre colonnes au lieu des trois initiales.

La question est sans doute mieux exprimée à travers un exemple:
Prenons le style YACS_2007. Il est disposé en trois colonnes fluides contenues dans le wrapper dans l'ordre suivant: (navigation, main panel, et boîtes extra)... Je souhaite le dériver en y intégrer une quatrième colonne sur la droite contenant un nouveau style de boîtes d'information...
Je comprend qu'il s'agit au départ d'intégrer un nouvel identificateur CSS...
Oui ? Non ?

Si la réponse est oui, imaginons que je le nomme #nouv-bloc que faut-il faire au niveau de template.php, de skin.php, et ailleurs?

Si la réponse est non... Dans ce cas prenons la question plus simplement: que dois-je alors faire pour obtenir mes quatre colonnes dans mon YACS_2007 (ou mon digital) dérivé ?

Last but not least : La solution ne réside t-elle pas, plus simplement, dans l'écriture d'un layout ?
Lasares
avatar
from L'Île-Bizard à Montréal, Québec
697 posts

on May 1 2007

JBien sûr que c'est faisable, et c'est même pas si compliqué que ça. Je prends un peu de temps plus tard aujourd'hui et je vous reviens avec des suggestions concrètes avant ce soir (heure d'Amérique).
Bernard
avatar
from nearby-an-airport
Associate, 6581 posts

on May 1 2007

Une première chose à faire est de regarder les identifiants accrochés par YACS (à travers les templates) aux composants de la page, pour étudier les boîtes qu'il conviendrait de regrouper dans cette quatrième colonne.
Lasares
avatar
from L'Île-Bizard à Montréal, Québec
697 posts

on May 2 2007

Oups ! j'ai été présomptueux, semble-t-il. C'est plus compliqué que je ne l'ai cru à prime abord.

Je vous reviens quand même avec une réponse car le défi m'intéresse, mais ça ne sera pas pour ce soir. Pour m'aiguiller vers la solution la plus efficace, pourriez-vous me fournir certaines précisions :
  • désirez-vous avoir cette colonne sur toutes les pages ou presque, ou seulement sur certaines pages, de façon plus exceptionnelle ?
  • voulez-vous la colonne directement à droite du contenu principal ou à l'extrême droite (pas de politique ici SVP ) ?
  • quel genre de contenu voulez-vous placer dans cette colonne, des boîtes yacs comme le suppose Bernard ou du contenu original, du texte ou quelque chose de plus compliqué ?


A+
Fernand
avatar
from Paris
1287 posts

inspired from Lasares on May 2 2007

Lasares :
-  Sur toutes les pages
-  Je suis parti pour la droite du contenu... A dire vrai, j'ai pris votre style Grigloo (qui me plaisait bien et que j'ai dérivé). J'ai d'abord inversé le côté des colonnes, plaçant la colonne contenant les boîtes extra à gauche.... Ensuite, j'ai gagné de la place en mettant un accès pour les boîtes de navigation (side-panel) sous le header. Du coup, il me reste un emplacement de colonne vide (colonne de droite) que j'aimerais bien remplir avec une profusion d'informations nouvelles.
-  Celles-ci peuvent aussi bien être des boîtes extra, (mais de nouvelles dans ce cas, histoire de ne pas faire doublon avec la colonne de gauche).

En conclusion, ce style devrait se maintenir à trois colonnes, mais en réalité, le principe est celui d'un skin à quatre colonnes.
Etant donné que j'ai placé le bloc side-panel sous le header, j'ai bien peur d'avoir à rajouter un id dans mon skin, genre "boîtes_extra_2" et je ne sais comment m'y prendre.

Peu importe la forme.
Mon objectif est de faire un portail très fourni en informations dés la première page, de manière à ce que le visiteur dispose d'un énorme choix d'informations. A priori cette colonne devrait être remplie d'une liste de liens, mais avec des titres qui les séparent, (dans l'esprit des boîtes extra).
Lasares
avatar
from L'Île-Bizard à Montréal, Québec
697 posts

on May 2 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".''."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 ''."n"."n";
.
    // several columns in the middle
    echo ''."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ée 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 !


Fernand
avatar
from Paris
1287 posts

on May 3 2007

Lasares: je ne manque pas d'étudier tout cela et d'envoyer un retour. Mais d'ores et déjà, car le sujet me tient particulièrement à coeur, un GRAND merci, non, un IMMENSE MERCI

6 comments ·  Add a comment

Rate this page
Posted by Fernand on Apr. 28 2007, commented by Fernand on May 9 2007, (popular)