Ajouter des onglets dans un style qui n'en a pas

[title]Préalable[/title] Nous avons commencé par dériver le skin "joi" avant de travailler dessus. Il s'appellera ici "mon_style".
Si vous doutez de l'intérêt de cette procédure, lire avant tout la fiche comment dériver un style.

[flag]IMPORTANT[/flag]Les fichiers auxquels nous faisons référence ici sont ceux de "mon_style" et sont situés à la racine du dossier "mon_style", dans le répertoire des skins.






[title]Etape 1 : Afficher des onglets[/title] Nous allons modifier notre fichier template.php. [subtitle]1- Récupérer les commandes d'affichage des onglets[/subtitle] Dans le dossier du style alfresco, ouvrir "template.php" à l'aide de votre éditeur préféré.
Repérer les lignes relatives à l'affichage des onglets (avant la fin du header panel).
Rechercher la mention //horizontal tabs. Pour la version 6.3, cela se situe à la ligne 110.

Vous devez copier les lignes suivantes :
// horizontal tabs -- no tab to the front page
Page::tabs(FALSE);
Nous verrons plus loin ce que vaut cette variable.

[subtitle]2- Intégrer les commandes d'affichage des onglets dans le skins Joi[/subtitle] Aller dans skin/mon_style/ et ouvrir le fichier "template.php".
Notre code doit être rajouté dans le header panel.
Rechercher le commentaire // end of the header panel. Dans la version 6.3, il se trouve à la ligne 96.
Coller les deux lignes récupérées dans le template alfresco juste avant ce commentaire (laisser une ligne vierge entre les deux pour une meilleure lisibilité).

Enregistrer et recharger votre template.php modifié à la base du répertoire de "mon_style", en écrasant la version existante.
[title]Etape 2 : Définir le style d'affichage[/title] Nous allons modifier notre fichier css. [subtitle]1- Récupérer le style des onglets[/subtitle] Le style des onglets est défini dans la feuille de style. Nous allons, toujours, utiliser alfresco.
Récupérer et ouvrir le fichier "alfresco.css" situé à la racine du dossier "alfresco".

Rechercher la mention #tabs. Dans la version 6.3, cela commence à la ligne 821. Nous allons récupérer tout ce qui concerne les tabs, jusqu'à la ligne 884. Cela représente 8 paragraphes commançant par #tabs.Sélectionnez ces lignes et copiez-les. [subtitle]2- Intégrer le style des onglets dans la feuille de style de "mon_style"[/subtitle] A la racine du répertoire "mon_style", choisissez le fichier "mon_style.css" et ouvrez-le.
Les styles sont définis dans un certain ordre (indiqué en commentaire en début de la feuille de style).
L'ordre est le même dans les deux styles qui nous intéressent. Nous allons respecter l'ordre tel qu'il est défini dans alfresco et positionner les styles relatifs aux onglets juste avant la définition des styles par classes.

Pour cela, rechercher dans joi.css le commentaire suivant :
/**
*styles by classes
*/
Dans la version 6.3, il commence à la ligne 704.

Placez-vous juste avant, et collez l'intégralité des lignes que vous avez copié dans alfresco.css. Laissez une ligne vierge avant et après pour une meilleure lisibilité.
Enregistrez, et rechargez votre fichier .css à la racine de votre répertoire "mon_style" en écrasant le fichier existant. [title]Etape 3 : Régler l'affichage et les styles[/title] [subtitle] Voyez ce que vous avez changé : ça marche... [/subtitle] Retournez dans votre navigateur et rechargez la page en vidant le cache (maj+recharger sous Firefox, ctrl+recharger sous IE) : vous devez voir apparaître les onglets qui vous offrent un lien direct vers les sections (bien sûr, si vous avez créé des sections, sinon... y'a rien !).
[subtitle]... mais c'est pas parfait ![/subtitle] Vous voyez aussi par exemple, que la couleur des liens est à revoir (on les distingue mal sur le fond marron du headerbackground de joi), et que la position des onglets doit être ramenée sur la gauche et vers le bas (les onglets dépassent de la page). C'est normal, car nous n'avons pas encore touché aux réglages de styles qui sont ceux d'alfresco.

Tout cela se règle dans la feuille de style. [subtitle]Régler les styles relatifs aux onglets[/subtitle] Retourner sur votre feuille de style, lignes relatives aux onglets, c'est à dire tout ce qui commence par "#tabs". Là, c'est vous qui voyez, selon vos goûts ! Mais je vais vous donner quelques exemples.



[b][i]Mettre le texte des onglets en noir[/i][/b]
Je n'ai pas changé l'image de fond du header, et l'ambiance est dans les marrons. Résultat : le texte des onglets en gris est quasiment invisible.
Je remplace la couleur #999 par "Black" dans les deux paragraphes suivants : #tabs a { et #tabs li a span {.
Je recharge ma page en vidant le cache : et mes onglets sont écrits en noir :D

Par contre, la [b][i]couleur lors du survol avec la souris[/i][/b] me convient, je ne touche pas aux paragraphes portant la mention
#tabs li a:hover
et
#tabs li a:hover span.

