Le Deal du moment : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

Demande d'informations

Demande d'informations Empty Mar 1 Mar - 22:12
Bonsoir ou bonjour en fonction de l'heure à laquelle vous lirez ce court message. Je voulais juste vous demander avant de faire une bêtise si une commande de template header (par la je veux dire avec création d'une bannière et repositionnement de la barre de navigation) est possible ou non ? car j'ai remarqué que les commandes de header était en rouge dans vos règles mais comme cela ferai parti du template à modifier (barre de navigation) je me demandais si cela serait possible (je fournirai les images si cela s'avère possible) ?

En vous remerciant grandement.

Bien à vous
Revenir en haut Aller en bas
Demande d'informations Empty Mer 2 Mar - 23:27
Bonsoir,

Le repositionnement de la barre de navigation est une commande envisageable cependant le header/bannière ne saurait y être représenté qu'en une simple image indiquant ses dimensions optimales.
Revenir en haut Aller en bas
Demande d'informations Empty Jeu 3 Mar - 23:39
Bonsoir,

Merci pour votre réponse. Est-il possible de me fournir le code html et css pour que ma barre de navigation se retrouve en haut du forum ? Il faudrai que celle-ci soit situé sur le haut du forum avec une ligne de couleur qui fait tout l'écran du forum et une bordure de quelques pixels de largeur sur le dessous. Est-il également possible que lorsque l'on passe la souris dessus, le texte change de couleur et que si on descend vers le bas du forum, la barre de navigation descende avec mais en restant au dessus de la page ?

Est-il possible aussi de me fournir le code pour mettre une image en fond de page et que celle-ci s'adapte à la taille des écrans et qu'elle soit fixe sur le haut du forum lorsque l'on descend ?

D'avance je vous remercie pour votre travail

A bientôt
Revenir en haut Aller en bas
Demande d'informations Empty Sam 5 Mar - 6:04
I. Adaptation des codes présentés sur le FdF.

Remplacer les lignes 273 à 277 du template overall_header par :

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

Créer un nouveau javascript :
Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript > Créer un nouveau javascript > Placement : sur toutes les pages

Code:
  (function() {
      if (!window.FA) window.FA = {};
      if (FA.Nav) {
        if (window.console && console.warn) console.warn('FA.Nav has already been defined');
        return;
      }
    
      FA.Nav = {
        
        // TARGET NODES POUR CHAQUE VERSION
        // PHPBB2  : ".bodyline > table + table"
        // PHPBB3  : "#page-header .navlinks"
        // PUNBB    : "#pun-navlinks"
        // INVISION : "#submenu"
        targetNode : ".bodyline > table + table",
        
        customNav : '', // custom navlinks
        
        keepDefault : true, // keep the default navlinks
        collapsible : false, // show hide button
        
        
        // offset states
        offsets : {
          tbVisible : {
            bottom : 30,
            top : '30px'
          },
          
          tbHidden : {
            bottom : 0,
            top : '-30px'
          },
          
          toggler : '30px'
        },
        
        activeOffset : {}, // active offset for the sticky nav
        
        visible : false, // sticky nav is visible
        
        // check the state of the static nav
        checkState : function() {
          if (!FA.Nav.animating) {
            var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
          
            if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
              FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
              FA.Nav.visible = true;
            } else if (!hidden && FA.Nav.barSticky.style.top != '0px') {
              if (FA.Nav.toggler) FA.Nav.toggler.style.top = '0px';
              FA.Nav.barSticky.style.top = '0px';
              FA.Nav.visible = false;
            }
          }
        },
        
        animating : false, // sticky nav is animating
        
        // animate the sticky nav when the toolbar is toggled
        animate : function() {
          if (FA.Nav.visible) {
            FA.Nav.animating = true;
            FA.Nav.barSticky.style.transition = 'none';
          
            $(FA.Nav.barSticky).animate({
              top : FA.Nav.activeOffset.top
            }, function() {
              FA.Nav.barSticky.style.transition = '';
              FA.Nav.animating = false;
              FA.Nav.checkState();
            });
          }
        },
        
        // toggle sticky navigation and remember preference via cookies
        toggle : function() {
          if (FA.Nav.barSticky.style.width == '100%') {
            my_setcookie('fa_sticky_nav', 'hidden');
            FA.Nav.barSticky.style.width = '0%';
          } else {
            my_setcookie('fa_sticky_nav', 'shown');
            FA.Nav.barSticky.style.width = '100%';
          }
          return false;
        }
        
      };
      
      $(function() {
        // set default offsets based on toolbar state
        FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
        if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
        
        // find the static nav
        FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
        
        if (FA.Nav.barStatic) {
          $(function() {
            FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
            if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
            FA.Nav.barSticky.id = 'fa_sticky_nav';
            FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
            FA.Nav.barSticky.style.top = '0px';
              
            document.body.appendChild(FA.Nav.barSticky); // append the sticky one
              
            
            window.onscroll = FA.Nav.checkState; // check state on scroll
            FA.Nav.checkState(); // startup check
              
            // animate sticky nav and change offsets when the toolbar is toggled
            $('#fa_hide').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
              FA.Nav.animate();
            });
            
            $('#fa_show').click(function() {
              FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
              FA.Nav.animate();
            });
          });
        }
      });
    }());

Partie CSS :
Code:
/* BARRE DE NAVIGATION */
#fa_sticky_nav {
position:fixed; right:0; z-index:10;
height:30px; overflow:hidden;
text-align:center; font-size:0;
background:teal; border-bottom:3px solid #222 !important; /* MODIFIABLE */
transition:top 200ms linear, width 600ms ease-in-out; -webkit-transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li {
display:inline;
}
/* LIEN NAVIGATION */
#fa_sticky_nav a.mainmenu {
display:inline-block;
height:30px; padding:0 10px; line-height:30px;
color:#CCC; /* MODIFIABLE */
font-size:12px; font-weight:bold; text-transform:uppercase;
transition:200ms; -webkit-transition:200ms;
}
/* SURVOL LIEN NAVIGATION */
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
color:#FFF; /* MODIFIABLE */
}
/* BARRE D'OUTILS CACHEE = TOGGLER */
#fa_toolbar_hidden {
border-radius:0 !important;  border-right:0; border-top:0;
border:3px solid #222; /* MODIFIABLE */
}
/* POST OFFSET FIX */
.post div[style*="-30px;"] {
top:-60px !important;
}
/* BARRE DE NAVIGATION DISSIMULEE */
#navSIT {
position:absolute; top:0; left:0;
width:100%; height:5px; overflow:hidden; opacity:0;
}
.mainmenu img{
display:none;
}

II. Partie CSS correspondant à l'application d'une bannière en fond :
Code:
/* BANNIERE EN FOND */
body {
margin:auto; width:100%;
background-image:url(); /* APPLIQUER L'URL DE LA BANNIERE */
background-repeat:no-repeat; background-position:top center; background-attachment:scroll;
}
/* BANNIERE TRANSPARENTE */
#i_logo {
height:150px; /* MODIFIER EN FONCTION DE LA HAUTEUR DE L'IMAGE DE FOND */
}
Revenir en haut Aller en bas
Demande d'informations Empty Lun 7 Mar - 10:11
Super un grand merci exactement ce qu'il me fallait alien
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum