Mettre sa barre de navigation en haut du forum

par **Zen** le Mar 19 Avr 2011 - 15:27

Mettre sa barre de navigation en haut du forum

Ce tutorial vous explique comment déplacer votre barre de navigation tout en haut du forum.
Les modifications se font via le template overall header & CSS.

Attention: Uniquement valable pour les forums Phpbb2 & Punbb

Rendu Final

••• http://i23.servimg.com/u/f23/11/73/76/86/photo11.png

Par où commencer ?

• Allez dans Panneau d'administration > Affichage > Templates > Général > Overall header > edit

Qu'est ce qui permet l'affichage de la barre de navigation sur le forum ?

• Repérez ceci dans votre template:

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

On se concentrera uniquement sur cette variable: {GENERATED_NAV_BAR}
Inutile de s'arrêter sur les autres.
Vous l'avez donc compris, c'est cette variable qui renvoie à la barre de navigation.

•• Dans le code par défaut, cette barre se trouve juste après la bannière et la description.

Déplacer la barre - Etape 1

• Vous prenez donc ceci

Code:: {GENERATED_NAV_BAR}

et vous la mettez un peu plus haut dans le template juste après cette ligne de code

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Attention: N'oubliez pas de retirer cette partie

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

Déplacer la barre - Etape 2

• On ne va pas laisser notre variable toute nue, on va donc la mettre dans une div avec une class qu'on a appelé ici "navig".
Ce qui nous donne:

Code:: <center><div class="navig">{GENERATED_NAV_BAR}</div></center>

.

Petite astuce: Vous pouvez également mettre ceci

Code:: <div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>

=> Pour ceux qui ne sont pas très à l'aise avec le css ou les templates, cela vous sera très utile si à l'avenir, vous décidez de mettre votre barre à droite plutôt que centrée. Vous le faites directement dans le pa, sans toucher au CSS ou au template.

Modification du template pour Punbb

• Repérez cette partie :

Code:: <div id="pun-head"> <div id="pun-navlinks"> <ul class="clearfix"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div>

• Retirez la et mettez la entre le body et le begin:

Code:: <body>

• Vous obtenez ceci:

Code:: <body><div id="pun-head"> <div id="pun-navlinks"> <ul class="clearfix"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div>

• Remplacez par:

Code:: <div id="pun-navlinks"><ul class="clearfix"> <center><div class="navig">{GENERATED_NAV_BAR}</div></center></ul></div>

A présent, il ne vous reste plus que le code CSS !

CSS

• Allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Onglet Feuille CSS.

• Mettez ceci dans la css:

Code:: .navig { position: absolute; top: 0px; width: 100%; }

♣ Position: ici absolute. Pourquoi absolute ? Cette propriété permet à la barre de navigation de se positionner tout au dessus sans prendre en compte les autres éléments du forum. Elle sera donc bien positionnée.

♣ Top:0px => La barre se positionne donc à 0px du dessus.

♣ Width: 100% => La barre prend toute la largeur du forum

Le petit +: Esthétique de la barre de navigation.

• On va donc rajouter des éléments dans ce code:

Code:: .navig { position: absolute; top: 0px; width: 100%; }

Pour mettre un fond, on utilise ce code:

Code:: background-color: #000000;

♦ #000000 => code couleur que vous pouvez modifier à souhait.

Pour mettre une bordure:

Code:: border: 3px solid #dedede;

♦ 3px => l'épaisseur, plus la valeur sera grande, plus le bord sera épais.
♦ solid => solid ou dotted ou dashed
♦ #dedede => code couleur que vous pouvez modifier à souhait.

Astuces: Vous pouvez mettre une bordure uniquement en dessous, ou uniquement en haut, ou encore les deux.
Pour cela, utilisez ce code:

Pour le dessous:

Code:: border-bottom: 3px solid #a17a55;

Pour le dessus:

Code:: border-top: 3px solid #a17a55;

Pour retirer "l'image vide" générée par la barre.

Code:: a.mainmenu img{ display: none; }

Pour tout ce qui concerne la police

Code:: a.mainmenu { margin: 5px; font-family: Arial; font-size: 11px; }

♦ Margin => permet de séparer les boutons
♦ font family => propriété pour la famille de police utilisée
♦ font size => taille de la police

Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Anzu.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.

par Western Spaghetti le Mar 19 Avr 2011 - 15:39

Merci pour cette astuce Zen - elle sera très utile ^^ - Smile

par balqis le Mar 19 Avr 2011 - 16:11

Merci c'est très sympa de faire partager justement je cherchais des infos sur cela. cheers

par bihabib le Mer 20 Avr 2011 - 13:20

merci c'est sympa

par taraderus le Ven 22 Avr 2011 - 10:10

Bonjour tout ça c'est bien mais ne sert pas à grand chose pour ma part, pourquoi ne pas essayer d'améliorer la gestion des membres des forums, sélection plusieurs membres, copier/coller, création plus facile de groupe et de copier une partie des membres par sélection, séparer ceux qui post souvent et bien sur les autres, après un certain nombre de messages un passage automatique dans une autre catégorie, ou sujet, etc etc...

je sais aussi que cela n'intéresse peut être pas grand monde mais quand vous dépassé un certain nombre de membres cela parait très utile 1050 membre bientôt pour notre forum.

je laisse aux modos la pertinente de supprimer ou d'ouvrir un nouveau sujet.

merci

par **Anzu** le Ven 22 Avr 2011 - 14:25

taraderus => Bonjour, Quel est le rapport avec ce sujet qui est une astuce ?

Si vous avez une suggestion à faire, vous la faites dans la section appropriée. Il ne faut pas mélanger améliorations graphiques (modification de templates, css, etc) et améliorations techniques.

