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;.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels