By henwoodr on

I am using drupal 5.1 and im trying to update the header logo image. What I want to know is how I can upload a new image (not square sized) and have the changes to the background color update the background color of the logo as well??

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

short answer: you can't

why?
The color picker only changes an entire image, not parts of it. In your case you would want the image untouched and the only the background changed.

what should I do than?
logos used are typically created using a transparent background, which is what allows the image to blend with the background image. Not all browsers support transparent png images.

henwoodr’s picture

henwoodr commented

I understand your point but if thats true, how does the default logo image change when you adjust the colors?

vm’s picture

vm commented

I believe the image is on a transparent background ?

henwoodr’s picture

henwoodr commented

Gotcha, I have tried to make it with the transparent background.

It did work with Firefox but not with IE 6. What makes that odd to me is that when I go back to the default logo that as you said, has a transparent background. It works in IE 6.

Any idea on why the only the default logo with the transparent background would work in IE 6 and not my custom logo with the same transparent background?

vm’s picture

vm commented

heading off to double check that I know exactly what im talking about hang tite. maybe its done in .css ?
Ha! seems i was talking crap! garland does not use a transparent png and DOES indeed change the background of the header logo.
more information on how to implement the color picker on your logo can be found here http://drupal.org/node/108459
specifcally under the header Image slices , now it doesn't hand hold you through it, but it may help.

henwoodr’s picture

henwoodr commented

Thanks man, I appreciate the help. Ill take a look.

henwoodr’s picture

henwoodr commented

FOUND A SHORT CUT!!!

Well i dont know if you knew how to do this but i was able to open the themes folders "themes\garland\minnelli\color" and "themes\garland\color" and edit the base.png files. All you have to do is change the default logo image to the one you make and save the new copy.

It worked perfectly in IE6 and Firefox... WOOooo HOooOO!!!!!!!!!!!

vm’s picture

vm commented

Glad you got it sorted. I didn't know : ) otherwise I wouldn't have tried to lead you astray in first place...... but now that I do know, I've bookmarked this thread for future reference.

Congrats!

GreenMoon’s picture

GreenMoon commented

I am using a transparent GIF for my logo. I've tried it on 5 different themes (garland, zen, antique_modern, fancy, multiflex37) and the transparency works for IE6, IE7, Firefox 2, and Opera 9. I don't think PNG is as widely supported as GIF. I only use GIF and JPG for web site graphics and never have browser issues with the images.

henwoodr’s picture

henwoodr commented

Well its working for me for now and the default file type is .png so im just going to stick with that. Ill probable change it later but this was more of a mission for me to find out how the default logo changed with the color changes. I found it so its time to rejoyce and party!

joachim’s picture

joachim commented

By changes to the background colour -- you mean using the color module and changing the colours in the theme settings?

It's possible to have your logo change too so it matches.

The logo used on the site when the color module is active is NOT the logo.png that's in the theme folder. You have to look inside (mytheme)/color for base.png.
That's a file that's mostly transparent bits, set out for the module script to chop up and build images for the chosen colours.
You also need to look at color.inc, which has the coordinates.
You need to very carefully replace the drupal logo in that with your own logo, noting where the top left of the logo is meant to be (I took the small logo.png and lined it up to find the rectangle that the script cuts out for the logo -- you could also look at the numbers in color.inc).
If your logo fits in that rectangle, you're done.
If not, you need to edit color.inc so the coordinates mark a rectangle for your logo.

It's quite tricky work but the result is impressive :)

More here: http://drupal.org/node/108459