1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained Smashing Christmas Lights 1.1

Smash all the lights

  1. MagnusB

    MagnusB Well-Known Member

    MagnusB submitted a new resource:

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

    Read more about this resource...
     
    Brandon Sheley likes this.
  2. MagnusB

    MagnusB Well-Known Member

    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.
     
  3. iTuN3r

    iTuN3r Well-Known Member

    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 ?
     
    MagnusB likes this.
  4. MagnusB

    MagnusB Well-Known Member

    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 :)
     
    iTuN3r likes this.
  5. MsJacquiiC

    MsJacquiiC Well-Known Member

    Ha! Love the smashing lights = Thanks for the share.
    Is there a xenforo forum with it installed? I'd love to take a peek :)
     
  6. MagnusB

    MagnusB Well-Known Member

    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.PNG

    Capture2.PNG

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

    MsJacquiiC Well-Known Member

    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
     
    MagnusB likes this.
  8. MagnusB

    MagnusB Well-Known Member

    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).
     
    MsJacquiiC likes this.
  9. iTuN3r

    iTuN3r Well-Known Member

    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.
     
  10. MagnusB

    MagnusB Well-Known Member

    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.
     
    iTuN3r likes this.
  11. iTuN3r

    iTuN3r Well-Known Member

    I might have to give it a shot and see can i have your Demo board URL ?
     
  12. MagnusB

    MagnusB Well-Known Member

    It's my dev board, so I can't really give any access to it. I could set up a temp access for you and MsJaquil if you really want to see it in action
     
    MsJacquiiC and iTuN3r like this.
  13. iTuN3r

    iTuN3r Well-Known Member

    That will work . Thanks
     
  14. MagnusB

    MagnusB Well-Known Member

    Sent a PC, will have the user up for another hour or two, then I'll delete it.
     
    iTuN3r likes this.
  15. MsJacquiiC

    MsJacquiiC Well-Known Member

    Sweet. Sure. I wanna see it in action!
     
    iTuN3r likes this.
  16. iTuN3r

    iTuN3r Well-Known Member

    Looking great there and yes actually it's nice :) I will give it a shot in a while.
     
    MagnusB likes this.
  17. MsJacquiiC

    MsJacquiiC Well-Known Member

    Nice! Looks lovely on your testboard. Just for fun, I may actually put them up the day after Christmas 'til New Years. Thanks again for the share!
     
    MagnusB and iTuN3r like this.
  18. MagnusB

    MagnusB Well-Known Member

    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.
     
    MsJacquiiC likes this.
  19. MagnusB

    MagnusB Well-Known Member

    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.
     

    Attached Files:

    8thos and MsJacquiiC like this.
  20. iTuN3r

    iTuN3r Well-Known Member

    Awesome let me get started on it.
     

Share This Page