[b][i]Déplacer les onglets vers la gauche et vers le bas[/i][/b]
Dans #tabs { /* the global navigation bar -- see template script */
(le premier paragraphe des tabs), je vais modifier la position en pixels depuis le haut et depuis la droite avec les valeurs suivantes pour que les onglets s'affichent en bas et à droite du header.
top: 100px;
right: 120px;
Ici, vous allez régler tranquillement vos distances en faisant des tests avec plusieurs valeurs pour avoir l'emplacement que vous souhaitez.

J'ai fait mon test avec 2 sections existantes, mais si j'en rajoute d'autres, les onglets se décalent vers la gauche pour rester toujours en bas et à droite du header.
Si vous avez modifié votre header (par exemple avec une autre image, moins haute), vous aurez à ajuster ces dimensions en fonction du rendu que vous souhaitez.

[b][i]Encadrement des onglets (au survol avec la souris et pour repérer l'onglet sélectionné)[/i][/b] Cette règle existait dans le style alfresco, et a donc été reproduite ici puisque nous avons recopié le code.
On peut voir que sous les lignes suivantes du .css :
#tabs li a { /* tab top left corner */
et
#tabs li a span { /* tab top right corner */,
on trouve la référence à une image de fond (background) qui devrait être située dans le répertoire image du style. Elle s'appelle "tabs.gif".
Si vous souhaitez retrouver le même aspect que dans alfresco, recopier ce "tabs.gif" que vous trouvez dans le répertoire image d'alfresco et mettez-le dans le répertoire image de "mon_style". Sinon, il ne se passe rien puisqu'il n'y a pas l'image de référence appelée dans votre répertoire "images".
Voilà, vous pouvez faire encore beaucoup d'autres choses, je vous laisse voir cela. A titre d'informations, vous pouvez aller voir dans les .css des autres styles à onglets comment ceux-ci sont gérés. [title][i]C'est bien beau tout ça, mais je voudrais un onglet avec la page d'accueil, SVP[/i][/title] Et bien pas de soucis, c'est même tout ce qu'il y a de plus simple
Allons-y...

Vous vous souvenez la fonction Page::tabs ? C'est elle qui provoque l'affichage des onglets dans template.php. C'est une fonction définie dans la classe "page", dans le fichier page.php (auquel, encore une fois, on ne touche pas ici ).

Voyons cette fonction définie dans "page.php". C'est la dernière fonction déclarée de la page.
function tabs($with_home=TRUE, $with_reverse=FALSE)
Cette fonction accepte deux paramètres :
- $with_home (avec ou sans onglet vers la page d'accueil, valeur par défaut à true) - je crois que vous commencez à voir où je veux en venir...
- $with_reverse (inverser l'ordre des onglets, valeur par défaut à false).

Rappel du code que nous avons ajouté dans template.php :
// horizontal tabs -- no tab to the front page
Page::tabs(FALSE);

Ici, la fonction tabs possède un paramètre, dont la valeur a été forcée à "false". Remplacer dans template.php (false) par () pour voir... Enregistrez, rechargez vote fichier à sa place, pensez bien à vider les caches (du navigateur, voire de yacs via le panneau de contrôle->purge->purge du cache) et... admirez !

Encore plus fort : des onglets avec une page d'accueil mais dont l'ordre est inversé ?
Essayez Page::tabs(true,true);. N'oubliez pas de vider les caches avant de recharger. Alors ?

Et si vous ne voulez que l'ordre inversé, pas l'accueil... Bref, je vous laisse faire. Pensez juste à faire passer vos paramètres entre les parenthèses, en les séparant d'une virgule, et [u]en respectant scrupuleusement l'odre de déclaration des paramètres[/u] : le premier concerne l'accueil, le deuxième l'ordre inverse.

[flag]Conseil[/flag] Pensez à bien commenter votre code. Si vous faites en sorte qu'il y ait un onglet "accueil" et que l'ordre soit inversé, changez le commentaire //horizontal tabs en fonction de ce que réalise votre code. Vous serez bien content quand vous reviendrez par ici plus tard, après avoir fait dix milles autres choses, de savoir où vous en êtes !

[b]Explications[/b] :
La fonction [i]tabs[/i] de la classe "page" peut recevoir 2 paramètres.
Si un de ces paramètres n'est pas transmis lors de l'appel de la fonction, des valeurs par défaut sont utilisées. Ces valeurs sont définies dans page.php, dans la définition de la fonction tabs.
function tabs($with_home=TRUE, $with_reverse=FALSE)
signifie que le premier paramètre prend la valeur "true" s'il n'a pas été transmis, et le deuxième la valeur "false".

En résumé et en français, pour la fonction tabs, par défaut, il y a l'affichage d'un onglet pour la page d'accueil et l'ordre des sections est le même que dans la carte du site. Si vous voulez que ce soit autrement, il faut le dire explicitement en passant les paramètres que vous souhaitez dans la fonction, au niveau de votre template.php.

Ouf ! Et bien ça y'est, vous avez des onglets ! Et vous savez même pourquoi et comment. Elle est pas belle la vie ?