Featured Post

Free vector images of mobile phones…

Hi again Aren't you bored from my posts? Well, if you are here, then either you're not or you are but you came here because there is some good stuff you can find here I hope the answer is none of them and is something about "You are not bored AND there is a lot of good stuff here ))" Anyway, today...

Read More

Wordpress essentials: animated snowy Christmas header

Posted by Roland | Posted in Tutorials | Posted on 02-12-2009

13

snow_image

Howdy, my dear frieds :) Have you mentioned something? Yep... That's a snowy mood I added to my blog :) Come on, it's already December outside and the Christmas is coming :) with a lot of preparing for exams stuff :(

Anyway, I don't want to think about sad things and let me tell you, how did I manage to put a snow to Wordpress header :) For lots of designers it's not a secret, how to put flash objects into header. For me it was...till the day I found out how can I do that.

And additional knowledge of how z-index property works gave me a possibility to put flash object on background not covering my buttons. I could put this snowy background on the whole webpage, but I don't want to :)

So, today I'm going to tell you about how I did that, maybe it will be usefull for somebody :)

So, lets start :) First thing you have to do is to download a snowy flash movie.

I used a Flash snow banner from FFILES.com, but as I didn't need the rest except snow, I modified it a bit. Modified version can be downloaded here.

I modified only two things - removed all objects except snow flake and added three lines of code:

Stage.align = "TL";
Stage.scaleMode = "noScale";
stop();

Explaining the code, I made a Stage.align to the Top Left corner (what is actually not needed at all, just a bad habbit of mine) and told flash not to scale the contents of the movie by Stage.scaleMode = "noScale"; command. By this I got a movie clip, what can be resized no matter how and the snowflakes will not be resized :)

Now, if you downloaded my version, just extract it somewhere and don't forget where you've extracted it. Cause I forgot several times and it was easier to download a new copy, than to find something in my PC :D

Next thing you will have to do is login to your Administrator panel and install a plug-in called "SWFObject". That's how we will embedd our flash movie. We also need to configure it a bit. You can configure it by yourself but I recommend using my configuration just to be sure that everything works. Click on image to view full size.

SWFObject

Now go to your Media Library and Add New file. Upload the snow_header.swf and copy the direct url to uploaded file.

It has to be something like:

http://yourname.com/wp-content/uploads/2009/12/todaysdate_snow_header.swf

But it can be different as well. Just be sure you copied it correctly. I know you not dumb, but anything can happen. Paste this url to some notepad, cause we need that after several steps.

Copy the code below:

<div style="position:absolute; top: 0px; right: 0px; left: 0px; z-index: 1;">
<?php wp_swfobject_echo("   FILE URL ", "   WIDTH ", "   HEIGHT "); ?></div>

And replace the strings FILE URL, WIDTH and HEIGHT. My width was 100% and height was set to 450.

Note, that if your width isn't 100%, then you'll need to modify the div style tag a bit. Instead of right: 0px; left: 0px; you would better write margin-left: auto; margin-right: auto; That will center your div. And of you don't need your div to be placed in some another way, then you have to know better, how you will position the flash movie.

Now insert this code into your header.php file right after <body> tag. Ok then, you're almost done. If you test your website now, it already has to show you the snow. But, sometimes it doesn't happen, or happening behind other elements :) Here is the moment you should turn on your brains and imagination. The problem is in layout and more often is in z-index properties set in your theme css file.

In my case everything was simple. I had no z-index properties at all and all I need to do is to set a z-index property for flash movie (z-index: 1; - meaning that all other elements are z-index:0 by default) and for buttons I really need to be clickable set z-index to something higher than 1, I've chosen 999 :D Yeah, that's totally bigger, than 1 :)

Somehow, not all elements came in front of my flash movie. After looking a bit at my CSS file I suddenly understood. z-index property won't work if your element has no position value. And here you go:

<div id="top_rss" style="position:relative; z-index: 999;">That's the place where RSS button is placed</div>

And now I have a really cool and dynamic snowy header and all buttons functioning in all browsers. I actually didn't check the IE 6, cause I think, that it's a really old one and if somebody is sitting on that, then I don't care :D

So, hope you liked it and it will be useful for you :)

Cheers!

Related posts:

  1. Adding additional page with own sidebar to Wordpress Template Howdy, Peo­ple from all over the world How are...

Related posts brought to you by Yet Another Related Posts Plugin.

Comments (13)

Mark Vater said on 02-12-2009

Thanx. Merry Christ­mas ;0)

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Roland said on 02-12-2009

You’re wel­come :) Merry Christ­mas you too :)

Like or Dis­like: Thumb up 1 Thumb down 1

Reply
Wordpress: Animated Snowy Header | rl Creative WP Air said on 02-12-2009

[…] Read the orig­i­nal post: Word­press: Ani­mated Snowy Header | rl Creative […]

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Twitted by ad_web said on 02-12-2009

[…] This post was Twit­ted by ad_web […]

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
uberVU - social comments said on 02-12-2009

Social com­ments and ana­lyt­ics for this post…

This post was men­tioned on Twit­ter by rl_creative: Word­press essen­tials: ani­mated snowy Christ­mas header — http://bit.ly/6k0z7d #design #word­press #Christ­mas #header #flash…

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
How to Decorate Your Blog for Christmas | WebDesignFan.com said on 11-12-2009

[…] This is a great way to add win­ter effect to your blog. You can add amaz­ing snow effect to your blog by fol­low­ing this tuto­r­ial – Word­press essen­tials: ani­mated snowy Christ­mas header. […]

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Wordpress: Animated Snowy Header | rl Creative | Squico said on 12-12-2009

[…] In: Word­press plu­g­ins 12 Dec 2009 Go to Source […]

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Shurandy Thode said on 12-12-2009

Great work! thanks for shar­ing =)
Shu­randy Thode´s last blog ..Favorite Car­i­ca­ture of 2009 — #1 [Digg] My ComLuv Profile

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Roland said on 12-12-2009

Thanks :) I’m glad you liked it.

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
dischul said on 13-12-2009

sim­ply but pow­er­full — i like it

merry christ­mas

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Roland said on 13-12-2009

Thanks and Merry Christmas !!!

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Serghei said on 29-12-2009

Cool tuto­r­ial! Thank’s for shar­ing!
Happy new year!
Serghei´s last blog ..WPSMASH’s Spe­cial Offer for Christ­mas My ComLuv Profile

Like or Dis­like: Thumb up 0 Thumb down 0

Reply
Mr.JOSE said on 16-01-2010

Thanks buddy… I always won­dered how this works… ;)

Like or Dis­like: Thumb up 0 Thumb down 0

Reply

Write a comment

CommentLuv Enabled

Advertise Here