Si vous voulez avoir un graphique, une barre ou n'importe quoi qui s'étende entièrement à travers l'écran et non seulement à travers la section conteneur, comme dans le site monetize.zemplate.com, vous avez besoin de passer par quelques étapes:
Étape 1: Créer un <div> qui se trouve en dehors de la zone<div>.
Ouvrez le fichier index.php qui se trouve juste sous le répertoire templates -> protostar avec un éditeur de texte.
Créez une sauvegarde de index.php et nommez-le quelque chose comme index-2-6-14.php
Dans le fichier d'origine index.php, ajoutez un nouveau <div></div> au-dessous de la balise <div class="body">et au-dessus de <div>
<div> <div id="top-bar"> <div id="top-bar-contents"><p>C'est le truc que je veux mettre dans la barre supérieure</p></div> </div> <div> ...
Enregistrez ce fichier et envoyez-le vers les fichiers de votre site à la même place dans la structure de répertoire.
Étape 2: Ouvrez votre feuille de style CSS personnalisée et ajoutez un style pour cette zone
#top-bar {
width: 100%;
height: 50px;
background: #999999;
}
Maintenant, vous verrez que vous avez une barre qui traverse complètement l'écran. S'il vous arrive de voir que cette top-bar n'atteint pas tout les bords de l'écran, c'est peut-être parce qu'il y a un padding appliqué à la balise <body>. Recherchez-le avec un programme comme Firebug et créez une déclaration CSS qui remplace ce padding.
Ajouter une position personnalisée à une barre qui prend toute la page
Maintenant si vous voulez mettre une position personnalisée à l'intérieur de ce top-bar, vous devrez faire quelques étapes de plus.
Étape 3: Créer une position personnalisée dans votre template protostar.
Ouvrez templateDetails.xml dans le répertoire templates -> protostar avec un éditeur de texte.
Créez une sauvegarde de ce fichier, nommez-le quelque chose comme templateDetails-2-6-14.xml
Dans le fichier d'origine templateDetails.xml, dans les balise <positions> ajouter une nouvelle ligne.
<positions>
<position>top-bar-content</position>
...
Enregistrez et fermez ce fichier et envoyez-le vers les fichiers de votre site au même endroit.
Étape 4: Créez un endroit pour cette position dans le fichier index.php.
Avec un éditeur de texte, ouvrez le fichier index.php que vous avez utilisé à l'étape 1.
Ajoutez ces lignes dans <div id="top-bar"></div> :
<div id="top-bar"> <div id="top-bar-content"> <jdoc:include type="modules" name="top-bar-content" style="none" /> </div> </div>
Enregistrez et fermez ce fichier et envoyez-le vers les fichiers de votre site au même endroit. N'oubliez pas que vous avez déjà créé une sauvegarde de celui-ci à l'étape 1.
Etape 5 : Dans votre menu d'administration Joomla 3, vous pouvez maintenant assigner des modules, comme votre Logo, une zone de recherche ou votre navigation à cette position.
Ouvrez le module que vous voulez placer dans cette position dans Extensions -> Modules. Si vous cliquez sur la liste déroulante de positions vous devriez voir votre nouvelle position dans la liste sous Protostar.
Étape 6: Styliser le div top-bar-content pour le garder au centre de son <div> parent
#top-bar-content {
width: 960px;
margin: 0 auto;
}
Notez qu'avec le site Zemplate Monitize, la section entière <header> a été déplacée au-dessus du <div class="container">. L'en-tête s'étend sur la totalité de l'écran. Le contenu dans l'en-tête reste au centre de l'écran car il est contenu dans un <div> supplémentaire au sein de la zone d'en-tête et stylisé avec width: et margin: 0 auto;.
