Bonjour,
Je suis tout nouveau sur Prestashop (version 1.7.6.8) et je tente de créer mon thème en me basant sur celui par défaut (Classic), en utilisant la fonction parent-enfant, pour qu'il soit cohérent avec mon site.
A première vue, tout semble fonctionner mais je rencontre un soucis de mise en page. Pour mieux vous expliquez, vous pouvez vous rendre sur mon site.
Je tente de reproduire l'effet de vague dans la partie footer mais je n'ai aucune animation comme sur l'image en pièce jointe. J'ai analysé et tenté plusieurs fois de modifier le code mais sans succès. A un moment, j'avais bien l'effet de vague fonctionnel en me trompant d'emplacement (juste en dessous des articles).
Voici mon code dans le fichier layout-both-columns.tpl :
{** * 2007-2019 PrestaShop and Contributors * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License 3.0 (AFL-3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * https://opensource.org/licenses/AFL-3.0 * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to https://www.prestashop.com for more information. * * @author PrestaShop SA <contact@prestashop.com> * @copyright 2007-2019 PrestaShop SA and Contributors * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} <!doctype html> <html lang="{$language.iso_code}"> <head> {block name='head'} {include file='_partials/head.tpl'} {/block} </head> <body id="{$page.page_name}" class="{$page.body_classes|classnames}"> {block name='hook_after_body_opening_tag'} {hook h='displayAfterBodyOpeningTag'} {/block} <main> {block name='product_activation'} {include file='catalog/_partials/product-activation.tpl'} {/block} <header id="header"> {block name='header'} {include file='_partials/header.tpl'} {/block} </header> {block name='notifications'} {include file='_partials/notifications.tpl'} {/block} <div class="wave-header"> <div class="wave-inner-header flex"> <section id="wrapper"> {hook h="displayWrapperTop"} <div class="container"> {block name='breadcrumb'} {include file='_partials/breadcrumb.tpl'} {/block} {block name="left_column"} <div id="left-column" class="col-xs-12 col-sm-4 col-md-3"> {if $page.page_name == 'product'} {hook h='displayLeftColumnProduct'} {else} {hook h="displayLeftColumn"} {/if} </div> {/block} {block name="content_wrapper"} <div id="content-wrapper" class="left-column right-column col-sm-4 col-md-6"> {hook h="displayContentWrapperTop"} {block name="content"} <p>Hello world! This is HTML5 Boilerplate.</p> {/block} {hook h="displayContentWrapperBottom"} </div> {/block} {block name="right_column"} <div id="right-column" class="col-xs-12 col-sm-4 col-md-3"> {if $page.page_name == 'product'} {hook h='displayRightColumnProduct'} {else} {hook h="displayRightColumn"} {/if} </div> {/block} </div> {hook h="displayWrapperBottom"} </section> </div> </div> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="wave-gentle" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="wave-parallax"> <use xlink:href="#wave-gentle" x="48" y="0" fill="rgba(255,255,255,0.7)" /> <use xlink:href="#wave-gentle" x="48" y="3" fill="rgba(255,255,255,0.5)" /> <use xlink:href="#wave-gentle" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlink:href="#wave-gentle" x="48" y="7" fill="#fff" /> </g> </svg> <div class="wave-content flex"> <div class="wave-width"> <footer id="footer"> {block name="footer"} {include file="_partials/footer.tpl"} {/block} </footer> </div> </div> </main> {block name='javascript_bottom'} {include file="_partials/javascript.tpl" javascript=$javascript.bottom} {/block} {block name='hook_before_body_closing_tag'} {hook h='displayBeforeBodyClosingTag'} {/block} </body> </html>
Et mon code concernant cet effet de vague dans custom.css (je n'ai que ça pour le moment) :
.wave-header {
position:relative;
background: linear-gradient(to right, #022F6B, #0E4489);
color:white;
width:100%;
test-align: center;
height: auto;
}
.wave-inner-header {
border: none;
border-left: solid 3px rgba(255, 255, 255, .8);
padding: 10px;
width: 70%;
}
.flex { /*Flexbox for containers*/
height: auto;
margin: auto;
width: 70%;
}
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.wave-content {
position:relative;
height:20vh;
background-color: rgba(255,255,255,.6);
}
/* Animation */
.wave-parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.wave-parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.wave-parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.wave-parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.wave-parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:40px;
}
}
J'ai également tenté d'ajouter la seconde partie du code directement dans le fichier footer.tpl mais le résultat a été le même.
Pouvez-vous m'aider ?
Je vous remercie d'avance.
Edit : j'ai finalement trouvé mon soucis. En analysant profondément le code de mon site, je me suis rendu compte que j'avais mal placé à </div> sur mon thème.
