Bonjour,

J'ai voulu me lancer dans la grande aventure des widgets, sans succès hélas. Je m'explique, j'aimerais déplacer ma barre de navigation de sorte qu'elle soit déplacée sur le côté gauche du forum, verticalement, comme un widget. Alors, j'ai bien trouvé un widget nommé "navigation" dans la gestion de ceux-ci mais le résultat obtenu n'est pas très convainquant x)

Le widget en question s'affiche dans le cadre intérieur du forum alors que je voudrais qu'il se situe hors de ce cadre, tout à gauche quoi. Et puis je voudrais aussi savoir comment personnaliser l'aspect de cette nouvelle barre de navig. Un peu comme sur CSSactif justement ou ce forum : http://ag-program.bbfr.net/.

J'avais bien trouvé un message archivé relatant le même genre de problème mais la solution proposée ne marche pas sur le forum ou je teste mes codes x)

Bonjour Abysse Yclette !

J'ai failli te répondre hier, mais en fait ton problème est plus complexe que ce que je pensais au début (disons que ce n'est pas compliqué, mais que pour bien faire ça fait appel à un peu plus de choses que je pensais au début).


Je vais te décortiquer le principe du widget pour que tu comprenne. Ce que tu as besoin d'avoir, c'est la structure. Ensuite s'offrent à toi 2 possibilités :

• Modifier la structure via les templates, c'est du HTML. Pas forcément indispensable selon ce que tu souhaites faire
  
• Modifier la mise en forme, c'est du CSS. Ce sera indispensable quoiqu'il en soit.

En allant lire le décryptage du template overall_header (que je te conseille de lire) on trouve que c'est ce template qui se charge d'inclure le code du widget dans la page si celui-ci est activé.

Notamment, c'est cette partie du template qui inclus tes widgets dans une colonne à gauche de ton forum :

Code:

...
<td valign="top" width="{C1SIZE}">
    <div id="{ID_LEFT}">
        <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- BEGIN saut -->
                <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
        <!-- END giefmod_index1 -->
    </div>
</td>
...

Bref, si tu veux changer la structure de l'emplacement de tes widgets, c'est là-dedans que ça va se passer. Par contre, ce sera délicat car tu touche directement au template.


Pour tout ce qui va concerner la personnalisation de ton widget, c'est dans le CSS que ça se passe. Tu peux tout faire, à condition que tu connaisse le sélecteur qui pointe vers ton élément, bien entendu.
Dans ton cas, voici le code généré par le template lorsque tu active ton widget :

Code:

...
<td valign="top" width="203">
    <div id="left">
        <table class="forumline" border="0" cellpadding="0" cellspacing="1" width="100%">
            <tbody>
                <tr>
                    <td class="catLeft" height="25">
                        <span class="genmed  module-title">Navigation</span>
                    </td>
                </tr>
                <tr>
                    <td class="row1" align="left">
                        <span class="genmed" style="line-height: 150%">
                             <a href="/">Portail</a><br>
                             <a href="/">Index</a><br>
                             <a href="/memberlist" rel="nofollow">Membres</a><br>
                             <a href="/profile?mode=editprofile" rel="nofollow">Profil</a><br>
                             <a href="/faq" rel="nofollow">FAQ</a><br>
                             <a href="/search" rel="nofollow">Rechercher</a><br>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="height:4px"></div>
    </div>
</td>
...

Ca devrait te donner ce dont tu as besoin pour styliser ton élément, ainsi que de repérer à quoi correspondent les variables et boucles du template finalement.

Est-ce-que jusque-là tu vois de quoi je parle et ce que tu as besoin de faire pour arriver à tes fins ?

Bonjour !

Déjà, merci pour cette explication complète *.* Alors, côté CSS, je vois à peu près ce que je peux faire. En bidouillant, je devrais m'en sortir pour donner l'aspect que je souhaite à ma nouvelle barre de navigation.

Par contre, j'ai beau relire toutes les explications, je ne comprend pas comment je vais pouvoir déplacer ce widget. Jusque-là, il se place à gauche du forum mais dans les "bordures" et déforme la mise en page actuelle. Je voudrais qu'il soit à l'extérieur, comme un élément qu'on fixe sur la page (comme la box des partenaires par exemple). Dans ce cas, il faudrait que je déplace le code html correspondant dans le template overall_header ? =O

Et enfin, une dernière question qui doit paraître certainement un peu bête : une fois mon nouveau widget installé, comment je fais pour désactiver complètement la barre de navigation d'origine ? (celle que j'ai fixé en haut de page).

Et merci beaucoup, vraiment, pour ce travail *.*

Alors, au niveau de ta première question sur "comment déplacer le widget", c'est vrai que je n'ai pas été très clair vu qu'en fait 2 solutions s'offrent à toi :

1. Soit tu déplace simplement le widget en CSS, tu fais en sorte que sa colonne se démarque des autres, un peu à la manière de CSSActif (bon ici le widget est à droite, mais il s'agit bien d'une colonne dans le cadre du forum). Seulement il sera toujours dans le cadre du forum puisqu'il crée une cellule du tableau. Tu pourrais bien entendu le sortir du cadre rien qu'en CSS mais ce ne serait pas correct structurellement parlant et tu risque de générer des problèmes.
   
   
2. Soit tu modifie le template overall_header pour sortir le widget du cadre du forum et le placer où bon te semble (en le stylisant avec du CSS). Cette opération est néamoins plus délicate car il faut toujours faire extrêmement attention lorsqu'on manipule les templates.

Si c'est la deuxième solution qui t'intéresse, je te suggère à nouveau d'étudier le sujet de décryptage du template (lien dans mon précédent post) afin de voir un peu la structure et ce qui dépend des widgets.
Notamment, étant donné que le fait d'activer les widgets change le nombre de colonnes du tableau, tu risque de devoir bidouiller un peu le template pour que ton tableau accepte de ne pas avoir une colonne supplémentaire (un colspan qui a une valeur variable qu'il faut fixer directement dans le template ou avec du javascript).

Si tu n'y arrive pas, poste ton template avec les modifications que tu as effectué histoire qu'on corrige ça ensemble

Ah, d'accord. Merci =) Je vais donc tenter de bidouiller dans le template. J'essayerais ce week end. Merci encore ! Je n'hésiterais pas à poster ce qui ne va pas.

Alors, voilà, j'ai essayé. J'ai un bug cependant, je n'arrive pas à fixer mon "widget" là où je souhaite. Il créé par ailleurs une marge en haut de page entre le haut de la page et le header. J'avais déjà eu un problème du genre et j'avais réussi à le résoudre, cependant, là, je ne vois pas ce qui ne va pas =S

Le test : http://cavenecadas.forums-actifs.net/

La partie du code :

Code:

<table id="widnav"><tr><td>
                      <span class="genmed" style="line-height: 150%">
                            <a href="/">Portail</a><br>
                            <a href="/">Index</a><br>
                            <a href="/memberlist" rel="nofollow">Membres</a><br>
                            <a href="/profile?mode=editprofile" rel="nofollow">Profil</a><br>
                            <a href="/faq" rel="nofollow">FAQ</a><br>
                            <a href="/search" rel="nofollow">Rechercher</a><br>
                      </span>
                    </td>
                </tr>
</table>

Bonsoir ! Je me permets d'amener ma contribution. Ton table est encore dans le flux-normal, donc il se positionne au dessus de ton header et prend de la place. Pour positionner ton table widnav, il faut lui donner un positionnement fixe. Le positionnement fixe sort l'élément du flux normal, il le fixe à la page, ce qui fait qu'il suit la page malgré le scroll et il ne prend pas de place au sein du contenu de ta page.

Code:

#widnav {

position: fixed;
top: 200px; //A TOI DE DEFINIR LES VALEURS DE DEPLACEMENT QUI TE CONVIENNENT
left: 0px; //A TOI DE DEFINIR LES VALEURS DE DEPLACEMENT QUI TE CONVIENNENT
}

Huf, bon sang, je suis vraiment bête. Je m'étais trompée dans le nom de la division sur mon CSS, et dire que j'ai cherché pendant longtemps XD Merci beaucoup ! Une dernière question : je voudrais supprimer à présent ma barre de navigation horizontale (en haut de page), à quoi dois-je toucher dans le template ?

Je t'en prie ^^. Dans ton template "overall_header" je te conseille de mettre en commentaire cette section comme je l'ai fait dans le texte ci-dessous. Ainsi, si tu décides de récupérer cette partie, tu n'auras qu'à enlever les caractères qui mettent ta portion de texte en commentaire.

Code:

 <!-- <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
         <tr>
            <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
         </tr>
     </table>  -->

Ah merci beaucoup, c'est pratique ! En lisant le sujet de décryptage du template, j'ai réussi à trouver comment modifier les liens de ma nouvelle barre de navigation. En revanche, j'ai un souci avec le lien de connexion/déconnexion. J'ai recopié, trait pour trait, la description qui est donnée dans le décryptage. J'arrive bien à me déconnecter mais impossible de me reconnecter. Et le message reste toujours "Déconnexion [Pseudo]". Impossible de me reconnecter de cette manière, donc, et le lien n'affiche pas le vrai pseudo.

Ah oui, je n'ai pas trouvé aussi comment intégrer le "s'enregistrer" XD

Dans le cas où tu veux vraiment refaire ta barre de navigation toi-même, je ne peux pas t'aider, je ne connais pas suffisamment le fonctionnement des boucles et variables forumactif. Néanmoins, si j'en crois le message sur le décryptage du overall-header, Orange te donne le code généré quand tu es connecté, ce n'est donc pas un code qui va te permettre d'avoir une barre de navigation qui varie selon qu'on est connecté ou pas. Le décryptage sert uniquement à t'expliquer comment cela fonctionne et à quoi cela sert.

Je pense néanmoins qu'il y a une autre solution. Tu peux parfaitement repartir de la portion de code que je t'ai dit de mettre en commentaire toute à l'heure au lieu de recréer ta barre de navigation toi-même, et travailler directement sur chacun des liens générés par forumactif pour obtenir ta barre de navigation en widget sur le coté.

Chacun des liens porte la classe mainmenu. Tu peux donc les cibler ainsi. J'ai récupéré ton css de ton site pour voir et ajouté une propriété display qui va te permettre de mettre chaque élément a sur une ligne différente. Il y aura sans doute d'autres modifications à faire pour avoir le même rendu que ce que tu as actuellement, mais bon...

Code:

a.mainmenu
{
color: #8A4E32;
    font-family: Time New Roman;
    font-size: 14px;
    font-variant: small-caps;
    margin: auto; // je ne vois pas à quoi ça sert
    padding: 3px;
    text-align: center; // je ne vois pas trop à quoi ça sert
    text-decoration: none;
    text-shadow: 0 0 5px #000000;
 

 display: block // définit chaque balise a comme une balise block et les fait donc passer à la ligne

}

Ensuite, il faut positionner toi-même le conteneur de cette barre de navigation en lui ajoutant par exemple une classe. Je te conseille de supprimer le align="{MENU_POSITION}", qui va plus t'embêter qu'autre chose.

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" class="maBarreDeNavigation">
        <tr>
            <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
        </tr>
      </table>

Ensuite, tu cibles et tu peux la positionner à ta guise comme tu as pu le faire toute à l'heure avec la barre de navigation que tu avais créée toi même.

Code:

.maBarreDeNavigation {
position: fixed;
left:0px;
right:100px;
}

