Checkout Payment Methods .... Wrong size?

[Fashionresidenz]

Hey Guys,

 

i´ve got a small problem, I would like to have the list of Payment Methods during the checkout process, in the same size. At the Moment it looks like this:

 

 

I already tried to edit the tpl´s from the modules, but it does not take any effect.

Maybe you have an solution?

Regards,
Lucas

Fashionresidenz

[NemoPS]

Snap, all images are broken at the moment, could you share your site's url?

[Fashionresidenz]

Hey Nemo1,

oh damn, okay take a look:  www.fashionresidenz.de

Regards

Lucas

[NemoPS]

Ah you need to force some css the i believe, as well as editing the tpl. Make sure you mimic the following structure to start with

<div class="row">
<div class="col-xs-12 col-md-6">
<p class="payment_module paypal">
    <a href="javascript:void(0)" id="paypal_process_payment" title="Pay with PayPal"> <img src="your imagef" alt="Pay with your card or your PayPal account" height="48px">
        Pay with your card or your PayPal account
    </a>
</p>
</div>
</div>

Of course use the correct code for each module

[Fashionresidenz]

In which file I should use your code? I don´t find it in paypal.css :/

[NemoPS]

For paypal it should be express_checkout_payment.tpl, in the module's folder /views/templates/hooks (just trying to remember out of my head)

[Fashionresidenz]

I already had that, take a look:

 

 

<div class="row">
    <div class="col-xs-12 col-md-6">
        <p class="payment_module paypal">
            <a href="javascript:void(0)" onclick="$('#paypal_payment_form').submit();" id="paypal_process_payment" title="{l s='Pay with PayPal' mod='paypal'}">
                {if isset($use_mobile) && $use_mobile}
                    <img src="{$base_dir_ssl|escape:'htmlall':'UTF-8'}modules/paypal/img/logos/express_checkout_mobile/CO_{$PayPal_lang_code|escape:'htmlall':'UTF-8'}_orange_295x43.png" />
                {else}
                    {if isset($logos.LocalPayPalHorizontalSolutionPP) && $PayPal_payment_method == $PayPal_integral}
                        <img src="{$logos.LocalPayPalHorizontalSolutionPP|escape:'htmlall':'UTF-8'}" alt="{$PayPal_content.payment_choice|escape:'htmlall':'UTF-8'}" height="48px" />
                    {else}
                        <img src="{$logos.LocalPayPalLogoMedium|escape:'htmlall':'UTF-8'}" alt="{$PayPal_content.payment_choice|escape:'htmlall':'UTF-8'}" />
                    {/if}
                    {$PayPal_content.payment_choice}

 

 

But it does not look like the others :/

[NemoPS]

Well it does have the same size now. If you want it 100% identical you have to copy the other's css, and get rid of the image in the tpl (you need a square one to use as background

div.row p.payment_module a.creditcard:after, p.payment_module a.elv:after {
display: block;
content: "\f054";
position: absolute;
right: 15px;
margin-top: -11px;
top: 50%;
font-family: "FontAwesome";
font-size: 25px;
height: 22px;
width: 14px;
color: #777777;