# HTML CSS Masters: Can U tell me where to put my animated gif for my header!



## Duran (Jul 23, 2007)

Hello,

I am using the Big Cartel basic $10 set up, but I want to spice it up with a nice Animated GIF. Header! Then I'll slowly upgrade over the month.. 

But for now...

Here is my problem on Big Cartel's basic set up they have a "browse" button for your Header and when I put in my Animated Gif file, it wont animate! It shows up but it doesnt move.

I wrote the support and he said if I put in the CSS section it will work?

Is that correct? If not how do I get my Header Gif to animate in the Big Cartel basic set up?

============

IF so.. here is a Copy & Paste of my setup.. can you tell me the (exact area) and whatever codes or "do dad's" I will need so my Header will show up - animate and be on every page 

Thanks so much!




/*============================================================
Theme Styles - contains all the base styles for the theme.
To receive automatic updates and bug fixes, we recommend
leaving this import and overriding specific styles below.
============================================================*/
@Import url(/themes/sexy/stylesheets/styles.css);

/*============================================================
Basic Styles - used for the simple controls.
============================================================*/
/* @gui Font */
* 
{font-family: "Trebuchet MS", Arial, sans-serif;}

/* @gui Background */
body 
{background-color: #000000 ;}

/* @gui Text */
body, 
p, 
input, 
textarea, 
#product-details .price, 
#faq-content .faq-list dt, 
#contact-form label, 
#cart-footer .cart-total #cart-shipping-tax p 
{color: #666666;}

/* @gui Links */
a:link, 
a:visited, 
#products .product-a h3, 
#products .product-a p 
{color: #000000 ;}

/* @gui Links rollover */
a:hover, 
a:active, 
#products .product-a:hover h3, 
#products .product-a:hover p 
{color: #5575DD;}

/* @gui Header background */
#main-title, 
#navigation div.pod h3, 
#minicart h3, 
#cart-head 
{background-color: #32323e;}

/* @gui Header text */
#main-title h2, 
#navigation div.pod h3, 
#minicart h3, 
#minicart .minicart-contents, 
#cart-head 
{color: #32323e;}
#minicart .minicart-total 
{border-left-color: #32323e;}

/* @gui Sidebar links */
#navigation div.pod a 
{color: #000000;}

/* @gui Sidebar rollovers */
#navigation div.pod a:hover 
{color: #5575DD;}

/* @gui Products background */
#products, 
#products .product-pic,
#product-images .images-nav
{background-color: ;}

/*============================================================
Custom Styles - add and override styles below.
============================================================*/


----------



## veedub3 (Mar 29, 2007)

yes it goes in the CSS, and you will put it in the section under "custom Styles- add and override styles below."


----------



## Duran (Jul 23, 2007)

Hey I wanted to ask... 

Ok I have my Header done.. I am using Big Cartel's $10 site.

For my Header should I make it a Animated Gif file 

OR

Should I make it a Flash File? Does it matter??

Also, my Animated Header is about 10-13 seconds long, will this work? Is that to big or long of a animation gif file?? 

What is the max for the most part for a Header to be, so it actually loads at a reasonable time?

Thanks!


----------



## rogueSquirrel (Dec 8, 2010)

Duran said:


> Hey I wanted to ask...
> 
> Ok I have my Header done.. I am using Big Cartel's $10 site.
> 
> ...


That's a bit long for an animated Gif, especially if there are a lot of images that it's transitioning through, so the size for animatied gif will be prohibitive in this type of use. Flash would probably be the better way to go, because it would work better at larger sizes and with images.


----------



## Duran (Jul 23, 2007)

yeah my friend made it as a antimated gif and it looked bad.. pixeled and just bad.

we are new.. he made the thing in after effects... how do you save it as a flash file??


----------



## Duran (Jul 23, 2007)

You know when you dont have a clue how to do something, and you dont have $3000 to pay someone this stuff get annoying.




My friend who knows a little more then me more or less we made a header on after effects, now we are trying to save it.. we made a animated gif header and it looked like ****. 

To make it in a flash file.. for 99.9% of people to see should it be a "*F4V file"*

because he emailed it to me and my computer can't find the program to open it. This never ends.. I dont think Im ever going to open my doors. I swear! 

What should he save it as.. so basically everyone can see. I guess im the .1% that can't open it...omg. They have had me download all these extensions and it still wont play. 

welcome to my life of trying to save $3000 since september. lol


----------



## rogueSquirrel (Dec 8, 2010)

Duran said:


> You know when you dont have a clue how to do something, and you dont have $3000 to pay someone this stuff get annoying.
> 
> 
> 
> ...


No, F4V is not the correct format. If I'm not mistaken, F4V is what Flash renames MP4 Audio (which isn't close to what you're even trying to do). The file should save out as a SWF, I don't use After Effects much, but if your buddy is using After Effects CS5, if he goes to the File Menu, and selects Export, in the flyout menu there will be an option to export for Flash Player, which will create an SWF file.

SWF is a format that most of the web should be able to handle and if you can't play it, just go to Adobe's site and download the Flash Player (it's free) and you'll be able to view the file.


----------