Ah j'ignorais que je pouvais faire comme ça !

Par contre, ya un petit souci : la commande "a.mainmenu" agit également sur les onglets du profil, du coup ca déforme tout. Puis j'aimerais pouvoir réduire l'espace entre chacun des liens (enfin jdois pouvoir trouver).

Un screen :

Spoiler:

Alors, très simplement, puisque j'imagine que tu as ajouté une classe sur le conteneur de ta barre de navigation comme je te l'ai dit, tu peux changer le ciblage

Code:

a.mainmenu{}

en

Code:

.maBarreDeNavigation a.mainmenu {}

L'espace entre les mots signifie que on cible la balise a de classe mainmenu qui est un descendant d'un élément de classe maBarreDeNavigation.

Pour ce qui est de réduire l'espace entre les différents liens, tu peux ajouter la propriété line-height à l'élément .maBarreDeNavigation, exemple:

Code:

.maBarreDeNavigation {
line-height: 0.2; //valeur un peu extrême mais pour exprimer l'exemple
}

Oh j'ignorais complètement l'existence de cette astuce o.o Merci beaucoup ! Décidément, j'en apprend beaucoup x)

Hum, par contre, je ne crois pas que la commande "line-height" fonctionne, je ne vois pas de différence, même en mettant la valeur à zéro. Deuxième souci : l'affichage du déconnexion est vraiment trop long (avec le "déconnexion [pseudo]"). N'y aurais-t-il pas moyen d'enlever le [pseudo] ou de modifier le nom de cette variable ?

D'après ce que je vois sur votre forum, tu as appliqué la propriété line-height à a.mainmenu. Or, quand je teste sur ton code un

Code:

line-height:0;

sur l'élément .maBarreDeNavigation et non a.mainmenu, l'écart diminue considérablement.

Pour répondre à ta deuxième question, je ne connais pas un moyen de remplacer la variable par un autre mot ou d'enlever une partie. Si tu veux absolument réduire la largeur du widget, tu peux éventuellement mettre une largeur à ton .maBarreDeNavigation afin qu'il y ait un retour à la ligne pour le pseudo mais j'ignore si cette solution te convient.

Plop, je tiens à préciser que le Décryptage est fait par moi, et non Orange XD *La fille qui veut ses lauriers*

Abysse, il faudrait que tu nous montres le code au fil de tes modifications pour qu'on puisse voir également s'il n'y a pas des coquilles de ton côté

Par contre, pour le line-height, c'est normal : il faut une unité de longueur, genre 0.2em !

Quant au [pseudo], je ne crois pas que tu puisses le retirer sans passer par du JavaScript, tu veux que j'appelle Espeon ou Doare à la rescousse ?

Oui, c'est une solution qui me convient, enfin c'est mieux que rien x)

Hum, ya quand même un petit problème : pour le coup, le line-height agit sur le retour à la ligne de mon "déconnexion" en superposant les deux lignes XD

*Se fait snobber avec joie et bonne humeur*

*toussotte*

Pour le problème du line-height, c'est parce qu'il ne faut pas l'appliquer aux liens, mais à la classe .maBarreDeNavigation (enfin, mettre une taille raisonnable, genre 0.8em). Ça, ça a déjà été dit par Chinelle. Par contre, tu peux également retirer les padding sur les liens

Han, mince, jsuis terriblement désolée. Je n'avais pas vu le message, j'ai posté et je n'ai pas vu qu'il y avait une seconde page de créé -_- Pfiou, j'ai les yeux défoncés je fais n'importe quoi. En effet, je ne sais pas lire. Je m'excuse, Christa'.

Bref, pour le bidule de la déconnexion, là, faut pas s'embête, ca me va bien comme ça. Jsuis pas très douée en JS qui plus est x)

Merci encore !

L'indication "résolu" figurant dans le titre du sujet, je déplace. Merci