I can't find..

in the CSS style sheets where to change the logo picture that's being used. Originally it was logo.jpg and I know where that is in the images folder. However I want to use logo.gif (transparency needed) and if I put logo.gif in the images folder right next to logo.jpg nothing happens. Where is the code I need to change so that whatever it is points to logo.gif not .jpg

I tried to search for it with the dev. tool kit to no avail.

for some reason the edit button isn't showing up for me on this post... sighs and of course I'm extremely tired and posting the wrong thing.

I want to use a .png file not a .gif

anyone with an idea? My logo looks horrid right now!! LOL I am also digging through the archives and wiki. Haven't found anything yet that seems to tell me or that I understand means the answer I am needing.

Do you have a URL to your site.

Yes It is now in my sig. :yes:

This is from the view source of your main page:

<div id="headerwrap" class="clearfix">
<div id="logo">
  <div id="logoName"><img src="includes/templates/zcSohoSailing/images/logo.gif" alt="" /></div>
</div>
<!-- End Header Wrapper --></div>

I'm guessing the portion in red is what you want to change.

The question is do you want to change includes -> templates -> YOUR_TEMPLATE -> common -> tpl_header.php (which as it appears is where you have it now) or do you want to include it in your stylesheet.css?

If you want to change it in tpl_header.php find this line:

<img src="includes/templates/zcSohoSailing/images/logo.gif" alt="" /> and just change gif to png.

if you want to include the img reference in your stylesheet find this:

div#logoName {
	float: left;
	height: 50px;
	width: 300px;
}

and change it to

div#logoName {
	float: left;
	height: 50px;
	width: 300px;
        background: url(../images/logo.png) no-repeat;
}

remove the line above from tpl_header.php

Okay, made a copy of the orig. tpl_header and will change that line. See how that works. Should be perfect. THANK YOU!

Herm. The tpl_header.php file in my common folder does not contain that line. I am looking through other .php's to see if they do.

URGH!!! 3rd stupid time I've run out of time to edit my mssg.

Okay so I changed that one little part using find and replace. And the entire top of my cart went bye bye. Meaning the WHOLE header. OOPSIE. Herm.

Sorry, :oops:

It was really late when I gave you some of the information.

try these changes and see if they work:

stylesheet:

div#logoName {
float: left;
height: 50px;
width: 300px;
background: url(../images/logo.png) no-repeat;
}
put your image in includes -> templates -> YOUR_TEMPLATE -> images

tpl_header.php

delete only the portion in red

try it and see if it works

Those are the changes I made the second time around. Backgroung image disappeared and header disappeared. I am still messing with it. You'd thing just simply changing the extension would do it LOL!!! logo.png is already in my /images folder of that template too.

Ladysaat, Clyde

I apologise for leaping into the middle of this back and forth between you, but unless I am completely missing the point (in which case an even more grovelling apology), it looks to me like you have both wandered very far from the straight and narrow.

Ladysaat

Your explanation, if I understand it correctly after the odd twist and turn and a quick look at your site is that you wish to replace the logo.gif that you currently have on your site and replace it with a png file to take advantage of its transaprency. Gifs support transparency across all browsers. png supports transparency but Internet Explorer doesn't currently recognise the png version of it, and won't do until IE7. So it seems to me that your goal is doomed to failure (at least for the 80% of web users using current versions of IE).

Clyde

There is a very easy way to change the logo file. The new file is placed in template/YOUR_TEMPLATE/images and the following line from languages/english/YOUR_TEMPLATE/header.php> define('HEADER_LOGO_IMAGE', 'logo.gif');is changed to the desired new name, e.g. logo.jpg, logo.png or my_lovingly_crafted_new_logo.gif with no need to change code.

Again, if I'm missing the point, my apologies.

Kuroi, Ladysaat
I guess I'm not thinking too clearly.

Since my logo.gif is a 1px transparancy and I don't use it for display and my actual logo is included in my header_bg.jpg I was think along the lines I use to display my header/logo image.

I keep forgetting the "KISS" principal of getting things done.

Kuroi you have the idea right. That is what I want to do. For some reason I cannot get any of my .gif's to have transparency though. :( I will look it up in photoshop. Make life much easier LOL!

ladysaat:

Kuroi you have the idea right. That is what I want to do. For some reason I cannot get any of my .gif's to have transparency though. :( I will look it up in photoshop. Make life much easier LOL!Ladysaat, when you Save for Web in photoshop and select gif as the file type, there is a checkbox for transparency in the right hand panel.

Yeah, I have it checked. There is GIF 32, 64, 128 and either Dither or No Dither. When I check tranparency there is a drop down box with no transparency, diffusion transparency dither, pattern transparency dither and noise transparency dither. I can't make heads or tails of anything. :P :P

But this isn't the thread for my whining about my lack of skills. I can google tutorials all night and figure it out LOL! I did change the code again as suggested. The logo shows up great and I have no background image. I checked the css and the .php files and all is as you guys said it should look so I'm lost. I have a goofy .gif up there now and that'll do till I learn what the heck I'm doing. :lookaroun

ladysaat:

There is GIF 32, 64, 128 and either Dither or No Dither. When I check tranparency there is a drop down box with no transparency, diffusion transparency dither, pattern transparency dither and noise transparency dither.
Despite all the different options, gifs are a pretty limited format, which is why your instincts to go for png were solid. The main limitation is that you can only have at most 256 colors. This mneans that when using features such as drop shadow and glows against a transparent background, large chunks of the image can end up as white - gif's best appropximation to not quite transparent. That's what's happening to your logo.gif. Most of it is transparent except for the hideous white bits around the letters.

To avoid this, you have to avoid using drop shadows etc. A pain, I know. You also need to avoid aliasing (i.e. choosing options like smooth from the text bar). You can simulate them drop shadows imperfectly by making a second copy of your text, making it a lighter color and offsetting it slightly. It's not ideal as the letters tend to be a bit jagged, but may be better than the effect you're getting at the moment. Here's an example using your font in bold. Attachment #120 You can click on it to see the full sized version.

A way to get the drop shadow to work with transparency (if you have a solid background color or very subtle pattern repeat) is to place the gif on the background in Photoshop, do the drop shadow, flatten the image and make sure it is the right pixel size. Then select out the background with the magic wand (adjacency off) until you have the right amount of shadow remaining. The "fade to white" will now fade to background color with a jump to white or transparent. The key here is not to change the resolution afterward, as you will then get some pixels that are a blend of background and white.

It wuold be possible to do this with a background image too if you knew exactly where the logo would appear against the bg, but if you have a full image already you might just as well make the logo part of it - then drop shadows need no messing around.

One question that I'm still wondering. When I do the correct change to the files and point to logo.png why is that everything BUT the logo file shows up. Then if I point it at my other logo.gif, the logo shows up and no background. I wonder why the .png wont show up at all. I am thinking that because I'm using Firefox? It doesn't recognize it. I guess then neither do the IE 6 users. Herm. I see people using font with shadows and making the logo look 3D, I am going to have start seriously asking people how they actually got it that way. I just want the logo raised, contoured and with a drop shadow so it looks like it's floating.

Firefox can see .png files and IE6 cannot see .png files.