- Priority: 0
- Status: Closed
- Theme: Alysum
-
Assigned To:
Alex
Marek
- Private: No
- Open Date: 09.10.15, 13:08
- Opened by: Alex
- Closed by: Marek
- Closed on: 29.08.17, 23:33
- Reason: Closed
- Comment: Glad to help!
Ticket #8600 - al4.4 Checkout page, step 5, payment looks bad
Delivery modules looks bad in our themes
Alysum theme left, default theme right
compare
In default theme it’s ok.
Developer of these two modules says that Alysum uses 1.5.x prestashop payment modules layout and that these modules would look correctly if Alysum would be using 1.6.x layout.
In new PS 161 appeared file \themes\default-bootstrap\js\advanced-payment-api.js
FIX:
1) copy images
bankwire.png
cash.png
cheque.png
from \themes\default-bootstrap\img\ to \themes\alysum\img\
2)
replace the file \modules\bankwire\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\bankwire\views\templates\hook\payment.tpl
replace the file \modules\cashondelivery\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\cashondelivery\views\templates\hook\payment.tpl
replace the file \modules\cheque\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\cheque\views\templates\hook\payment.tpl
3)
And add to the end of the /themes/alysum/css/global.css
/* fix for delivery modules */ p.payment_module { margin-bottom: 10px; } p.payment_module a { display: block; border: 1px solid #d6d4d4; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: 17px; line-height: 23px; color: #333; font-weight: bold; padding: 33px 40px 34px 99px; position: relative; } p.payment_module a.bankwire { background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb; } p.payment_module a.cheque { background: url(../img/cheque.png) 15px 15px no-repeat #fbfbfb; } p.payment_module a.cash { background: url(../img/cash.png) 15px 15px no-repeat #fbfbfb; } #pattern p.payment_module a:after { content: ""; display: inline-block; height:30px; width:30px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA7UlEQVRYR+3UvQrCMBQF4NOEzLWkkw8g+gKCcwfBl3YVxEGq7yBIoVKX/sRKRx1sb3Jtl3QN9Hyc5N4AE3/BxPnwAN8ApQEx0zqVQFkqtX3ebneOB0wChFpfJLACkFZKJRwICgBxHM+bptkLKRdcCBKgq5wbQQZwI6wAnAhrABfCCcCBcAa4IlgA34iXMcc8z9dDFtVfAAY4PLJsMxrgYze07bmu66QoimwUgEt4B3S6AtdwJwBHuDWAK9wKwBlOBnCHUwEijKKrFGIJ4qj9GkfKFARa65MBalNVu6Fz3rcLKIC+f1mde4BvYPIG3lgw3yGS4H7EAAAAAElFTkSuQmCC); float:right; position:absolute; right: 20px } p.payment_module a:hover {background-color: #f6f6f6} p.payment_module a span {font-weight: bold;color: #777} .payment_module.box { margin-top: 20px; } p.cheque-indent {margin-bottom: 9px} .cheque-box .form-group {margin-bottom: 0px} .cheque-box .form-group .form-control {width: 269px} .order-confirmation.box { line-height: 29px; } .order-confirmation.box a { text-decoration: underline; } .order-confirmation.box a:hover { text-decoration: none; }
Comments
the result is