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.
- Upload the following image in your theme/component and set the variable name as ghost:
-
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> -
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); } } }
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:
-
Create a new theme component or edit your theme, upload this image, and set the variable name as spiderweb:
Source -
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 
-
Add
skullin your svg icon subset setting:
-
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>
It consequently replaces the smiley icon in other places as well, such as the admin panel. But that’s Halloween after all, right?
Jack-o’-lantern
A simple, static carved pumpkin that lays on the bottom right of your site:
-
Create a new theme component or edit your theme, upload this image, and set the variable name as pumpkin:
-
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%; } }
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.
→ 
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-logoin your CSS.
- Use the selector
We are festive at 
