Jump to content

Center Klarna Logo


lasseboy

Recommended Posts

This is klarnafooter.tpl

2015 Prestaworks AB
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (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:
* http://opensource.org/licenses/afl-3.0.php
* 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.
*
*  @author    Prestaworks AB <[email protected]>
*  @copyright 2015 Prestaworks AB
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of Prestaworks AB
*}
{if $klarnav3_footer_layout != 0}
    {if $klarnav3_footer_layout == 1}
        <img src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/long-blue.png?width=440" />
    {/if}
    {if $klarnav3_footer_layout == 2}
        <img src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/long-white.png?width=440" />
    {/if}
    {if $klarnav3_footer_layout == 3}
        <img src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/short-blue.png?width=312" />
    {/if}
    {if $klarnav3_footer_layout == 4}
        <img src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/short-white.png?width=312" />
    {/if}
{else}
    {if $klarna_footer_layout == 'blue-black' || $klarna_footer_layout == 'white' || $klarna_footer_layout == 'blue+tuv' || $klarna_footer_layout == 'white+tuv'}
        <div class="klarna-widget klarna-logo-tooltip"
            data-eid="{$kco_footer_eid|escape:'html':'UTF-8'}"
            data-locale="{$kco_footer_locale|escape:'html':'UTF-8'}"
            data-logo-name="{$klarna_footer_layout|escape:'html':'UTF-8'}"
            data-logo-width="120">
        </div>
    {else}
        {if ($kco_footer_locale|escape:'html':'UTF-8' == 'nl_nl')}
            <img src="https://cdn.klarna.com/1.0/shared/image/generic/logo/nl_nl/basic/blue-black.png?width=100" />
        {elseif ($kco_footer_locale|escape:'html':'UTF-8' == 'da_dk')}
            <div class="klarna-widget klarna-logo-tooltip"
                data-eid="{$kco_footer_eid|escape:'html':'UTF-8'}"
                data-locale="da_dk"
                data-logo-name="blue-black"
                data-logo-width="120">
            </div>
        {else}
            <div class="klarna-widget klarna-{if $kco_footer_active}badge{else}logo{/if}-tooltip"
                data-eid="{$kco_footer_eid|escape:'html':'UTF-8'}"
                data-locale="{$kco_footer_locale|escape:'html':'UTF-8'}"
                data-badge-name="{$klarna_footer_layout|escape:'html':'UTF-8'}"
                data-badge-width="385">
            </div>
        {/if}
    {/if}
    <script async src="https://cdn.klarna.com/1.0/code/client/all.js"></script>
{/if}

Link to comment
Share on other sites

The logo is this one:  {if $klarnav3_footer_layout == 2}
        <img src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/long-white.png?width=440" />
    {/if}

 

 

maybe the settings are controlled from another file, should ask klarna support about this

Link to comment
Share on other sites

19 minutes ago, lasseboy said:

but I can't find the file to change.

You just have to look for class="klarna-widget klarna-badge-tooltip klarna-tooltip" for example, or alt="Klarna payment display" ...

you could start by the code you provided...

<div style="text-align:center; width:100%;">
  {if $klarnav3_footer_layout != 0}    
  {if $klarnav3_footer_layout == 1}        <img style="text-align:center !important;" src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/long-blue.png?width=440" />    {/if}    
  {if $klarnav3_footer_layout == 2}        <img style="text-align:center !important;" src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/long-white.png?width=440" />    {/if}    
  {if $klarnav3_footer_layout == 3}        <img style="text-align:center !important;" src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/short-blue.png?width=312" />    {/if}    
  {if $klarnav3_footer_layout == 4}        <img style="text-align:center !important;" src="https://cdn.klarna.com/1.0/shared/image/generic/badge/{$kco_footer_locale|escape:'html':'UTF-8'}/checkout/short-white.png?width=312" />    {/if}
</div>

Best Regards

Edited by PCQUATRO (see edit history)
Link to comment
Share on other sites

1 hour ago, lasseboy said:

i have to be stupid in the head, can not find right at all, is it only the tpl files that control this, or can it be the css files?

Usualy it is only the TPL, but you can add styles by css to some used ID´s or Classes!

Best regards

Link to comment
Share on other sites

2 hours ago, lasseboy said:

I give up, now when i go live with payment there is moore problems, maybe my theme dosent support klarna.

That´s clearly a theme problem, ask the developer for help. Styling is not a problem, it can be easely solved, the real problem is when functional things do not work as expected!

You have to put those elements inside the main wrapper...

Best Regards

Edited by PCQUATRO (see edit history)
Link to comment
Share on other sites

I think i found the code for img.

img {
  width:auto;
  max-width:100%;
  height:auto;
  vertical-align:middle;
}
.zoomdiv img, .zoomWindow img { max-width:none; }
.zoomdiv, .zoomWrapper { border:1px solid #dddddd !important; }
.zoomPad { float:none !important; }
#product.content_only .zoomPad, #product.content_only .zoomPup {
  background:none !important;
  border:0 !important;
  cursor:default !important;
 

 

But when i try vertical-align:center;   nothing happens.

 

If i put to  max-width:00%;  img disappears

So i think it´s the rigt code for the img.

it´s in global.css

 

Link to comment
Share on other sites

10 hours ago, lasseboy said:

I think i found the code for img.

That´s a global img style, changes you make there will affect all image elements, you need to target just the ones you need to center.

10 hours ago, lasseboy said:

But when i try vertical-align:center;   nothing happens.

vertical-align does not have a center propertie, it´s middle as you can see in the example of code you gave, what you need to use is text-align:center as i´ve been telling you!

Best Regards

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...