https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

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

Ajouter un Commentaire