Share your Discourse Halloween decorations!

Similarly to Christmas decorations, here’s a topic to share Halloween decorations.

Spooky ghost


The ghost has 1 out 10 chances by default to appear when opening the composer.
  1. Upload the following image in your theme/component and set the variable name as ghost:

ghost
Source

  1. Add this javascript in your theme or component </head> tab:
    You can increase or decrease the value of the rarity variable to make the ghost appear less or more often.

    <script type="text/discourse-plugin" version="0.8.23">
    Discourse.appEvents.on('composer:opened', () => {
        let rarity = 10 // the ghost has 1 out of [rarity value] chance to appear when opening the composer
        if (Math.floor(Math.random() * rarity) == 0) {
            let halloweenGhost = document.createElement("img");
            halloweenGhost.id = "halloween-ghost";
            halloweenGhost.src = settings.theme_uploads.ghost;
            document.getElementsByTagName("body")[0].appendChild(halloweenGhost);
            setTimeout(function () {
                halloweenGhost.classList.add("ghost-show");
            }, 0);
            setTimeout(function(){
                halloweenGhost.remove();
            }, 1000);
        }
    });
    </script>
    
  2. Add this code in the CSS tab:

    #halloween-ghost {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(.5);
        z-index: 10000;
        opacity: 1;
        pointer-events: none;
        transition: opacity .75s ease-in, top .75s ease, transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &.ghost-show {
            transform: translate(-50%, -60%) scale(.6);
            opacity: 0;
        }
    }
    @media all and (min-width: 1024px) {
        #halloween-ghost {
            transform: translate(-50%, -50%) scale(.75);
            &.ghost-show {
                transform: translate(-50%, -60%) scale(.9);
            }
        }
    }
    

:warning: The ghost “jumps” on mobile when the virtual keyboard appears.

Spiderwebs


The webs will be hidden on smaller screens.

How to add this to your forum:

  1. Create a new theme component or edit your theme, upload this image, and set the variable name as spiderweb:


    Source

  2. Add the following CSS to your theme or component:

    @media all and (min-width: 1300px) {
       #main {
         &:before, &:after {
             content: "";
             display: block;
             top: 4em;
             width: 300px;
             height: 300px;
             position: absolute;
             background: transparent url($spiderweb) top left no-repeat;
             background-size: contain;
             z-index: -1;
         }
         &:after {
             right: 0;
             transform: scaleX(-1);
          }
       }
    }
    

Skull icon for the emoji selector

A subtle one that replaces the smiley icon in the message composer by a skull :skull:

image

  1. Add skull in your svg icon subset setting:

  2. Replace the icon on the </head> tab of your theme/theme component:

    <script type="text/discourse-plugin" version="0.8.23">
        api.replaceIcon('far-smile', 'skull');
    </script>
    

:warning: It consequently replaces the smiley icon in other places as well, such as the admin panel. But that’s Halloween after all, right?

image

Jack-o’-lantern

A simple, static carved pumpkin that lays on the bottom right of your site:

  1. Create a new theme component or edit your theme, upload this image, and set the variable name as pumpkin:

    jack-o-lantern
    Source

  2. Add the following CSS to your theme or component:

    body {
        background: transparent url($pumpkin) bottom right no-repeat;
        background-size: 10%;
    }
    @media all and (min-width: 1024px) {
        body {
            background-size: 7%;
        }
    }
    

:warning: It is incompatible with forums already using a background image on <body>.

Creepy logo

If your logo uses plain text or is a simple text image, you can replace the font with a more Halloween-esque one.

imageimage
Used font: Creepster

  • If your logo uses an image, edit your image to change the font.
  • If your logo is real text, follow this tutorial to change the font used in the logo: Include images and fonts in themes and components
    • Use the selector #site-text-logo in your CSS.
30 Likes

I’d love that but I have a few users that have arachnophobia, they’ve quite frequently let that be made known, and they are some of my most frequent posters. :frowning_face:
i really do like the webs. Looks good! :+1:

6 Likes

That’s the reason why I didn’t include a spider, I (maybe wrongly) assume people have more tolerance for webs only?

5 Likes

Having spiders running around the screen and a MUHAHAAHA sound when visiting for the first time only as well as door squeaking or dragging chains sound when getting inside a category or clicking a topic (a bit randomly like every 20 click, otherwise it gets very annoying if it is every single time) would be amazing too! :joy:

2 Likes

I’ve thought about making a little ghost randomly (and rarely) appearing for a second on the screen when we reply to a topic :ghost:

3 Likes

That would be a nice idea! Thanks for creating this.

4 Likes

This theme-component that @Rhidian made would be a perfect choice:

4 Likes

Just added that as well. Thanks @Chaboi_3000!

2 Likes

Awesome, just added the spiderwebs to our Discourse :crazy_face:

2 Likes

We use the Christmas hats component to display witches hats!

And we also added a couple of doots to the header manually

6 Likes

I removed my last posts to add them in the first post since it’s a wiki. I invite you to add your own customizations as well!
I improved the ghost code as well as adding a bit of “pop-out” with a scale transition.

1 Like

I think we’ve got ourselves an idea for this @ondrejj. Should provide a bit of fun and a festive feeling to community, I’d love this to be added during the Halloween period. :eyes:

Possibly turn down the variety to have a bit more of an unexpected ‘spice’ to it :joy:

2 Likes

I’ve created and added the spooky ghost it in the first post.

1 Like

Ah! Good I’ll see to it.

1 Like

Thank you so much! :heart_eyes: We are festive at http://lettucecraft.com/ with your decorations! :raised_hands:

1 Like