Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Animated graphics header: is possible? WordPress

  • SOLVED

To link: http://classic.g0su.it you can see that the header of the site consists of an image.JPG. I have heard that you can put an animated gif or flash animation of images scroll instead of a single static image. Even the new Artister 2.3 talk about it but I could not figure out how to do. For everyone: I am not an expert on WP, I might respond slowly during the day because I'm in the office and I have to work. If you need an account on the blog, let me know. Regards and thanks for your help!

Answers (4)

2010-02-10

Jeff Owens answers:

Open the file "style.css" which is in your /wp-content/themes/classic2010 folder. You can open it in Notepad or a similar text editor.

Look for a section that looks like this:
div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 1260px;
height: 225px;
<code>background-image: url('images/Header.jpg');

background-repeat: no-repeat;
background-position: center center;
}</code>

You'll need to put the animated gif file into /wp-content/themes/classic2010/images/ folder and the image should be 1260px wide by 225px in height. Name the picture whatever you want, but replace the:

background-image: url('images/Header.jpg');

section with your new name. So if your file was named "new_header.gif", you would enter:
background-image: url('images/new_header.gif');

Save the file and you should be good to go!


mothernatur3s0n comments:

Ok thanks, i will try but for flash file? because the gif have a low resolution and i want use a flash file that incorporate high resultion images.


mothernatur3s0n comments:

I have finded style.css and style.ie6.css and style.ie7.css. I must change all this css file or only style.css?


mothernatur3s0n comments:

Your solution work fine, atm im thinking if choice gif solution or swf solution.

2010-02-10

Ali Hussain answers:

Download the plugin [[LINK href="http://kimili.com/plugins/kml_flashembed/wp"]]here[[/LINK]]. To use this plugin, upload it to your plugins directory and activate it from plugins menu. Then go to your header.php file in themes directory and replace the header code with the following code –

[kml_flashembed movie="/path/to/your/movie.swf" height="value" width="value" /]

Of course, replace the values with the actual height and width, and the path to the URL where you've saved the swf file.

BTW, this code can be used any place, header/sidebar/footer etc

Also you can use gif, like mentioned above.


mothernatur3s0n comments:

Thanks for your asnwer i will see if i can able this features without any plugin firstly.


mothernatur3s0n comments:

Exactly when you talk to header code what you mean? Im not expert, where i must repalce the original code with your "[kml_flashembed movie="/path/to/your/movie.swf" height="value" width="value" /]"?


mothernatur3s0n comments:

You must try to writing more simple cause im a newbie. Thanks

2010-02-10

Dan Fraticiu answers:

If you want a gif file, see Jeff's answer , but really an anymated gif that size is a <strong>REALLY, REALLY, BAD IDEEA</strong>.

For flash: get your flash file, put it in your theme folder and rename it to <strong>header.swf</strong>.

Now go to your header.php files in the theme folder, find this line:

<div class="Header-jpeg"></div>

An put this between the <div > tags:


<div class="Header-jpeg">
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="<?php echo get_bloginfo('template_url').'/header.swf'; ?>" width="1260px" height="225">
<!-- <![endif]-->
<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="1260px" height="225">

<param name="movie" value="<?php echo get_bloginfo('template_url').'/header.swf'; ?>" />
<!--><!--dgx-->
<param name="loop" value="true" />
<param name="menu" value="false" />
<p>This is alternative content.</p>
</object>
<!-- <![endif]-->
</div>


mothernatur3s0n comments:

<blockquote>If you want a gif file, see Jeff's answer , but really an anymated gif that size is a REALLY, REALLY, BAD IDEEA.</blockquote>

Why bad idea? I just edited the header with Jeff info's and all works perfectly: maybe you mean that one gif with 450kb of size is too big? The swf file is 2mb, so what the difference? I will try your solution just now.


Dan Fraticiu comments:

Yeah the size is just half the story, gifs can have only 256 colors and at that size it will show.

It's more of an estetic problem than a tachnical one, but that is not the point of this question.


mothernatur3s0n comments:

I tryed to modify the h eader.php how u writed up:

<div class="Header-jpeg"><!--[if !IE]> -->

<object type="application/x-shockwave-flash"

data="<?php echo TEMPLATEPATH.'/header.swf'; ?>" width="1260px" height="225">

<!-- <![endif]-->



<!--[if IE]>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="1260px" height="225">

<param name="movie" value="<?php echo TEMPLATEPATH.'/header.swf'; ?>" />

<!--><!--dgx-->

<param name="loop" value="true" />

<param name="menu" value="false" />



<p>This is alternative content.</p>

</object>

<!-- <![endif]-->

</div>



But apparentyl this solution dont works fine, look the ss file that i have attached. On Firefox the header is static and on left side up appears this write: "This is alternative content." On IE 8.0 the header appears white without any image.