Share your Discourse Halloween decorations!

community
1

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="1.4.0">
const appEvents = api.container.lookup("service:app-events");
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

image
image1858×1009 142 KB

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:

    toppng.com-spider-web-corner-600x564
    toppng.com-spider-web-corner-600x564835×785 98 KB

    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:

    image
    image746×118 8.05 KB

  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:

image
image1858×1009 58.1 KB

  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.

image → image
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.
35 Likes
2

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
3

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

5 Likes
4

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:

3 Likes
5

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
6

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

4 Likes
7

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

4 Likes
8

Just added that as well. Thanks @Chaboi_3000!

2 Likes
9

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

2 Likes
13

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
14

I think we’ve got ourselves an idea for this @ondrej. 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
15

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

1 Like
16

Ah! Good I’ll see to it.

1 Like
17

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

1 Like
18

Just removed this from my forum but it was enjoyable whilst it lasted - thanks for the help (we credited you)

Screenshot 2020-11-01 at 18.08.00
Screenshot 2020-11-01 at 18.08.001360×110 16.7 KB

1 Like
19

Repurposed the same concept for December holidays. Thank you once again!! https://forum.lettucecraft.com/

2 Likes
20

I’m getting this error on my site with the ghost added.

image
image1924×68 37.2 KB

1 Like
21

That’s pretty plausible when you consider the age and how infrequently it’s used.

2 Likes
22

Yeah, I just saw this and thought it would be a fun idea to add some of it. It’s also funny how discourse is like “WARNING!!! YOUR SITE IS BROKEN!!!” When it’s just a broken ghost pop up lol

1 Like
23

I’ll try to have a look at it. It’s too scary this way.

3 Likes