How do I add animated .gif as store logo?

[jeu4328]

I am interested in using an animated .gif file as my store logo. I was able to find a post where someone else was looking for the same thing ... in 2008 ... but I am not seeing a more recent request. I am using osC version 2.3.3

 

My animated .gif file is 960x720 in size.

 

The Admin program will only allow .png files to be uploaded as the store logo ... and I know that I need to go through cPanel File Manager, but I have no idea which file I need to update to add the .gif file.

 

The following link will take you to the inquiry that was posted in 2008:

 

http://www.oscommerce.com/forums/topic/313352-add-an-animated-gif-to-header/page__hl__+animated%20+gif%20+logo#entry1299882

 

The store owner was instructed to look for a specific line of code in the includes/header.php file. I am not seeing this line in the includes/header.php file: <TD class="headertext"> </TD>

 

Can someone please tell me where I can go to add my animated .gif as my logo, and the code that I need to use to make this work?

 

Thank you very much for your help,

Jewell

[jeu4328]

Please disregard. I was able to figure it out.

 

I the event that someone else would like to do this: I just named my .gif file store_logo.gif and uploaded it into the images folder.

I then went into includes/header.php file and replaced .png with .gif on the following line:

 

<div id="header" class="grid_24">

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.gif', STORE_NAME) . '</a>'; ?></div>

 

I'm not certain that is how I should have done it ... but it works :P

[MrPhil]

You figured out the right way and are now well on your way to becoming an Expert.

 

Just a note of caution: be careful with animated GIFs because:

1. Many people find them annoying, especially at large sizes -- try to keep the motion effects subtle.
   
2. They're much larger than a static image file, and take longer to transfer (longer wait for the user, higher bandwidth bills for you). Don't overdo it.
   
3. If an animated GIF is resized by the browser for some reason, the animation will be broken and you'll see only the static first frame.
   

[jeu4328]

Thank you very much for your very good advice. I am sure you are absolutely right. I will definitely keep it in mind. :)

 

Jewell

 

[♥joli1811]

Hi,

Using an animated gif of this size 960x720 would really not recommend it will slow the page loads time tremendously and very likely be stuttered sort of shaky.

the same effect can be achieved using a background image and your effect somewhere on top.

 

Regards

Joli

[MrPhil]

Yes, the store logo is normally just a smallish image up at the top. 960 x 720 would easily fill a screen. What are you trying to do with a logo that large? Do you want it as a background image for the entire page? You could do that and then have a normal sized store logo (perhaps the only animated part).

[jeu4328]

The reason the logo is so large is because it includes 3 'framed images' of my embroidery designs. When I make it any smaller, the images seem too small.

 

I will work with it and try to make it smaller. Your advice is very sound.

 

Thanks so much for your help. I'd be lost without this forum ... Everyone is so helpful and knowledgeable! I wish I had a fraction of the knowledge of everyone here. Oh wait ... I DO! Only a small fraction!!! :lol:

[♥14steve14]

Could you not add the images to a slider addon on the front page and have a normal sized header graphic logo.

[MrPhil]

Yeah, you'd want them only on the front page (either one at a time or all together), so make them part of the front page somewhere. And as a slide show (not animated), they would be much smaller images and load much faster*. Maybe you could have a link/button on other pages to pop up a lightbox and/or slideshow, if you really want access to them on other pages. Also consider using a faded (low contrast) image as a (non-animated) full page background image, to show off your work without taking up all the screen space.

 

* slide shows can be set up to prefetch the next image while the customer is admiring the current one, so the only wait time is for the first load

 

I wish I had a fraction of the knowledge of everyone here

Let's see... tiny fraction * tiny amount ==> too small to bother with :)

[jeu4328]

Great advice ... thank you so much! :)

 

I think having a slideshow would be a nice alternative.

Is it possible to create a new box in my right hand column which contains the slideshow?

Do you have any suggestions as to which add-on would work the best for that?

 

Thank you

[jeu4328]

I've followed your advice and have changed my logo to a much smaller non-animated transparent .png image 960x163 in size.

 

However, because I have set my images to have borders on my eStore, my logo also has a border around it ... which I'd like to remove.

 

How would I go about removing only the border on the logo image? Can you tell me where to make the change and what to enter? I've tried changing it in the style sheet, and that didn't work. I also tried to change it in header.php ... but I wasn't sure what to enter or where to enter it. Nothing I have tried has worked.

 

And, again, if you could please advise me regarding my previous question regarding the slideshow I would truly appreciate your help.

 

Thank you,

Jewell

[MrPhil]

Link to your site so we can see what you're talking about, or an annotated screen shot? What does the page HTML source (browser View > Page source, or use Firebug or the equivalent) show for the <img> tag for your logo? Does it have a border="1" or similar attribute? I think your logo is a link, and it sounds like you're set up to draw borders around all link images. Do you really need that? How did you try changing the style sheet? If the logo has a unique class or id you should be able to suppress any border added in CSS, but not a border added as an attribute.

[jeu4328]

Wow ... I'm so new at this that I'm not sure I understand all of your questions.

 

http://jewellsembroidery.com/shop/

 

What does the page HTML source (browser View > Page source, or use Firebug or the equivalent) show for the <img> tag for your logo? Does it have a border="1" or similar attribute?

(I'm not sure where to go to find this information)

 

I set my stylesheet as follows:

img {

border: 2px;

border-style: double;

border-color: #000000;

border-width: 4px;

}

 

I like having a border around the pics of the items I'm selling, as well as around the boxes in the right column.

 

I received help to remove the border around the little mouse .png and I was hoping to also be able to remove the border around the logo. I think it will look cleaner without it.

 

Thank you for your help :)

[multimixer]

Add following to your file stylesheet.css after the general img rule

 

#storeLogo img {
   border: none;
}

[jeu4328]

That worked! Thanks a million ... it looks so much better!!!

I appreciate your help!!! :thumbsup:

[jeu4328]

One more thing ... to remove the border around the banner at the bottom of the page ... I'm assuming I'd do the same thing in the stylesheet.

Instead of storeFooter ... what would I enter? Thank you.

[MrPhil]

You can try

#storeLogo img, div.grid_24 > a > img {
  border: none;
}

 

If it takes out too many image borders, let us know and we can try something else.

[jeu4328]

It works beautifully! THANK YOU! (Yes, I AM shouting ... from the rooftops, I'm so happy!)

Thanks again for your help! :)