Barre de navigation flottante avec fonctionnalités étendues
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Barre de navigation flottante avec fonctionnalités étendues
Détails techniques
Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lmds-test.forumculture.net/
Description du problème
Bonjour,Je reviens sur quelque chose que j'avais essayé de faire il y a quelques mois mais sous phpBB3. A présent en phpbb2 j'espère avoir plus de liberté et surtout d'aide en codage.
Tout d'abord la barre de navigation que je souhaiterai avoir soit flottante en haut du forum, masquée lorsque l'on n'est pas en haut de la page mais visible que lorsqu'on place sa souris vers le haut de la page et ait un fond de type image*. Là-dessus j'ai remarqué que ces tutoriels : Mettre sa barre de navigation en haut du forum et Ajouter une barre de navigation flottante ne correspondaient pas à ce que je recherche qui avait été réalité dans ce sujet pour une version phpBB3.
Ensuite, j'aimerais que les boutons soient affichés sous forme d'image avec une bulle de texte au survol (chose que j'ai pu obtenir partiellement en suivant les indications de ce sujet) et enfin non seulement de supprimer le bouton "Groupes"** mais de pouvoir ajouter un bouton qui ouvre au clic la chatbox dans un nouvel onglet*** et un bouton pour les notifications de la même manière que la toolbar lorsque l'on clique sur "Notifications".
D'autre part, je voudrais qu'un clic sur le bouton correspondant au profil ouvre la même fonctionnalité que la toolbar lorsque l'on clique sur "Bienvenue [username]", avec "Voir mon profil", "Editer mon profil", "Mes Sujets", "Mes Messages", etc. mais aussi ce qui s'affiche à la navigation sur toutes les pages du forum, soit : Dernière visite le ... - ...:... / La date/heure actuelle est ... - ... .
Pour terminer, je cherche à ce que mes boutons soient répartis dans l'ordre et de la manière qui suivent.
A gauche :
[1] Guide
[2] Charte de Lois (Règlement)
[3] Glossaire
[4] Carte
Au centre :
[5] Forum (Page d'Accueil)
[6] Foire Aux Questions (F.A.Q.)
[7] Calendrier
[8] Galerie
[9] Aventuriers (Membres)
[10] Personnage (Profil)
[11] Courrier (Messagerie)
[12] Rejoindre l'aventure (S'enregistrer)
[13] Entrer/ Sortir (Connexion / Déconnexion)
A droite :
[14] Chatbox
[15] Rechercher
[16] Notifications
Je précise que les proportions de ce schéma sont un peu tronquées. Dans l'exemple de forum que j'aimerais prendre, ce serait avec une bannière large de 1600px et haute de 500 px (440 si elle peut ne pas être rongée sur le haut). La barre de navigation doit cependant s'étendre sur toute la page, quelle que soit la résolution de l'écran de l'utilisateur.
Est-ce que vous ne me conseillerez pas de recréer entièrement ce menu de navigation en suivant le tutoriel Créer sa propre barre de navigation ? Dans ce cas comment réutiliser les choses que j'avais déjà faite ?
Si vous avez donc bien compris ce que je recherche il ne s'agit pas simplement de fusionner la barre de navigation et la toolbar mais simplement prendre certains fonctionnalités de cette dernière pour ma barre de navigation.
Je sais qu'une telle requête est sans doute une première mais j'espère que quelqu'un réussira à se pencher sur mon cas.
Sur ce je vous remercie d'avance pour votre aide et vous souhaite de passer une excellente journée. ♥
* J'ai réussi à faire cela à peu près avec ces sujets et tutoriels :
- Mettre sa barre de navigation en haut du forum
- Barre de navigation flottante modifiée avec effets
- Une barre de navigation fixée qui joue à chat !
** Chose que j'ai pu déjà faire avec un ajout dans le css pour ne pas afficher la valeur "/groups" mais je ne sais pas si cette solution est vraiment compatible avec les autres modifications de ma barre de navigation.
*** J'ai pu le faire facilement en ajoutant un menu personnalisé.
Dernière édition par SweetGumiho le Jeu 3 Déc 2015 - 14:24, édité 5 fois
Re: Barre de navigation flottante avec fonctionnalités étendues
Je n'ai toujours pas de réponse concernant ce problème.
Re: Barre de navigation flottante avec fonctionnalités étendues
Message édité avec l'ajout d'un schéma qui pourra peut-être aider. Je vous remercie encore d'avance pour votre aide et vous serez reconnaissante de me décoincer de ce cul-de-sac du "je-ne-sais-pas-faire". ^^
Re: Barre de navigation flottante avec fonctionnalités étendues
J'ai avancé dans la construction de ma barre de navigation. Il manque cependant encore un tas de choses, à commencer par le fait de n'avoir les boutons qu'en images (il semblerait que le Javascript pour changer les noms des liens retire les images de la barre de navigation pour tous les noms qui ont été changé de ceux de base et "Afficher seulement des images dans la barre des liens" n'arrange pas les choses), je n'ai que ceux du centre, et je n'ai pas encore les fonctionnalités que je souhaite (sur "Profil" par exemple et pour avoir une barre de notifications).
Je suis donc coincée à ce stade et j'aimerais beaucoup votre aide. Merci.
Je suis donc coincée à ce stade et j'aimerais beaucoup votre aide. Merci.
Re: Barre de navigation flottante avec fonctionnalités étendues
J'ai du recréer un nouveau forum test et supprimer le Javascript pour remplacer le texte dans la barre de navigation. J'aimerais vraiment un peu d'aide là parce que je me sens vraiment seule et malgré toute ma bonne volonté je sens qu'avec le stress ma motivation s'étiole. :/
EDIT : Je suis vraiment désolée pour le double-post mais on ne peut apparemment pas supprimer ses propres messages. -_-
EDIT : Je suis vraiment désolée pour le double-post mais on ne peut apparemment pas supprimer ses propres messages. -_-
Re: Barre de navigation flottante avec fonctionnalités étendues
bonsoir , bon aller j'ai pas grand chose a faire en ce moment , je vais tenter de vous donné un coup de pouce
il va falloir faire une barre nav personnel ,
(gardé votre css pour le hover de la barre ,il faudra l"adapter au code que je vous donne )
remplacé votre bar nav par ce code
ps:(il est en cour de construction et va évolué )
le css >>
voila pour ce soir .a suivre .
ps: visuel >> http://forum-test-r-max.forumactif.org/ il faudra bien entendu changé les images aussi
j'ai commencé avec ce que j'ai sous la main ..........
ps:2 demain je m'attaque a placé les redirection ,
ps:3 pouvez vous fournir les image numeroté ou pas ?
il va falloir faire une barre nav personnel ,
(gardé votre css pour le hover de la barre ,il faudra l"adapter au code que je vous donne )
remplacé votre bar nav par ce code
ps:(il est en cour de construction et va évolué )
- Code:
<!--barre nav LMDS-->
<table id="cadre">
<tr><td align="left">
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
</td>
<td align="center">
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
</td>
<td align="right">
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
<a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>
</td>
</tr></table>
<!--fin barre nav-->
le css >>
- Code:
/**===cadre barre navigation===**/
#cadre {
background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
height:70px;
width: 100%;
}
voila pour ce soir .a suivre .
ps: visuel >> http://forum-test-r-max.forumactif.org/ il faudra bien entendu changé les images aussi
j'ai commencé avec ce que j'ai sous la main ..........
ps:2 demain je m'attaque a placé les redirection ,
ps:3 pouvez vous fournir les image numeroté ou pas ?
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Donc il s'agit bien de refaire une barre de navigation entièrement personnalisée et d'oublier celle par défaut ? J'aimerais un peu plus d'explications sur ce que je garde ou pas parce que là c'est flou et ça ne fait que causer des bugs. De plus je demande de l'aide pour comprendre et savoir faire quelque chose, pas pour du tout cuit à copier/coller. Le but c'est d'acquérir un réel savoir et de travailler mes connaissances en codage. :/
Je souhaite donc que vous confirmiez pour savoir si j'ai bien compris. Ce que vous me proposez est de mettre à la suite dans le template
Sinon je vais fournir les images numérotées oui.
Je souhaite donc que vous confirmiez pour savoir si j'ai bien compris. Ce que vous me proposez est de mettre à la suite dans le template
- Code:
<a href="URL DU LIEN" alt="NOM DU LIEN"><img src="URL IMAGE BOUTON" /></a>
- Code:
<!-- BEGIN switch_user_logged_in -->
...
<!-- END switch_user_logged_in -->
- Code:
<!-- BEGIN switch_user_logged_out -->
...
<!-- END switch_user_logged_out -->
- Code:
jQuery().ready(function(){
var newmp = $("#i_icon_mini_new_message");
if(!newmp.length) return;
$("#mp").attr('src','URL DE L'IMAGE');
});
- Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
Sinon je vais fournir les images numérotées oui.
Re: Barre de navigation flottante avec fonctionnalités étendues
bonsoir
oui c'est bien cela
oui aussi pour cela
la je ne voie pas le problème une class , une div , peut importe le non , du moment que c'est fonctionnel.
comme dis auparavant c'est une ébauche ,rien n'est fini et définitif, il va falloir y aller petit a petit ...(y' a du taf )
ps: si vos permission sont bien en place c'est balise ne servent a rien
pour cela le temps sera venu de la changer a la fin , quand l'autre sera fonctionnel .
par exemple avec un petit css
et pour finir
a bon habituellement c'est le contraire , et même des fois ,plus de nouvelle de l'auteur ,une fois la réponse obtenue. ... by , by et pas de merci , heureusement que tous le monde n'est pas comme ça.
ps:au vue de votre réponse , je pense arrêter la votre aide , a ce moment la il vous faut plus un aidactif de forumactif .. qui sont bien plus professionnel que moi ,simple amateur de base ...
bonne continuation a vous ,et a bientôt .
membre a écrit:Je souhaite donc que vous confirmiez pour savoir si j'ai bien compris. Ce que vous me proposez est de mettre à la suite dans le template
Code:SÉLECTIONNER LE CONTENU
<a href="URL DU LIEN" alt="NOM DU LIEN"><img src="URL IMAGE BOUTON" /></a>
oui c'est bien cela
membre a écrit:J'ai donc juste à utiliser le positionnement "left", "center", "right" dans la table pour placer mes boutons sur la barre ?
oui aussi pour cela
membre a écrit:Ne puis-je pas garder le nom "navig" (ou éventuellement "navbar") plutôt que "barre nav" pour ce qui se réfère à ma barre de navigation ?
la je ne voie pas le problème une class , une div , peut importe le non , du moment que c'est fonctionnel.
membre a écrit:J'ai aussi ces balises à utiliser normalement pour les boutons qui seront uniquement affichés aux membres :
Code:SÉLECTIONNER LE CONTENU
<!-- BEGIN switch_user_logged_in -->
...
<!-- END switch_user_logged_in -->
Et ceux-ci lorsqu'on est déconnecté, en statut de simple invité.
Code:SÉLECTIONNER LE CONTENU
<!-- BEGIN switch_user_logged_out -->
...
<!-- END switch_user_logged_out -->
comme dis auparavant c'est une ébauche ,rien n'est fini et définitif, il va falloir y aller petit a petit ...(y' a du taf )
ps: si vos permission sont bien en place c'est balise ne servent a rien
si vous n'avez pas la barre Fa toolbar , surement que oui ( a confirmer !)membre a écrit:Et l'ajout de ceci dans les scripts pour le bouton de MP qui se transforme en nouveau MP :
Code:SÉLECTIONNER LE CONTENU
jQuery().ready(function(){
var newmp = $("#i_icon_mini_new_message");
if(!newmp.length) return;
$("#mp").attr('src','URL DE L'IMAGE');
});
membre a écrit:Enfin, créer sa propre barre ne requiert-il pas de cacher la visibilité de la barre par défaut ?
Code:SÉLECTIONNER LE CONTENU
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
pour cela le temps sera venu de la changer a la fin , quand l'autre sera fonctionnel .
par exemple avec un petit css
- Code:
a.mainmenu{display:none;}
et pour finir
membre a écrit: je demande de l'aide pour comprendre et savoir faire quelque chose, pas pour du tout cuit à copier/coller. Le but c'est d'acquérir un réel savoir et de travailler mes connaissances en codage. :/
a bon habituellement c'est le contraire , et même des fois ,plus de nouvelle de l'auteur ,une fois la réponse obtenue. ... by , by et pas de merci , heureusement que tous le monde n'est pas comme ça.
ps:au vue de votre réponse , je pense arrêter la votre aide , a ce moment la il vous faut plus un aidactif de forumactif .. qui sont bien plus professionnel que moi ,simple amateur de base ...
bonne continuation a vous ,et a bientôt .
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
D'accord, merci beaucoup pour ces pistes. Je vais essayer de me débrouiller avec ça déjà et dès que j'aurai quelque chose de prêt j'espère que quelqu'un pourra m'éclairer pour y ajouter les fonctionnalités de la toolbar. Je n'ai pas exemple aucun idée de comment obtenir les effets recherchés avec mes liens et pas le renvoi vers une nouvelle page.
Et oui, je sais bien que la plupart des utilisateurs manquent de manière. A la différence de beaucoup de personnes je ne viens pas demander de l'aide pour un forum en particulier mais pour apprendre à construire certains codes qui me tiennent à coeur. ^^
Et oui, je sais bien que la plupart des utilisateurs manquent de manière. A la différence de beaucoup de personnes je ne viens pas demander de l'aide pour un forum en particulier mais pour apprendre à construire certains codes qui me tiennent à coeur. ^^
Dernière édition par SweetGumiho le Ven 20 Nov 2015 - 21:37, édité 1 fois
Re: Barre de navigation flottante avec fonctionnalités étendues
membre a écrit:A la différence de beaucoup de personnes je ne viens pas demander de l'aide pour un forum en particulier mais pour apprendre à construire certains codes qui me tiennent à coeur. ^^
c'est bien se que j'ai comprit , et ne suis pas votre homme pour ce travail ,
bonne continuation .
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
La solution avec la table ne fonctionne pas du tout comme vous pouvez le voir. Voici la modification de template avec ma barre de navigation personnalisée.
J'ai aussi "perdu" (j'ai enregistré l'ancien template) toute la mise en forme avec le fond, le masquage de la barre, etc. :/
- 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} {NAMESPACE_BBCODE}>
<head>
<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" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_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>
<!-- BEGIN switch_fb_login -->
<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>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<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 elements */
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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des elements 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>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
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}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<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>
<!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(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>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<center><div style="visibility:hidden">{GENERATED_NAV_BAR}</div></center>
<table id="navig">
<tr><td align="left"><a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" /></a>
<a href="http://lmds-test.forumculture.net/laws" alt="Charte de Lois"><img src="http://i.imgur.com/NYjWjBJ.png" /></a>
<a href="http://lmds-test.forumculture.net/glossary" alt="Glossaire"><img src="http://i.imgur.com/0uN4DDk.png" /></a>
<a href="http://lmds-test.forumculture.net/map" alt="Carte"><img src="http://i.imgur.com/j31YCBy.png" /></a>
</td>
<td align="center">
<a href="http://lmds-test.forumculture.net/" alt="Site"><img src="http://i.imgur.com/HOXKZXf.png" /></a>
<a href="http://lmds-test.forumculture.net/forum" alt="Forum"><img src="http://i.imgur.com/lZ3DEmO.png" /></a>
<a href="URL DE VOTRE FORUM" alt="Foire aux Questions"><img src="http://i.imgur.com/hR7LTR1.png" /></a>
<a href="http://lmds-test.forumculture.net/calendar" alt="Calendrier"><img src="http://i.imgur.com/RAXzyt5.png" /></a>
<a href="http://lmds-test.forumculture.net/gallery/index.htm" alt="Galerie"><img src="http://i.imgur.com/ewLtSji.png" /></a>
<a href="http://lmds-test.forumculture.net/memberlist" alt="Aventuriers"><img src="http://i.imgur.com/8mr7Xvs.png" /></a>
<!-- BEGIN switch_user_logged_in --><a id="fa_welcome" alt="Personnage"><img src="http://i.imgur.com/dKPWOSY.png" /></a>
<a href="http://lmds-test.forumculture.net/privmsg?folder=inbox" alt="Courrier"><img src="http://i.imgur.com/p8oYwFo.png" /></a> <!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out --><a href="http://lmds-test.forumculture.net/register" alt="Rejoindre l'aventure"><img src="http://i.imgur.com/TEhsfdg.png" /></a>
<a href="http://lmds-test.forumculture.net/login" alt="Entrer"><img src="http://i.imgur.com/B4WtI4d.png" /></a> <!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in --><a href="http://lmds-test.forumculture.net/login?logout" alt="Sortir"><img src="http://i.imgur.com/YV3JTix.png" /></a> <!-- END switch_user_logged_in -->
</td>
<td align="right">
<a href="http://lmds-test.forumculture.net/search" alt="Rechercher"><img src="http://i.imgur.com/N0tkWDt.png" /></a>
<a href="http://lmds-test.forumculture.net/chatbox/index.forum" alt="Chatbox" target="_blank"><img src="http://i.imgur.com/TOLmm0B.png" /></a>
<a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" /></a> </td>
</tr></table>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<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>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="description_site">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<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 align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<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 align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<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}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
J'ai aussi "perdu" (j'ai enregistré l'ancien template) toute la mise en forme avec le fond, le masquage de la barre, etc. :/
Re: Barre de navigation flottante avec fonctionnalités étendues
bonsoir , normal il faut lui donné une taille a votre bar
- Code:
table#navig{width:100%}
- Code:
#navig{width:100%}
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Merci, les codes ont été ajouté à mon CSS. Le positionnement général est bon, je n'aurais plus qu'à décider d'un espacement entre les boutons et avec les bords extérieurs (petit rappel sur comment faire de ce côté ? parce que j'ai un doute...). Il reste cependant que ni mon fond image, ni mes effets (ombre, transition, masquage, hover, etc.) ne fonctionnent. :/
Re: Barre de navigation flottante avec fonctionnalités étendues
pour mettre un ecart entre chaque bouton , vous pouvez utilisé ceci
- Code:
cela crée un espace transparent , plusieurs a la suite crée un plus grand espace
- Code:
pour inclure l'image de fond >
- Code:
table#navig{
background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
height:70px;
width: 100%;
}
vous avez le codage utilisé pour les transitions , que je regarde .
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Il y a un interstice étrange (le blanc) entre mon image de fond et la ligne marron que j'avais créé en bas pour mon hover.
Mon CSS :
Le code Javascript sur toutes les pages :
J'avais suivi le tutoriel suivant : Une barre de navigation fixée qui joue à chat ! en adaptant seulement la mise en forme dans le CSS. ^^
Mon CSS :
- Code:
/*HEADER*/
.maintitle h1 {
display: none;
margin: 0;
padding: 0;
}
.description_site {
display: none;
}
/*NAVIGATION*/
table#navig {
position: fixed;
z-index: 999;
top: 0px;
width: 100%;
height: 60px;
background-image: url(http://i.imgur.com/wF4cpOP.png);
background-repeat: repeat-x;
border-bottom: 6px solid #3A200C;
box-shadow: 0 2px 2px black;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
}
table#navig li {
display: inline-block;
padding: 5px; /*marge autour des liens*/
}
table#navig a {
font-family: 'Alegreya SC';
font-size: 15px;
color: #fff;
margin: 5px;
line-height: 50px;
}
a.mainmenu[href="/groups"] {
display: none;
}
#navig{
width:100%
}
.offmenu {
transform: translateY(-90%);
-moz-transform: translateY(-90%);
-webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}
/*CORPS DU FORUM*/
body {
background-color: transparent ;
}
.bodyline {
border: none ;
}
Le code Javascript sur toutes les pages :
- Code:
(function(){
var navig = $('.navig');
var windowBrowser = $(window);
var lastScrollTop = windowBrowser.scrollTop();
windowBrowser.scroll(function(){
var st = $(this).scrollTop();
var offmenuLength = $('.offmenu').length;
if (st > lastScrollTop+40){
if(!offmenuLength) navig.addClass('offmenu');
} else if(st+40 < lastScrollTop) {
if(offmenuLength) navig.removeClass('offmenu');
}
lastScrollTop = st;
});
navig.mouseenter(function(){
if($('.offmenu').length) navig.removeClass('offmenu');
});
})();
J'avais suivi le tutoriel suivant : Une barre de navigation fixée qui joue à chat ! en adaptant seulement la mise en forme dans le CSS. ^^
Re: Barre de navigation flottante avec fonctionnalités étendues
bonjour , c'est cette ligne qui crée l'interstice
je teste votre js , et je revient ,
ps; je ne voit pas le tuto sur le site , il faut être enregistré .
vous avez encore votre code html de départ , pour que je voit ou est placé la class (.offmenu),
- Code:
background-repeat: repeat-x;
je teste votre js , et je revient ,
ps; je ne voit pas le tuto sur le site , il faut être enregistré .
vous avez encore votre code html de départ , pour que je voit ou est placé la class (.offmenu),
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Il n'y avait pas besoin de placer la classe "offmenu" pour que ça fonctionne. Apparemment c'est une classe par défaut qui permet de cacher cette barre de navigation. Cela fonctionnait très bien sur le menu de base avant que je me mette à créer un menu personnalisé dans une table.
Re: Barre de navigation flottante avec fonctionnalités étendues
sur le codage de la barre je vous avez mis une id #navig hors sur le script c'est une class .navig , mais même en changeant ceux ci ,aprés test , le script ne fonctionne pas , c'est assez étrange .
il dois manqué quelques chose , vous n'avez pas fait de sauvegarde du codage complet avant modification ?
il dois manqué quelques chose , vous n'avez pas fait de sauvegarde du codage complet avant modification ?
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Voici ce que j'avais au début qui marchait simplement avec la barre de navigation normale :
Feuille de style CSS :
Template overall_fotter_end :
Voilà.
Feuille de style CSS :
- Code:
/*HEADER*/
.maintitle h1 {
display: none;
margin: 0;
padding: 0;
}
.description_site {
display: none;
}
/*NAVIGATION*/
.navig {
position: fixed;
z-index: 10;
top: 0px;
width: 100%;
height: 50px;
background-image: url(http://i.imgur.com/wF4cpOP.png);
background-repeat: repeat-x;
border-bottom: 6px solid #3A200C;
box-shadow: 0 2px 2px black;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
}
.navig li {
display: inline-block;
padding: 5px; /*marge autour des liens*/
}
.navig a {
font-family: 'Alegreya SC';
font-size: 15px;
color: #fff;
margin: 5px;
line-height: 50px;
}
a.mainmenu[href="/groups"] {
display: none;
}
.offmenu {
transform: translateY(-90%);
-moz-transform: translateY(-90%);
-webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}
Template overall_fotter_end :
- Code:
<!-- BEGIN html_validation -->
<!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">
<body>
<table>
<tr>
<td>
<div>
<div>
<div>
<!-- END html_validation -->
</div>
</div>
<!-- BEGIN switch_footer_links -->
<div align="center">
<div class="gen">
<!-- BEGIN footer_link -->
<!-- BEGIN switch_separator --> | <!-- END switch_separator -->
<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
<!-- END footer_link -->
</div>
</div>
<!-- END switch_footer_links -->
</div>
{PROTECT_FOOTER}
</td>
</tr>
</table>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : {switch_facebook_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
if ($('a#logout'))
{
var lien_redir = $('a#logout').attr('href');
if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
{
document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
}
}
});
$(document).ready( function() {
$('a#logout').click( function() {
FB.logout();
} );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
{HOSTING_JS}
</body>
</html>
- 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} {NAMESPACE_BBCODE}>
<head>
<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" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_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>
<!-- BEGIN switch_fb_login -->
<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>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<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>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<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 elements */
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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des elements 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>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
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}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(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
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<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>
<!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(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>
<!-- END google_analytics_code -->
</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>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<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>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="description_site">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<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 align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<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 align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<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}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Voilà.
Re: Barre de navigation flottante avec fonctionnalités étendues
ok merci je regarde de plus prés
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Ça marche. Merci beaucoup.
Re: Barre de navigation flottante avec fonctionnalités étendues
re , bon je me suis inscrit sur le forum que vous mentionné , j'ai instalé ,modifier et
http://forum-test-r-max.forumactif.org/
regardé !
http://forum-test-r-max.forumactif.org/
regardé !
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Cela me semble parfait. Il y aura juste à modifier l'écart entre les boutons. Par contre du fait de la présence de la toolbar je ne sais pas s'il y a un petit bord qui dépasse et je ne peux pas faire réapparaître la barre au passage de la souris en haut de l'écran.
Re: Barre de navigation flottante avec fonctionnalités étendues
vous avez une toolbar sur votre forum ?, moi elle est presente mais ne gêne pas la fonction du hover , quand la toolbar et cacher
question >>sur mon forum test en passant la sourie ,toolbar cacher ,la barre ne descend pas ? chez vous ,
edit>> pour espacé les images rajouter a la fin du lien image ( hspace="5"
et modifier la valeur 5
question >>sur mon forum test en passant la sourie ,toolbar cacher ,la barre ne descend pas ? chez vous ,
edit>> pour espacé les images rajouter a la fin du lien image ( hspace="5"
- Code:
<a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" hspace="5"/></a>
et modifier la valeur 5
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Ah si, je n'avais pas pensé à cacher la toolbar. Ça marche très bien comme je veux. Je n'ai pas de toolbar sur mon forum sinon mais je veux inclure des fonctionnalités de la toolbar à ma barre de navigation, c'est le but principal de cette demande d'aide. Un des forums où cela a été fait par exemple est Never Utopia si vous connaissez, malheureusement je n'ai toujours pas de réponse du codeur là-bas qui aurait fait la manipulation.
Re: Barre de navigation flottante avec fonctionnalités étendues
bon ont reprend alors , je vous donne les éléments que j'ai installer
le code template overall_header
le css
le js
le code template overall_header
- Code:
<!--barre nav LMDS-->
<table class="navig">
<tr><td align="left">
<a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/laws" alt="Charte de Lois"><img src="http://i.imgur.com/NYjWjBJ.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/glossary" alt="Glossaire"><img src="http://i.imgur.com/0uN4DDk.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/map" alt="Carte"><img src="http://i.imgur.com/j31YCBy.png" /></a>
</td>
<td align="center">
<a href="http://lmds-test.forumculture.net/" alt="Site"><img src="http://i.imgur.com/HOXKZXf.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/forum" alt="Forum"><img src="http://i.imgur.com/lZ3DEmO.png" hspace="5"/></a>
<a href="URL DE VOTRE FORUM" alt="Foire aux Questions"><img src="http://i.imgur.com/hR7LTR1.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/calendar" alt="Calendrier"><img src="http://i.imgur.com/RAXzyt5.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/gallery/index.htm" alt="Galerie"><img src="http://i.imgur.com/ewLtSji.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/memberlist" alt="Aventuriers"><img src="http://i.imgur.com/8mr7Xvs.png" hspace="5"/></a>
<!-- BEGIN switch_user_logged_in --><a id="fa_welcome" alt="Personnage"><img src="http://i.imgur.com/dKPWOSY.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/privmsg?folder=inbox" alt="Courrier"><img src="http://i.imgur.com/p8oYwFo.png" hspace="5"/></a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out --><a href="http://lmds-test.forumculture.net/register" alt="Rejoindre l'aventure"><img src="http://i.imgur.com/TEhsfdg.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/login" alt="Entrer"><img src="http://i.imgur.com/B4WtI4d.png" hspace="5"/></a> <!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in --><a href="http://lmds-test.forumculture.net/login?logout" alt="Sortir"><img src="http://i.imgur.com/YV3JTix.png" hspace="5"/></a> <!-- END switch_user_logged_in -->
</td>
<td align="right">
<a href="http://lmds-test.forumculture.net/search" alt="Rechercher"><img src="http://i.imgur.com/N0tkWDt.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/chatbox/index.forum" alt="Chatbox" target="_blank"><img src="http://i.imgur.com/TOLmm0B.png" hspace="5"/></a>
<a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" hspace="5"/></a> </td>
</tr></table></div>-->
<!--fin barre nav-->
le css
- Code:
/***********************************
*
* Notre barre de navigation
*
***********************************/
.navig{
background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
height:60px;
width: 100%;
}
.navig {
position: fixed; /*Fixe le contenu*/
top: 0; left: 0; /*Défini la position de la navigation*/
z-index: 10; /*Permet de passer au dessus de tous les éléments*/
width: 100%; /*Défini la largeur de la barre*/
background: #1e1e1e; /*Couleur du fond*/
padding: 10px 0; /*Pour éviter que le contenu ne colle en haut et en bas*/
text-align: center; /*Centre le contenu*/
border-bottom: 6px solid #3a200c; /*Le petit liseret vert que l'on laissera déborder*/
font: 300 1.5rem 'Oswald'; /*Notre sublime typographie !*/
text-transform: uppercase; /*Met tout le texte en majuscule*/
transition: all 0.7s ease; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; /*Permet d'adoucir la transition*/
}
/*C'est ici qu'il faudra jouer avec le -90% si vous désirez changer la taille de la barre et que le rendu ne correspond plus à vos attentes*/
.offMenu {
transform: translateY(-90%); -moz-transform: translateY(-90%); -webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}
/**************/
le js
- Code:
(function(){
var navig = $('.navig');
var windowBrowser = $(window);
var lastScrollTop = windowBrowser.scrollTop();
windowBrowser.scroll(function(){
var st = $(this).scrollTop();
var offMenuLength = $('.offMenu').length;
if (st > lastScrollTop+40){
if(!offMenuLength) navig.addClass('offMenu');
} else if(st+40 < lastScrollTop) {
if(offMenuLength) navig.removeClass('offMenu');
}
lastScrollTop = st;
});
navig.mouseenter(function(){
if($('.offMenu').length) navig.removeClass('offMenu');
});
})();
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Tout est installé. Par contre j'ai un problème avec le changement de la hauteur de la barre qui ne semble pas affecter le rendu. Elle est toujours trop haute.
Ce qu'il reste à faire donc pour aboutir à ce que je recherche :
1- Texte qui s'affiche dans une bulle au survol des boutons (Guide, Charte de Lois, Glossaire, Carte, Page d'Accueil, Foire Aux Questions, Calendrier, Galerie, Aventuriers, Personnage, Courrier, Rejoindre l'aventure, Entrer/ Sorti, Chatbox, Rechercher, Notifications).
2- Boutons dont l'image change au survol + changement de l'image du boutons "Courrier" quand nouveau message dans la messagerie.
3- Clic sur le bouton de profil "Personnage" (la tête de mort) qui a le même effet que clic sur "Bienvenue 'Nom d'utilisateur'" dans la toolbar.
4- Boutons de "Notifications" même effet que les notifications de la toolbar.
Voilà. Merci encore mille fois pour ton aide.
EDIT : J'ai trouvé ce sujet pour les deux derniers points, je ne sais pas si cela peut aider : https://forum.forumactif.com/t364767-fusionner-la-barre-de-navigation-et-la-toolbar
Ce qu'il reste à faire donc pour aboutir à ce que je recherche :
1- Texte qui s'affiche dans une bulle au survol des boutons (Guide, Charte de Lois, Glossaire, Carte, Page d'Accueil, Foire Aux Questions, Calendrier, Galerie, Aventuriers, Personnage, Courrier, Rejoindre l'aventure, Entrer/ Sorti, Chatbox, Rechercher, Notifications).
2- Boutons dont l'image change au survol + changement de l'image du boutons "Courrier" quand nouveau message dans la messagerie.
3- Clic sur le bouton de profil "Personnage" (la tête de mort) qui a le même effet que clic sur "Bienvenue 'Nom d'utilisateur'" dans la toolbar.
4- Boutons de "Notifications" même effet que les notifications de la toolbar.
Voilà. Merci encore mille fois pour ton aide.
EDIT : J'ai trouvé ce sujet pour les deux derniers points, je ne sais pas si cela peut aider : https://forum.forumactif.com/t364767-fusionner-la-barre-de-navigation-et-la-toolbar
Re: Barre de navigation flottante avec fonctionnalités étendues
Sweet a écrit:Tout est installé. Par contre j'ai un problème avec le changement de la hauteur de la barre qui ne semble pas affecter le rendu. Elle est toujours trop haute.
comment ça , je ne comprend pas !
Invité- Invité
Re: Barre de navigation flottante avec fonctionnalités étendues
Je n'arrive pas à réduire la hauteur de la barre, le height du CSS ne change rien.
Re: Barre de navigation flottante avec fonctionnalités étendues
supprimer la ligne
dans le cas image elle ne sert pas et bloque le reglage de la hauteur
ensuite ajouté
pour modifier la taille des images si nécessaire , la elle sont en 45x45 .
et modifier cette ligne
en
- Code:
padding: 10px 0; /*Pour éviter que le contenu ne colle en haut et en bas*/
dans le cas image elle ne sert pas et bloque le reglage de la hauteur
ensuite ajouté
- Code:
.navig img{width:35px;height:35px;padding-top:5px;}
pour modifier la taille des images si nécessaire , la elle sont en 45x45 .
et modifier cette ligne
- Code:
height:60px;
en
- Code:
height:40px;
Invité- Invité
Page 1 sur 2 • 1, 2
Sujets similaires
» Problème avec la barre de navigation flottante
» Barre de navigation flottante modifée avec effets
» [ModernBB] bug avec la barre de navigation flottante et les règlements
» Soucis avec la barre de navigation flottante au dessus de la toolbar
» Barre de navigation flottante
» Barre de navigation flottante modifée avec effets
» [ModernBB] bug avec la barre de navigation flottante et les règlements
» Soucis avec la barre de navigation flottante au dessus de la toolbar
» Barre de navigation flottante
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum