Featured Post

Weekly inspiration #1

Hi again How are you? Today is Mon­day and I hope you had a good rest on hol­i­day Any­way, if you didn’t, then I def­i­nitely did This hol­i­day was full of fun, rest and var­i­ous emo­tions. I vis­ited two birth­day par­ties + went fish­ing on Sun­day night. That was just awe­some....

Read More

WordPress essentials: animated snowy Christmas header

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

Tags: , , , , , , , , ,

13

snow_image

Howdy, my dear frieds :) Have you men­tioned some­thing? Yep… That’s a snowy mood I added to my blog :) Come on, it’s already Decem­ber out­side and the Christ­mas is com­ing :) with a lot of prepar­ing for exams stuff :(

Any­way, I don’t want to think about sad things and let me tell you, how did I man­age to put a snow to Word­Press header :) For lots of design­ers 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 addi­tional knowl­edge of how z-index prop­erty works gave me a pos­si­bil­ity to put flash object on back­ground not cov­er­ing my but­tons. I could put this snowy back­ground on the whole web­page, but I don’t want to :)

So, today I’m going to tell you about how I did that, maybe it will be use­full for some­body :)

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

I used a Flash snow ban­ner from FFILES.com, but as I didn’t need the rest except snow, I mod­i­fied it a bit. Mod­i­fied ver­sion can be down­loaded here.

I mod­i­fied only two things — removed all objects except snow flake and added three lines of code:

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

Explain­ing the code, I made a Stage.align to the Top Left cor­ner (what is actu­ally not needed at all, just a bad hab­bit of mine) and told flash not to scale the con­tents of the movie by Stage.scaleMode = “noScale”; com­mand. By this I got a movie clip, what can be resized no mat­ter how and the snowflakes will not be resized :)

Now, if you down­loaded my ver­sion, just extract it some­where and don’t for­get where you’ve extracted it. Cause I for­got sev­eral times and it was eas­ier to down­load a new copy, than to find some­thing in my PC :D

Next thing you will have to do is login to your Admin­is­tra­tor panel and install a plug-in called “SWFOb­ject”. That’s how we will embedd our flash movie. We also need to con­fig­ure it a bit. You can con­fig­ure it by your­self but I rec­om­mend using my con­fig­u­ra­tion just to be sure that every­thing 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 some­thing like:

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

But it can be dif­fer­ent as well. Just be sure you copied it cor­rectly. I know you not dumb, but any­thing can hap­pen. Paste this url to some notepad, cause we need that after sev­eral 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 mod­ify the div style tag a bit. Instead of right: 0px; left: 0px; you would bet­ter write margin-left: auto; margin-right: auto; That will cen­ter your div. And of you don’t need your div to be placed in some another way, then you have to know bet­ter, how you will posi­tion 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 web­site now, it already has to show you the snow. But, some­times it doesn’t hap­pen, or hap­pen­ing behind other ele­ments :) Here is the moment you should turn on your brains and imag­i­na­tion. The prob­lem is in lay­out and more often is in z-index prop­er­ties set in your theme css file.

In my case every­thing was sim­ple. I had no z-index prop­er­ties at all and all I need to do is to set a z-index prop­erty for flash movie (z-index: 1; — mean­ing that all other ele­ments are z-index:0 by default) and for but­tons I really need to be click­able set z-index to some­thing higher than 1, I’ve cho­sen 999 :D Yeah, that’s totally big­ger, than 1 :)

Some­how, not all ele­ments came in front of my flash movie. After look­ing a bit at my CSS file I sud­denly under­stood. z-index prop­erty won’t work if your ele­ment has no posi­tion value. And here you go:

<div id=“top_rss” style=“position:relative; z-index: 999;”>That’s the place where RSS but­ton is placed</div>

And now I have a really cool and dynamic snowy header and all but­tons func­tion­ing in all browsers. I actu­ally didn’t check the IE 6, cause I think, that it’s a really old one and if some­body is sit­ting on that, then I don’t care :D

So, hope you liked it and it will be use­ful for you :)

Cheers!

No related posts.

Related posts brought to you by Yet Another Related Posts Plu­gin.

Comments (13)

Mark Vater said on 02-12-2009

Thanx. Merry Christ­mas ;0)

Like or Dis­like: Thumb up 0 Thumb down 0
Roland said on 02-12-2009

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

Like or Dis­like: Thumb up 0 Thumb down 0
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
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
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
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
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
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] =-.

Like or Dis­like: Thumb up 0 Thumb down 0
Roland said on 12-12-2009

Thanks :) I’m glad you liked it.

Like or Dis­like: Thumb up 0 Thumb down 0
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
Roland said on 13-12-2009

Thanks and Merry Christmas !!!

Like or Dis­like: Thumb up 0 Thumb down 0
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 =-.

Like or Dis­like: Thumb up 0 Thumb down 0
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