Cordialement.

par Pokéyugimestre le Sam 23 Avr 2011 - 13:22

Bien le bonjour, très bonne idée, je cherchais justement comment faire, je l'installerai peut-être sur mon Forum à l'avenir. alien

Cordialement.

par le ch'ti le Lun 25 Avr 2011 - 8:19

excellent, merci

par Pepper Potts le Dim 15 Mai 2011 - 15:03

Merci beaucoup pour ce tuto, cela allège grandement la zone sous le logo <3

par Xélore le Dim 15 Mai 2011 - 15:09

Merci Zen pour toutes c'est explications =)

par Hemma le Mar 17 Mai 2011 - 23:00

Merci mais je connais un tuto beaucoup plus court avec le même résultat

par N0ah le Mer 18 Mai 2011 - 20:18

Merci beaucoup pour ce tuto ! ^0^

par island le Mer 25 Mai 2011 - 17:26

Merci c'est quelque chose d'utile .

par Etoile Nocturne le Lun 30 Mai 2011 - 22:29

Bonsoir,
Merci pour le tuto , j'en avais trouver un sur un forum , un peaux [beaucoup] plus cours donc bon :/ celui ci , n'est pas mal , merci♥

par Invité le Mar 31 Mai 2011 - 11:16

Bonjour,

Cela fait deux fois que la remarque est faite à propos d'un tuto plus court. Pourriez-vous nous faire partager ce tutoriel? En effet le staff est ouvert à toutes suggestions concernant l'amélioration des tutoriels proposés.

Cordialement.

par ricafolgosa le Jeu 2 Juin 2011 - 10:59

merci c'est sympa

par nicolas.gateau le Sam 11 Juin 2011 - 14:09

bon tuto merci.
Cependant j'ai une question si je veut mettre dans la arrière plan une image plutôt qu'une couleur?
Es-ce possible?
Si oui comment?

par ltouzet le Mer 15 Juin 2011 - 13:32

Quelle barre de Naviguation ?

par Scipion le Mer 15 Juin 2011 - 15:18

ltouzet a écrit:Quelle barre de Naviguation ?

Bonjour

Il s'agit de la barre des liens, composée avec les boutons Accueil, Faq, Rechercher, Connexion...

Cordialement

par ltouzet le Mer 15 Juin 2011 - 15:23

Dac mais moi ils disent:
Dans cet espace vous pouvez modifier un template existant et modifier ainsi l'apparence du forum. Les templates modifiés sont marqués en rouge.
Pour revenir au template par défaut, cliquez sur supprimer : attention, votre template sera effacé !

Seuls les templates des versions phpBB2 ou PunBB sont affectés par ces modifications.

par Milouze14 le Mer 15 Juin 2011 - 16:26

Salut,
regarde l'entête du topic,

Attention: Uniquement valable pour les forums Phpbb2 & Punbb

Tu es en invision il me semble Wink

a++

par Stankiller le Dim 19 Juin 2011 - 12:28

Merci pour ce toto je préfère le mettre sous la bannière mais merci quand meme. Smile

par » Golden Mind. le Ven 24 Juin 2011 - 13:33

Bonjour,
Lors de la construction de mon forum, j'avais mis des petits boutons provisoires par défaut disponible sur forumactif. Je comptais mettre ma barre de navigation au dessus du header, exactement comme le propose ce tutoriel.
Seulement, après l'avoir appliqué, je constate que ma barre de navigation se situe bien au dessus du header, mais ce sont toujours mes images provisoires. Je les ai donc retirées, en pensant qu'un simple lien (accueil, etc) se mettrait à sa place, mais comme je n'ai pas mis les liens nulle part, je ne sais pas comment faire. Du coup, je n'ai plus du tout de barre de navigation ce qui est très problématique...

J'aimerais obtenir un rendu similaire à ça ( http://i26.servimg.com/u/f26/15/96/80/72/commen10.jpg ), avec des couleurs différentes - puisque je veux l'adapter à mon forum.

Voici mon template overall_header:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}> <head>  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch( tickerDirParam ) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function() { var w_cont = $('#fa_ticker_container').width(); if (w_cont > 0) { $('#fa_ticker_container').width(w_cont); /* Affichage de la liste */ $('#fa_ticker_content').css('display','block'); /* Calcul des dimensions du conteneur et des �l�ments */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso; /* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } ); /* Redimensionnement des �l�ments et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); /* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); } /* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus();   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus();   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>   <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"><center><div class="navig">{GENERATED_NAV_BAR}</div></center>  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr>  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>  <td align="center" width="100%" valign="middle">  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> <br />  <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}<br /> </span> </td>  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>  </tr> </table> <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html>

et mon css associé:

Code:: /*BARRE NAVIGATION*/ .navig { position: absolute; top: 0px; width: 100%; }

Merci de votre aide !

par **Anzu** le Ven 24 Juin 2011 - 15:25

Bonjour,

Je vous invite à poster votre demande directement sur le forum Smile

Cordialement.

par » Golden Mind. le Ven 24 Juin 2011 - 20:07

d'accord, merci beaucoup. C'est donc ce que j'ai fait ici:
http://forum.forumactif.com/t307645-barre-de-navigation-et-mauvaise-utilisation-du-tutoriel#2688920

par Garown le Sam 27 Aoû 2011 - 3:36

Bonsoir,

Merci bien pour ce petit tuto, je cherchais justement ce genre de truc. :>

par Ashlee le Mar 8 Nov 2011 - 11:24

Mettre sa barre de navigation en haut du forum

Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum

Re: Mettre sa barre de navigation en haut du forum