Resource icon

Smashing Christmas Lights 1.1

No permission to download

MagnusB

Well-known member
MagnusB submitted a new resource:

Smashing Christmas Lights (version 1.0) - Smash all the lights

I think this was a request, but I can't really find it. This is a "simple" template modification that adds smashable christmas lights (with sound) above your header.

Credits: http://www.schillmania.com/projects/snowstorm/lights/?size=tiny

Warning: Doing this will leave your moderator bar inaccessible (for the time being, I might get some time to try to figure it out).

You need to download the attached zip file, I think that should include everything you need. Upload it...

Read more about this resource...
 
Just a(nother) small warning: I noticed Chrome "lagging" a bit after leaving the page open for a while. I think it is due to the flash files needed (the sound, if I am not mistaken) and this computer's inability to run flash at all.
 
/* XLSF 2007 */ #lights { position:absolute; left:0px; top:22px; width:100%; height:75px; overflow:hidden; z-index: 5; }

Try changing number on top:20-22px so it won't cover moderator bar. Let me know if that works i might have to give this one a shot . Do you have demo url ?
 
Try changing number on top:20-22px so it won't cover moderator bar. Let me know if that works i might have to give this one a shot . Do you have demo url ?
Yeah, that will move it just below the moderator bar, however, moderator bar is only visible for moderators and admins. Another solution is to add this before <div id="lights"> in smashing_lights template:
Code:
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
<style type="text/css">#lights {height: 52px !important;top: 23px !important;}</style>
</xen:if>

EDIT:
No, I don't have a demo URL, cause I don't want to add this to my site (no offense to those who want). I just did it cause I was a bit bored at work, and wanted to see if I could figure it out :)
 
My dev board has it installed, I'm not much for demos on my shares, I have more fun creating them than using them....

I have some fresh screenshots here:
Capture.webp

Capture2.webp

It seems it does another trick on the top, the login bar is also rendered unclickable.
 
My demo board has it installed, I'm not much for demos on my shares, I have more fun creating them than using them....
You probably cannot share your demo board url - But can you at least provide a screencap. I'm simply curious as to how you've adapted it to fit on a xenforo board and what it looks like. Well - we know what it looks like - I just want to put you to work on screencaps yehehehe :P
 
You probably cannot share your demo board url - But can you at least provide a screencap. I'm simply curious as to how you've adapted it to fit on a xenforo board and what it looks like. Well - we know what it looks like - I just want to put you to work on screencaps yehehehe :p
Edited my post above, been hard at work screencapping. I also noticed a few issues I will be fixing, cause it seems there is still a problem with the height of it. I want to try out doing it a bit different (placing it with the header, and having it being moved on top by xenForo instead of doing it my self).
 
My dev board has it installed, I'm not much for demos on my shares, I have more fun creating them than using them....

I have some fresh screenshots here:
View attachment 37961

View attachment 37962

It seems it does another trick on the top, the login bar is also rendered unclickable.

Yes you won't be able to click Login /Click on Logo to refresh page . That totally makes impossible for me to use . If you log out and check ...the top part looks weird where lights are positioned.
 
I just fixed it. Basically, undo what you did with PAGE_CONTAINER (<xen:include ..... >), instead open header and find:
HTML:
<xen:hook name="header">
<div id="header">
Add after:
HTML:
    <xen:include template="smashing_lights" />

Then open smashing_lights.css and find:
Code:
#lights {
position:absolute;
left:0px;
top:0px;
width:100%;
height:52px;
overflow:hidden;
z-index: 5;
}
Replace with:
Code:
#lights {
position:absolute;
left:0px;
top:0px;
width:100%;
height:52px;
overflow:hidden;
}

EDIT:
Looked through the instructions, they are the same I have running on my dev board, and there it seems to be working nicely on the default style. If you use a custom style with a larger header, you can do more. As it is on the default style, the light bulbs are taller than the distance between the moderator bar and the navigation bar...

I think I have solved the problems with suppressing important links, login link is visible, and moderator bar is visible.
 
Well, it was a fun ride. I started reading the script file and found a few configs you can do within the script it self. The lightbulbs comes in different sizes, and you control it on line 52 in christmaslights.js:
Code:
  this.lightClass = (screenX>1280?'small':'pico'); // kind of light to show (32px to 96px square)

On line 36 you see the sizes. Basically what the line above does is that if the screen width is above 1280px, choose small size, else choose pico. Pico is the smallest, then there is tiny (50), then there is small (64), then there is medium (72), then there is large (96). To change the default size, find the code above, then replace it with:
Code:
  this.lightClass = ('pico'); // kind of light to show (32px to 96px square)

This will force the "pico" size, if you want another, use tiny, small, medium or large instead of pico.
 
Attached this post is the christmaslights.js with the default sizes changed, if you want smaller or larger. Just overwrite the one included (which defaults to pico only) in the resource download with your preferred size. Note that the versions attached here will change to pico if your screen width is less than 1280px. You can change the width for applying pico on line 52 in christmaslights.js, just change 1280 here:
Code:
screenX>1280
To whatever you want it to be.

EDIT: I have deleted the sizes for now, I will reupload them with the fix applied shortly.
 

Attachments

Top Bottom