Modifying the look of the payment page

[sscardefield]

I am having a hell of a time trying to figure out how to modify the payment options part of the final checkout page (payment page). My two payment options are the PayPal module and Stripe CC processing. It looks like it builds this section of the page from various other files, but I can't figure out where. The only thing I've been able to figure it is how to change the PayPal text, which is in the translations.xml in the PayPal module's folder. Here is what I would like to do, can anybody point me to the right files?

 

 

It's just too confusing the way it's layed out right now, I want the options to be a little more clear.

 

Thanks.

[Doulas Akula]

Which version of prestashop and paypal module are you using

[sscardefield]

Oh, sorry.

 

PrestaShop 1.5.3

PayPal 3.4.7

 

It looks like PayPal 3.4.8 is available, not sure if that would make a difference or not.

[tdr170]

It looks as though you need to have some padding or margin added to the paiement section of the global.css file.

Look for this section and add either padding-bottom or margin-bottom similar to below.

If you post a link to the site we could help you better as we could see the issue and take a look with a dev tool and give you better instructions as it looks as though your using a custom theme.

 

 

/* step 5 - paiement ************************************************************************** */

 

 

 

 

 

 

.payment_module {

position:relative;

padding-top:20px;

border-top:1px dotted #ccc;

text-transform:uppercase;

margin-bottom:40px

}

[sscardefield]

Ok, thanks. Let me mess with those CSS settings. In the meantime here is the link:

 

http://shop.sunstatetechnology.com

 

You can use this user to get all the way to the checkout page:

 

Email: [email protected]

Password: 123456

Edited April 10, 2013 by sscardefield (see edit history)

[tdr170]

I can not view the CSS files as you have CCC enabled.

Edited April 10, 2013 by tdr170 (see edit history)

[tdr170]

In Google chrome it does not look bad.

[sscardefield]

Aahhhhhhh, that actually answered one of my questions. I was wondering why all of a sudden when I did an inspect element in Chrome it just had some random a9078u23jafd8dfadsf.css. I didn't realize that's what the CCC stuff did. It's off now until I can get this squared away.

 

Thanks for the help, I should be able to find this stuff with the CCC off.

Edited April 10, 2013 by sscardefield (see edit history)

[sscardefield]

Ok, got most of it taken care of. Got the text lowercase, got it vertically centered, and got some space between the two payment options. The only thing left is getting some text in between the two payment options. Any idea on where I'd do that? The only thing I can find that looks like it builds that payment hook/block is at the bottom of order-payment.tpl:

 

 

{/if}
{if $opc}<div id="opc_payment_methods-content">{/if}
<div id="HOOK_PAYMENT">{$HOOK_PAYMENT}</div>
{if $opc}</div>{/if}