Jump to content
hurray

[SOLVED] Transparent Header Logo Problem

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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} />

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

## 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 by B.Köring

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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....

Share this post


Link to post
Share on other sites

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....

  • Like 5

Share this post


Link to post
Share on other sites

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 by Andrej Stas
  • Like 8

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

  • Like 4

Share this post


Link to post
Share on other sites

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 by bivvviiv

Share this post


Link to post
Share on other sites

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

post-744069-0-70690000-1391225335_thumb.png

Share this post


Link to post
Share on other sites

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". "

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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"​
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More