Jump to content

[Résolu]Background-Color Dépassant De Chaque Côté Au Milieu De La Page Et Footer De La Largeur De...

PrestyNews
 Share

Recommended Posts

PrestyNews Newbie

PrestyNews

Posted
Posted (edited)

Bonjour,

 

Je viens de lire le topic précédent de GingerAle, que j'ai d'ailleurs trouvé très instructif ! ;)

 

Maintenant, je me demandais s'il était possible d'avoir plusieurs background-color au-dessus du background-color principal ?

J'aimerais aboutir à des couleurs de fond différentes pour le pied de page et pour le milieu de page. Un peu comme ce site web : http://www.quicktent.fr/

 

J'ai déjà fait quelques tests avec de nouvelles <div>, sans succès. :unsure: Je ne trouve pas où les placer dans toutes mes pages PHP.

 

Est-ce que quelqu'un saurait m'aider s'il-vous-plaît ?

 

J'utilise le thème de base de Prestashop 1.5.3.1.

Edited by PrestyNews (see edit history)
Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted (edited)

Pour faire simple, le site que vous montrez est sous joomla, on est pas vraiment sur la même structure:

dans votre header.tpl ajouter avant <div id="page" class="container_9 clearfix">

 <div id="fond-footer">
 <div id="fond-header">

dans le global.css:

#fond-footer {
background: votre couleur;
height: votre height;
}
#fond-header {
background: votre couleur;
height: votre height;
}

ligne 10 du global.css ajouter un background au html.

 

ca devrait le faire.

Edited by Muche (see edit history)
  • Like 1
Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted

Désolé je suis allé un peu vite:

Vous créez un image de 5px de large et de la hauteur souhaitée du footer et la basculez dans le dossier img du thème

Vous insérez ce code dans le CSS:

#fond-footer {
background:transparent url(../img/votre_image.jpg) repeat-x bottom center;
}

! Ne pas assigner de hauteur !

Vous pouvez mettre une image large si voule souhaitez et fair pareil pour le header en remplaçant bottom par top

  • Like 1
Link to comment
Share on other sites
PrestyNews Newbie

PrestyNews

Posted
  • Author
Posted

Bonjour Muche,

 

Alors j'ai testé votre méthode, mais cela ne fonctionne pas pour le footer.

Je me demande donc s'il ne serait pas possible de l'utiliser pour insérer une bande de couleur, par exemple, en background de milieu de page en plus du background principal.

C'est-à-dire avoir notre balise html renseignée : 

html{color:#000;background:#000000;}

Ce qui nous donne alors la couleur de fond principale. Et pas dessus, intégrer seulement une bande de couleur au milieu et de la largeur de l'écran.

 

Je ne sais pas si je me fais bien comprendre :unsure:

Link to comment
Share on other sites
  • 3 weeks later...
MasterS Newbie

MasterS

Posted
Posted

Sa marche nickel pour le header, par contre je n’arrive pas à mettre le footer avec une couleur qui prenne toute la largeur. Pourriez-vous svp expliquer en détail la manip à faire pour le footer, ce serait super car avec la version 1.5.3.1 c’est une véritable galère pour les non avertis… :)

Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted

Vous créez un image de 5px de large et de la hauteur souhaitée du footer correspondant à la couleurs souhaitée et la basculez dans le dossier img du thème

Vous insérez ce code dans le CSS:

#fond-footer {
background:transparent url(../img/votre_image.jpg) repeat-x bottom center;
}

 

! Ne pas assigner de hauteur !

Vous pouvez mettre une image large si voule souhaitez et fair pareil pour le header en remplaçant bottom par top.

 

Dans le header.tpl

<div id= "fond-footer">

Link to comment
Share on other sites
MasterS Newbie

MasterS

Posted
Posted

Merci pour réponse rapide, en fait j’avais déjà vu votre post précédent indiquant ces deux modifications à effectuer seulement je ne sais pas où placer le code dans le css et le tpl.

 

Où insérer ce code :

#fond-footer {
background:transparent url(../img/mon_image.jpg) repeat-x bottom center;
}

 

Dans le fichier global.css :

/* ************************************************************************************************
 FOOTER
************************************************************************************************ */
#footer {
color:#fff;
background:#667c21
}
.blockcategories_footer,
#footer .myaccount ,
#block_various_links_footer,
#social_block,
#block_contact_infos {
 float:left;
 width:175px
}
.blockcategories_footer {margin-left:0}
#footer .title_block {
padding-bottom: 10px;
text-transform:uppercase
}
#footer .title_block ,
#footer .title_block  a {
font-weight:normal;
font-size:14px;
color:#fff
}
#footer a {color:#fff}
#footer a:hover {text-decoration:underline}
#footer ul {list-style-type:none}
#footer li {padding:7px 0}
#footer li a {color:#fff}
#footer .myaccount {padding: 15px 10px}
#footer .myaccount .title_block, #footer .myaccount h4 {
padding:0 0 10px 0;
background:none;
text-shadow:none
}
#footer .myaccount .favoriteproducts img,
#footer .myaccount .lnk_wishlist img {display:none}

 

Et où insérer de code :

<div id= "fond-footer">

 

Dans le fichier footer.tpl :

<!-- Footer -->
  <div id="footer" class="grid_9 alpha omega clearfix">
   {$HOOK_FOOTER}
   {if $PS_ALLOW_MOBILE_DEVICE}
 <p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
   {/if}
  </div>
 </div>
{/if}
</body>
</html>

 

Merci d'avance pour votre aide

Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted

Bonjour,

J'ai un souci avec le background et presque la même adaptation du header & footer. avant de changer de code, j'aimerais savoir si vous auriez un idée de solution de mon souci.

 

Le background se trouve tout en haut et prend la hauteur de mon .png transparent gris.

voici un screen:

 

Merci.

 

post-21854-0-46686500-1363048758_thumb.jpg

Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted (edited)

Je suis pas sur d'avoir bien compris:

background:url(../img/bg.jpg) 50% 150px repeat-x transparent;

 

les 50% sont le center

les 150px le height du header qui positionne le bg.jpg

 

Bonjour,

Merci de vote réponse rapide!

 

ça ne fonctionne pas :/ le bg.jpg disparait du coup.

 

- La barre grise du header 100% est un .PNG (50x50px)

- Mon backgorund body bg.JPG (1900x1200px)

 

Je dois avoir erreur de code dans mon header.tpl ...

 

Ou le souci est du fait que le Homeslider est été ajouté dans le TOP OF PAGE? (http://mypresta.eu/e...prestashop.html)

Edited by Vinc3nzo (see edit history)
Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted (edited)

si c'est une image pleine page c'est no-repeat, mais ce qui m'intrigue c'est le gros blanc sous le header.

vous devez avoir background:#ffffff qui traine quelque part et passe sur le body

 

Ou le souci est du fait que le Homeslider est été ajouté dans le TOP OF PAGE?

normalement non, le body est dessous

Edited by Muche (see edit history)
Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted (edited)

si c'est une image pleine page c'est no-repeat, mais ce qui m'intrigue c'est le gros blanc sous le header.

vous devez avoir background:#ffffff qui traine quelque part et passe sur le body

 

 

normalement non, le body est dessous

 

Merci encore de votre rapidité!

 

Peut être avec un peut plus de code ceci vous aidera a mieux comprendre. :)

(Quand je met dans le body "height:2043px" le background est affiché assez bien)

 

post-21854-0-14212200-1363095894_thumb.jpg

Edited by Vinc3nzo (see edit history)
Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted

dans le doute j'ai refait un test avec:

background:url(../img/bg.jpg) 50% 150px no-repeat transparent;

le background se centre bien et est à 150px du haut de la page, voici le code du body complet:

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:url(../img/bg2.jpg) 50% 150px no-repeat transparent;
}

Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted

dans le doute j'ai refait un test avec:

background:url(../img/bg.jpg) 50% 150px no-repeat transparent;

le background se centre bien et est à 150px du haut de la page, voici le code du body complet:

body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#222;
background:url(../img/bg2.jpg) 50% 150px no-repeat transparent;
}

Si j'enleve la hauteur que j'ai ajouté au body (heigh: 2048px) je n'ai plus de background. lol

 

Bon je croi que je vais tester avec votre solution de code... par-contre quel code je doit utilisé au final sur cette page?

 

Ma requete:

Footer & Header 100%.

 

MERCI.

Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted

Pour faire simple, le site que vous montrez est sous joomla, on est pas vraiment sur la même structure:

dans votre header.tpl ajouter avant <div id="page" class="container_9 clearfix">

 <div id="fond-footer">
 <div id="fond-header">

dans le global.css:

#fond-footer {
background: votre couleur;
height: votre height;
}
#fond-header {
background: votre couleur;
height: votre height;
}

ligne 10 du global.css ajouter un background au html.

 

ca devrait le faire.

 

Je viens de tester cette solution, et même souci, que PRESTYNEWS, header & footer se chevauche tout en haut.

Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted

Je viens de tester cette solution, et même souci, que PRESTYNEWS, header & footer se chevauche tout en haut.

Même réponse qu'à Prestynews un peu plus haut:

 

 

Vous créez un image de 5px de large et de la hauteur souhaitée du footer et la basculez dans le dossier img du thème

Vous insérez ce code dans le CSS:

#fond-footer {
background:transparent url(../img/votre_image.jpg) repeat-x bottom center;
}

! Ne pas assigner de hauteur !

Vous pouvez mettre une image large si vous le souhaitez et faire pareil pour le header en remplaçant bottom par top

Link to comment
Share on other sites
Vinc3nzo Newbie

Vinc3nzo

Posted
Posted (edited)
Vous créez un image de 5px de large et de la hauteur souhaitée du footer et la basculez dans le dossier img du thème

Vous insérez ce code dans le CSS:

#fond-footer {
background:transparent url(../img/votre_image.jpg) repeat-x bottom center;
}

! Ne pas assigner de hauteur !

Vous pouvez mettre une image large si vous le souhaitez et faire pareil pour le header en remplaçant bottom par top

 

Justement mon souci est que je perciste à vouloir utiliser mon image .PNG (50x50px) car je m'étais inspiré d'un site et cette image 50x50px fonctionnais très bien en ajustant la hauteur qu'on désirais. Donc il doit y avoir une fameuse solution.

Edited by Vinc3nzo (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
mondeduvelo Newbie

mondeduvelo

Posted
Posted

bonjour,

je viens d'installer la toute dernière version pour un projet et je débute avec prestashop

j'ai essayé la méthode de Muche pour le footer mais en vain le head fonctionne très bien cette méthode ne fonctionne plus avec la v1.5.4 ?

merci d'avance pour votre aide

Link to comment
Share on other sites
Bondaty and Co Newbie

Bondaty and Co

Posted
Posted

bonjour,

je viens d'installer la toute dernière version pour un projet et je débute avec prestashop

j'ai essayé la méthode de Muche pour le footer mais en vain le head fonctionne très bien cette méthode ne fonctionne plus avec la v1.5.4 ?

merci d'avance pour votre aide

je viens de tester, ça fonctionne parfaitement sur 1.5.4

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...