Conseils pour modifier le template lors du choix du Mode de Livraison (Checkout)

[Laurent NODOVA]

Bonjour à toutes et tous,

J'ai un e-shop sous Prestashop 1.7 qui a une sur-couche Elementor (je le précise mais je ne pense pas que cela ait un impacte).

J'ai récemment installé et configuré le module officiel Mondial Relay pour offrir cette option à mes clients. Mais je trouve qu'il ne s'insère pas bien sur la page du choix de Mode de Livraison lorsque le client finalise sa commande :

Les soucis :

1) Quand on renseigne une adresse où un code postal, la liste déroulante des résultats s'affiche derrière la section pour que les clients puissent laisser un message pour la livraison (section située juste en dessous).

Je souhaiterai le faire apparaitre par dessus.

 

2) Une fois l'adresse renseignée, le widget Mondial Relay est collé sur la gauche, et en bas à la section suivante :

Je souhaiterai centrer le widget, et forcer un espace en bas.

Mes tests :

En bidouillant via l'inspecteur de Google Chrome, voilà ce que j'obtiens :

1) Pour la liste déroulante : En ajoutant la mention "position : relative;" à la class "PR-AutoCplCity", la liste est visible entièrement, ce qui me convient bien mieux.

Mais le fichier CSS dont est tiré cette ligne semble provenir d'un serveur Mondial Relay. J'imagine que je ne peux pas y faire grand chose pour inscrire en dur cette modif sur mon site...

 

2) Pour le widget non-centré : j'ai rajouté les mentions "margin-left: auto;" et "margin-right: auto;" dans "mondialrelay_content", ce qui me le centre sans casser le design responsive du widget en format mobile.

 

Pour le bas, j'ai simplement rajouter "margin-top : 30px;" au "delivery_message".

 

Mon soucis vient maintenant pour finaliser ces changements : Impossible de trouver à quel fichier ces lignes correspondent. L'inspecteur l'aiguille vers le fichier theme du site (themes.css), mais ces lignes sont introuvables. J'ai également fouillé les fichiers template des étapes de validation de commande (templates/checkout/_partials/steps), sans succès.

 

Certains auraient-ils des idées/pistes pour m'aiguiller ?

Merci beaucoup

[Mediacom87]

Bonjour,

il suffit de mettre les changements dans le fichier custom.css dans votre thème puis d’affiner vos balises pour appliquer les changements.

[Laurent NODOVA]

Merci beaucoup pour ce retour. J'ai malheureusement tenté plusieurs lignes dans custom.css mais aucune ne semble impacter l'affichage. Je ne suis pas très connaisseur de css, je pense ne simplement pas arriver à trouver les bonnes formulations...

Pour information, je me suis basé sur des tutos tels que ceux-ci :

https://www.prestasafe.com/tuto-modifier-theme-de-prestashop-1-7

https://www.webbax.ch/2017/03/27/prestashop-1-7-modifier-css-ep-16/

Une âme charitable pour m'aiguiller sur le type de formulation à inscrire dans custom.css pour modifier cet affichage comme me le suggère Mediacom87 ?

Merci beaucoup