Halloween Decorations ๐Ÿ‘ป

์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ…Œ๋งˆ ์ปดํฌ๋„ŒํŠธ
, ,
1
:discourse2: Summary Halloween Decorations will add some spooky flair to your forum this festive season!
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-halloween-decorations
:open_book: New to Discourse Themes? Beginnerโ€™s guide to using Discourse Themes

Install this theme component

Features

:information_source: This theme component only shows for desktop view. :desktop_computer:

This component has three flairs:

  • Bats animation
  • Spider web on both sides
  • Pumpkin loading animation

Happy Halloween! :ghost: :spider_web:

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-10-23T15:06:22Z

Last checked by @Lilly 2024-10-14T21:44:14Z

Check documentPerform check on document:
37๊ฐœ์˜ ์ข‹์•„์š”
Customizing your site with existing theme components
2

This is so cool. Thank you!

2๊ฐœ์˜ ์ข‹์•„์š”
3

3 posts were split to a new topic: Whereโ€™s the pumpkin?

4

Is this still desktop only?

1๊ฐœ์˜ ์ข‹์•„์š”
5

yes it is.

iโ€™ll note it in OP. thanks.

2๊ฐœ์˜ ์ข‹์•„์š”
6

This is an image of an illustrated, stylized cat with a background of a solid blue color. (Captioned by AI)
This is an image of an illustrated, stylized cat with a background of a solid blue color. (Captioned by AI)1263ร—886 80.4 KB

I think itโ€™s possible to get an open screen animation when clicking into the forum that also hides the content in the refresher

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #custom-video-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2cb9e4;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: visibility 0s 1s, opacity 1s linear; /* ๆทปๅŠ ่ฟ‡ๆธกๆ•ˆๆžœ */
      visibility: visible;
      opacity: 1;
    }

    #custom-video {
      width: auto; /* ่ฎพ็ฝฎๅฎฝๅบฆไธบ100% */
      height: auto; /* ้ซ˜ๅบฆ่‡ชๅŠจ้€‚ๅบ” */
    }
  </style>
</head>
<body>
  <div id="custom-video-container">
    <video id="custom-video" autoplay muted>
      <source src="https://www.justnainai.com/uploads/default/original/2X/e/e4faa6e98fd8890bbd33a24ef27f63cbb30a9d16.mp4" type="video/mp4">
    </video>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const videoContainer = document.getElementById('custom-video-container');
      const video = document.getElementById('custom-video');

      video.addEventListener('ended', () => {
        setTimeout(() => {
          videoContainer.style.visibility = 'hidden';
          videoContainer.style.opacity = '0';
        }, 10); // ่ง†้ข‘็ป“ๆŸๅŽ3็ง’้’Ÿ้š่—
      });
    });
  </script>
</body>
</html>
1๊ฐœ์˜ ์ข‹์•„์š”
7

My Members love this - so well done. Not obtrusive, just the perfect amount. The pumpkin animation is so fast you almost think you are seeing things - lol. My mobile users are so disappointed - lol, they want it too! And my cat found the bats! I hope we can look forward to something for all the holidays, you know Veterans Day, Thanksgiving, Christmas, New Year, Valentines, St. Patricks, Easter, Memorial Day, July 4th, Labor Day, etc.. and fun stuff for the times between - snow falling, flowers, the beach, fall leaves, etc.

A cat is intently looking at a computer screen with a web browser open, featuring a colorful list of bookmark topics and a black spider icon. (Captioned by AI)
A cat is intently looking at a computer screen with a web browser open, featuring a colorful list of bookmark topics and a black spider icon. (Captioned by AI)261ร—634 57.1 KB

3๊ฐœ์˜ ์ข‹์•„์š”
8

Hi @famousamos.1 :wave: welcome to Discourse Meta :slight_smile:

we also have

6๊ฐœ์˜ ์ข‹์•„์š”
9

Woo Hoo! My Members will be so excited - you all know they are going to be expecting some fun decorations all the time, right?? lol

1๊ฐœ์˜ ์ข‹์•„์š”
10

Except if they are using mobilesโ€ฆ well, someone can be excited when they see few bats and nothing else.

This should be tagged desktop because on mobiles it is broken.

2๊ฐœ์˜ ์ข‹์•„์š”
11

This is true - my mobile members canโ€™t see these things [yet]

2๊ฐœ์˜ ์ข‹์•„์š”
12

Is it possible to set a specific time period for activation? For example, this decoration would only appear during Halloween each year.