[Problème] Mettre Header et footer sur toute la largeur de la page

[milou07]

"concerne joomla 3.. mauvaise section, désolé "


Bonjour,

Je fais des essais pour essayer de comprendre comment ça marche...

Avec le thème JSN Metro (free):

http://demo.joomlashine.com/joomla-templates/jsn_metro/pro/index.php

j'essaie de mettre un header noir qui fasse toute la largeur du site, sans modifier la largeur du corps du site...

#jsn-header {
    background: black;
    width: 100%;
    margin-bottom: 10px;
    float: left;

Si je fais ça, la bande noire fait la largeur du corps du site... j’imagine que le div header est défini par d'autres attributs, mais je ne trouve pas ou...

Peut-être qu'un oeil averti pourra me donner une piste?

En vous remerciant par avance pour votre aide!!

[toffffe]

Re : Mettre Header et footer sur toute la largeur de la page

Salut avec l'inspecteur de chrome on voit qu'elle hérite de la largeur d'une div autour : jsn-page

[milou07]

Re : Mettre Header et footer sur toute la largeur de la page

Bonjour,

Merci de ce retour!!

En effet, elle hérite de la largeur jsn-page, width: 960 px;

Le problème, c'est que je cherchais à "affranchir" jsn-header de cet héritage pour le passer à 100%

Or je devais procéder à l'inverse, à savoir passer jsn-page en width: 100% et remettre tout le "corps du site à 960px; ainsi seul le header et le footer restent défini à width: 100% (toujours hérité de jsn-page)

[milou07]

Re : Mettre Header et footer sur toute la largeur de la page

En revanche, dans la pratique, j'ai un problème,

jsn-page est défini par le fichier "template.css"
mais aussi par un fichier "inline" qui prend le dessus... si j'ai bien compris, cela signifie que les attributs de jsn-page sont données par ailleurs directement dans le code html.

1ère solution: modifier le css en rajoutant "!important" derrière l'attribut width, ainsi, l'attribut donné par le fichier template.css "prend le dessus" sur le fichier "inline"... ça marche, mais je me doute qu'il y a mieux

2ème solution: retrouver le fichier html ou php qui contient cette indication et le modifier "à la source" mais j'avoue que je ne le retrouve pas... j'ai ouvert les fichiers de template un par un mais je n'ai pas vu...
Y a-t-il un moyen simple depuis firebug de retrouver le fichier html correspondant à ce fichier inline??

Un grand merci d'avance!

[milou07]

Re : Mettre Header et footer sur toute la largeur de la page

Alalalala vraiment, je comprend pas.. je m'en remet à votre compassion, pleaaasee!!!

Si j'examine la page avec firefox, il m'indique :

Pour jsn-page, les attributs sont les suivants:

Fichier: Inline:24

#jsn-page,
#jsn-pos-topbar {
width: 960px;
min-width: 960px;

ou alors:

Fichier: template.css:223

#jsn-page {
color: #3D3D3D;
text-align: left;
width: 100%;
margin: ;
}

Et donc, la mise en forme héritée de "Inline" prend le dessus sur celle de template.css

J'ai fait une recherche avec #jsn-page dans tous les fichiers du site; le seul fichier avec du code, c'est template_custom.php
or à l'interieur de celui-ci, je trouve ceci:

{
$customCss .= '
#jsn-page,
#jsn-pos-topbar {
width: ' . $doc->customWidth . ';
min-width: ' . $doc->customWidth . ';
}';

customCss... donc ça signifierait que width et min-width sont donnés par un autre fichier css??

Alors j'ai cherché dans les autres fishiers css que renvoyait ma recherche (contenant #jsn-page) et rien de plus..

ça vient bien de quelque part ce width: 960px; !!!
Il y a bien un fichier qui lui dit de ne pas "écouter" le fichier template.css.... c'est obligatoirement marqué quelque part, non????!!!
J'ai beau essayer, je n'arrive pas à comprendre la logique,

Alors c'est fait, j'ai rajouté "!important" à la ligne width: 100% dans mon fichier template.css...
ça fonctionne, mais c'est du bricolage... et ça m'embête de ne pas comprendre

Alors s'il vous plait, j'en appelle à une âme charitable; un peu d'aide il me faudrait.

Merci d'avance!

[lefabdu51]

Re : Mettre Header et footer sur toute la largeur de la page

style inline = paramètres d un module dans le cas d un module... paramétre du template dans le cas du template.

Donc fait un tour dans extensions > gestion des templates > clic sur jsn metro (colonne de gauche) et voir dans les onglets qui apparaiisent si tu n as pas un reglage a modifier.