[SOLVED] Transparent Header Logo Problem

hurray · April 27, 2012

I have created a header logo with transparent background (.png) on photoshop.

However when I upload the image from the back-panel, I still get a rectaugular white background.

Anyone know why?

hurray · April 28, 2012

_{No one?}

nostradamus · April 28, 2012

you need to change the header.tpl

Find

<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

Replace with

<img class="logo" src="{$img_ps_dir}logo.png?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

WinterIsComing · April 28, 2012

transparency :

Transparent images do not work well on older browsers, especially Internet Explorer, so avoid PNG images in 24 bits. Regarding GIF images with transparency, use them over a plain background to make sure the effect works. Also, avoid the semi-transparent pixels by defining a matte color (the same as the background)."

This is taken from the documentation for prestashop. But the site is temporarily unavailable...

http://doc.prestashop.com/display/PS14/Designer+Guide

hurray · April 28, 2012

Hi nostradamus,

Thanks for your suggestion. It did not quite work.

WinterIsComing,

I have created a .png image in 24 bits to upload on the back-panel as the logo of my store. When I followed nostradamus's suggestion, it did not work in IE. Even in firefox, the actual logo did not get displayed.

nostradamus · April 28, 2012

Hi nostradamus,

Thanks for your suggestion. It did not quite work.

WinterIsComing,

I have created a .png image in 24 bits to upload on the back-panel as the logo of my store. When I followed nostradamus's suggestion, it did not work in IE. Even in firefox, the actual logo did not get displayed.

Did you upload the logo.png to the img folder directly? If not you need to do that. it wont work when uploading a image in the BO

hurray · April 28, 2012

Awesome nostradamus. It worked.

Thanks zillions...

BoKr · October 2, 2012

## solved partially, see following post

Hello

I am still using a transparen 75x75 png but I will try a gif then. I suppose I have to change the code above: png --> gif

May I ask here how I can change the size of my logo?

Thing is, that it is scaled wrongly by my them I suppose.

http://i48.tinypic.com/2uqc70g.png

Can I make some changes by CSS?

I tried but without succes

/* global layout */
#old_center_column { display: none }
#page {
margin: 0 auto;
text-align: left;
width: 1000px;
}
#header_logo {
display: block;
float: left;
height: 75px;
width: 75px;
  }
img.logo {
float: left;
margin-left: 0;
margin-top: 56px;
}
#index #header{ }
#header{
height: 190px;
width: 1000px;
}
#header_right {
width: 1000px;
}

Edited October 2, 2012 by B.Köring (see edit history)

BoKr · October 2, 2012

Ok,

I had to find out that I can make some changes to the header.tpl. I had looked earlier there when PS original theme was activated and there was no hint for me.

But then with my new them activated I saw that there was the mysterious width attribute in the header.tpl:

<!-- Header -->
  <div id="header">
   <a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="100"{/if} {if $logo_image_height}height="100" {/if} />
   </a>
   <div id="header_right">
 {$HOOK_TOP}
   </div>
  </div>

I changed it to square 100x100 and everything is fine for the moment.

The rest like padding or so must be changed in the global.css then as far as I understand things now.

Either one of these selector may then positon my logo:

#header_logo {
    display: block;
    float: left;
    height: 75px;
    width: 75px;
  }
img.logo {
    float: left;
    margin-left: 0;
    margin-top: 56px;
}

What I still not get fully is the file ending/type of my logo in the header.tpl.

Default ist jpg and that is also the case even if I set the setting in PS admin BO to make use of png (if there are pngs)....

However, I have a png logo and if I change the above

<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}

to

<img class="logo" src="{$img_ps_dir}logo.png?{$img_update_time}

my logo disappears ?!

thanks alot

BoKr · October 8, 2012

Mh,

am I right that it is not possible to use a logo with transparencs in PS?

I read that users can copy png's into /img but PS will internally alter them to jpg's? No matter which settings we use?

Would be nice if some one could help me out here since I really would like to position on top of other stuff with transparencs enabled.

If it is not possible or not advisable to follow this path I will have to change my headers background to white....

sszachnowski · November 1, 2012

Hi B. Koring,

I'm afraid PrestaShop engine every time would convert your beautiful png/gif logo with transparent background into compressed jpg file with white color behind.

However there is easy to follow workaround to gain effect you need. I'm basing on 1.5.1 but I assume it could work in other versions too (I will mark where are differences between 1.4 and 1.5)

1. Go to back-end panel and upload your logo.

2. Use your favourite ftp/sftp client and open directory:

[ROOT]/img/

in your PrestaShop files.

3. Upload your logo manually. You'll see your file uploaded through back-end panel, i.e. 'logo.jpg'. Upload your 'logo.png' next to existing file.

4. Still with your ftp client go to:

[ROOT]/themes/your_theme_name/

folder and open header.tpl.

5. Find code:

src="{$logo_url}"

in line 77 and change it to:

src="{$img_ps_dir}logo.png?{$img_update_time}"

(update time is optional) [in 1.4, if I remember correctly, your original code would look like: "src="{$img_ps_dir}logo.jpg?{$img_update_time}"']

6. You'll have to repeat these steps every time you would like to change your logo.

BR

Sebastian

Mh,

am I right that it is not possible to use a logo with transparencs in PS?

[..]

If it is not possible or not advisable to follow this path I will have to change my headers background to white....

BoKr · November 2, 2012

Thank you. I understood now how that works

Andrej Stas · November 7, 2012

I don't understand - why such a difficult solution?

It's all in the back office - I have written this article to help you out.

Edited February 20, 2013 by Andrej Stas (see edit history)

sszachnowski · November 7, 2012

Thanks Andrej, I never thought this option also touches logo uploading!

Nickless · January 30, 2013

Thanks ssnachnowski, that did the trick for me.

@Andrej, no matter what I tried the option in the backoffice didn't show my logo as a png...

Perla2018 · April 7, 2013

Hello,

I have done everything there and i wrote the vers. 1.5.4 Can be seen the logo right in backoffice but in front office not logo appears, who helps me?

GoneVintage · May 6, 2013

Andrej, you're the man! Who would have thought it has such simple and genius solution.

p.s. Prestashop did great this time also:)

ZeroCard · May 14, 2013

@sszachnowski

Thanks for your help

Generaal · June 20, 2013

Hello,

I have importing my transparency logo with the suggestions from Andrej Stas.

Simple, no to chance any code and it's works!

I'm running PS v 5.4.1

A fine prog for translate to transparancy are a simple program: GiFFY, free to download and use.

For other pictures manupilation, I use Faststone Photo Resizer, also for free use.

Best Regards and thanks to Andrej!

Generaal

acamilov · June 26, 2013

I'm having the same problem and when I look into the header.tpl file and look for the img class="logo" this is what I get

<header id="header">
					    <div id="header-inner">
						    <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
						 <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}"/>
						    </a>
						    {$HOOK_TOP}
						 </div>
				   </header>

thus the .jpg VS .png ending does not apply in this case... Is there anywhere else where this would get overwritten?

acamilov · June 26, 2013

Actually I already found the answer in another forum, thanks to romeo.tran (http://www.leotheme.com/forum/20-general-pretashop-template-installation/3657-transparent-png-logo-in-prestashop.html):

1. login in back-office then access

Preferences > Images

2. in images tab, please config

Image quality : Use PNG only if the base image is in PNG format.

3. please access

Preferences > Themes

then upload png image for logo again

bivvviiv · August 28, 2013

Like acamilov

I did it fast and simple in PrestaShop™ 1.4.6.2 without any major script changes.

STEP 1 - Upload the transparent image in the Back Office and Save it. This sets the dimensions.

STEP 2 - Go to /img/logo.jpg and upload you transparent logo directly over this file keeping the name the same.

FINISHED

It has to be done in this order.

The new transparent image name change from png or gif to jpg will not effect the transparent image result.

Just don't forget this is how you changed it for future access or logo up-dates.

Edited August 28, 2013 by bivvviiv (see edit history)

osss · February 1, 2014

Go to your back office > preferences > images and check the “image quality” as seen below.

keenovo-online · July 7, 2014

thanks ,Andrej,solved easily.

But should I worry about this warning:

"WARNING: This feature may not be compatible with your theme, or with some of your modules. In particular, PNG mode is not compatible with the Watermark module. If you encounter any issues, turn it off by selecting "Use JPEG". "

Foluxe · February 15, 2015

Thanks sszachnowski, Tip definitely works for version 1.6. Edit line 93 with the image url.

rbester · August 21, 2015

Hi,

For me updating the dB worked best, and without having to modify or override any source file.

First you'll need to copy logo.png to the /img directory.

Then update the database:

UPDATE `ps_configuration` SET `value`="logo.png" WHERE `name` = "PS_LOGO"

woodys · December 17, 2015

Hello all,

I fixed the transparency of my logo with these tipps. But it doesn't work in the mobile template (for smartphone / tablet). Is there any other place, where I have to correct the settings for the mobile template?

Thanks in advance

Best regards

Andreas

zemas_inc · March 8, 2016

Still works great in 2016, you may have to reupload your logo.

Sometimes less means more...

I don't understand - why such a difficult solution?

It's all in the back office - I have written this article to help you out.

Thank you Andrej!

[SOLVED] Transparent Header Logo Problem

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites