Adding falling snow or pumpkins to your forum

This forum is now closed. Please ask all styles-related questions in the phpBB 3.0 Styles Support & Discussion Forum.
Locked
Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Adding falling snow or pumpkins to your forum

Post by Bullmax » Sat Oct 07, 2006 1:27 am

Thought I would share this with you all. If you would like to add falling snow or pumpkins to your forums for the holiday seasons, add this to your overall_header.tpl file.

Save and copy this pumpkin image to your forum directory > phpBB/images/pumpkin1.gif
Zip folder with the pumpkin image can be downloaded Here
Zip folder with the snowflake image can be downloaded Here

Change the path to your image on this line:

Code: Select all

// Set the letter that creates your snowflake (recommended:*)
var snowletter=" <img src=path_to_pumpkin_image/pumpkin1.gif> "
And now to the code:

Open overall_header.tpl

Code: Select all

# 
#-----[ FIND ]------------------------------------------ 
# 
</head>

# 
#-----[ BEFORE, ADD ]------------------------------------------ 
# 

<script>
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=7

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter=" <img src=path_to_pumpkin_image/pumpkin1.gif> "

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.5

// Set the maximal-size of your snowflaxes
var snowmaxsize=30

// Set the minimal-size of your snowflaxes
var snowminsize=10

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
	rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
	if (ie5 || opera) {
		marginbottom = document.body.clientHeight
		marginright = document.body.clientWidth
	}
	else if (ns6) {
		marginbottom = window.innerHeight
		marginright = window.innerWidth
	}
	var snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;
    	lftrght[i] = Math.random()*15;
    	x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].sink=sinkspeed*snow[i].size/5
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
		snow[i].style.left=snow[i].posx
		snow[i].style.top=snow[i].posy
	}
	movesnow()
}

function movesnow() {
	for (i=0;i<=snowmax;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
		snow[i].style.top=snow[i].posy

		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0
		}
	}
	var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
	window.onload=initsnow
}
</script>

#
#-----[ EoM ]------------------------------------------
#
Last edited by Bullmax on Sun Nov 23, 2008 1:49 am, edited 10 times in total.

User avatar
Emufarmers
Registered User
Posts: 811
Joined: Tue Jul 18, 2006 11:12 am
Contact:

Post by Emufarmers » Sat Oct 07, 2006 1:59 am

Do you have a demo for this? It sounds neat; I can recall seeing it on a vBulletin board once, but I'd like to see exactly what it looks like with this implementation. :)

Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Post by Bullmax » Sat Oct 07, 2006 2:01 am

Demo here

Peter77sx
Registered User
Posts: 3257
Joined: Wed Nov 09, 2005 2:51 pm

Post by Peter77sx » Sun Oct 08, 2006 12:10 pm

Pretty cool. one of my all time faves is the "flying ghosts" from dynamicdrive.com 8)

colouredshowponies
Registered User
Posts: 1
Joined: Wed Oct 25, 2006 12:31 pm

Post by colouredshowponies » Wed Oct 25, 2006 12:34 pm

can someone please post the actual code so i dont have to edit it as for some reason i just cant get it right

and i want falling pumpkins on my forum!

Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Post by Bullmax » Thu Oct 26, 2006 12:21 am

The actual code is in the first post. What is not working for you?

User avatar
Acorn
Registered User
Posts: 397
Joined: Tue Sep 26, 2006 8:11 am
Location: UK
Contact:

Post by Acorn » Thu Oct 26, 2006 10:11 pm

That is brilliant! Thank you. :D

I can't wait for Christmas to try the snow out on my real forum and not just my test forum. :lol:
Getting braver all the time. :D

User avatar
Ladysarajane
Registered User
Posts: 441
Joined: Sat Feb 18, 2006 10:05 pm

Post by Ladysarajane » Sat Oct 28, 2006 9:42 pm

Even a newbie like me was able to get it to work....even after messing up the path to the image several times! :oops:

Thanks!
Now for snowflakes, what do I put in for image path? Would the code look like this:
// Set the letter that creates your snowflake (recommended:*)
var snowletter=" * "
// (use "*" for snow flakes)

Is that what it means to do for snowflakes?

Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Post by Bullmax » Sat Oct 28, 2006 9:47 pm

Ladysarajane wrote: Would the code look like this:
// Set the letter that creates your snowflake (recommended:*)
var snowletter=" * "


Yes that is it.

User avatar
Ladysarajane
Registered User
Posts: 441
Joined: Sat Feb 18, 2006 10:05 pm

Post by Ladysarajane » Sat Oct 28, 2006 10:08 pm

Thank you! And somehow, I don't know how, that script works on my site in Firefox as well as IE. 8O

Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Post by Bullmax » Sat Oct 28, 2006 10:12 pm

I wonder if there is a setting in firefox that you can change?

User avatar
Ladysarajane
Registered User
Posts: 441
Joined: Sat Feb 18, 2006 10:05 pm

Post by Ladysarajane » Sat Oct 28, 2006 10:17 pm

I don't know....I went to the demo site you had posted and I do not see the pumpkins in Firefox....but at my forum Ladysarajane's Doghouse, I can see the pumpkins in Firefox and IE.
I do not know what the difference is.

MissMel
Registered User
Posts: 5
Joined: Sun Oct 29, 2006 12:32 pm

Post by MissMel » Sun Oct 29, 2006 1:51 pm

Ok...I am lost sorta. lol

Where do I save the image to? I got the falling effect but they are red x's right now. I have saved the image in my forum/images and also in the templatefolder/images. I just can't seem to get it to pick it up. I think my problem lies in the path to the image. Help?

------------------------------
ammended....

I think I need another cup of coffee. It was a duh moment but I got. rofl

Cool script ...thanks for sharing it. The mommies in my forum will love it. haha

Bullmax
Registered User
Posts: 2016
Joined: Fri Jan 30, 2004 3:36 pm

Post by Bullmax » Sun Oct 29, 2006 2:15 pm

Ladysarajane wrote: I don't know....I went to the demo site you had posted and I do not see the pumpkins in Firefox....but at my forum Ladysarajane's Doghouse, I can see the pumpkins in Firefox and IE.
I do not know what the difference is.


I had another script that was conflicting with it. I removed it and now I see it in Firefox.

User avatar
Ladysarajane
Registered User
Posts: 441
Joined: Sat Feb 18, 2006 10:05 pm

Post by Ladysarajane » Sun Oct 29, 2006 6:45 pm

MissMel wrote: Ok...I am lost sorta. lol

Where do I save the image to? I got the falling effect but they are red x's right now. I have saved the image in my forum/images and also in the templatefolder/images. I just can't seem to get it to pick it up. I think my problem lies in the path to the image. Help?

------------------------------
ammended....

I think I need another cup of coffee. It was a duh moment but I got. rofl

Cool script ...thanks for sharing it. The mommies in my forum will love it. haha



I know people on my board love it and the path to the image is tricky. I kept forgetting the first "/"
for clarification I have my image in the default image folder so my path is
" /phpbb2/images/pumpkin1.gif " with "pumpkin1' being the actual name of the picture of the pumpkin.

Locked

Return to “[2.0.x] Styles Development & Discussion”