Partagez vos décorations d'Halloween Discourse !

[Canapin (Coin-coin le Canapin)]

Tout comme pour les décorations de Noël, voici un sujet pour partager vos décorations d’Halloween.

Fantôme effrayant

Par défaut, le fantôme a 1 chance sur 10 d’apparaître lors de l’ouverture de l’éditeur de message.

1. Téléchargez l’image suivante dans votre thème ou composant et nommez la variable ghost :

Source

2. Ajoutez ce code JavaScript dans l’onglet \u003c/head\u003e de votre thème ou composant :
   Vous pouvez augmenter ou diminuer la valeur de la variable rarity pour que le fantôme apparaisse moins ou plus souvent.

   \u003cscript type="text/discourse-plugin" version="1.4.0"\u003e
   const appEvents = api.container.lookup("service:app-events");
   appEvents.on('composer:opened', () =\u003e {
       let rarity = 10 // le fantôme a 1 chance sur [valeur de rarity] d'apparaître à l'ouverture de l'éditeur
       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);
       }
   });
   \u003c/script\u003e
   

3. Ajoutez ce code dans l’onglet CSS :

   #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);
       \u0026.ghost-show {
           transform: translate(-50%, -60%) scale(.6);
           opacity: 0;
       }
   }
   @media all and (min-width: 1024px) {
       #halloween-ghost {
           transform: translate(-50%, -50%) scale(.75);
           \u0026.ghost-show {
               transform: translate(-50%, -60%) scale(.9);
           }
       }
   }
   

Le fantôme « saute » sur mobile lorsque le clavier virtuel apparaît.

Toiles d’araignée

Les toiles seront masquées sur les petits écrans.

Comment ajouter ceci à votre forum :

1. Créez un nouveau composant de thème ou modifiez votre thème, téléchargez cette image et nommez la variable spiderweb :

   
   
   Source

2. Ajoutez le CSS suivant à votre thème ou composant :

   @media all and (min-width: 1300px) {
      #main {
        \u0026:before, \u0026: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;
        }
        \u0026:after {
            right: 0;
            transform: scaleX(-1);
         }
      }
   }
   

Icône de crâne pour le sélecteur d’émojis

Une touche subtile qui remplace l’icône de smiley dans l’éditeur de message par un crâne

1. Ajoutez skull dans votre paramètre sous-ensemble d’icônes SVG :
   

   

2. Remplacez l’icône dans l’onglet \u003c/head\u003e de votre thème ou composant de thème :

   \u003cscript type="text/discourse-plugin" version="0.8.23"\u003e
       api.replaceIcon('far-smile', 'skull');
   \u003c/script\u003e
   

Cela remplace donc également l’icône de smiley dans d’autres endroits, comme le panneau d’administration. Mais après tout, c’est Halloween, non ?

Citrouille sculptée (Jack-o’-lantern)

Une citrouille sculptée simple et statique placée en bas à droite de votre site :

1. Créez un nouveau composant de thème ou modifiez votre thème, téléchargez cette image et nommez la variable pumpkin :

   
   
   Source

2. Ajoutez le CSS suivant à votre thème ou composant :

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

Cela est incompatible avec les forums utilisant déjà une image de fond sur \u003cbody\u003e.

Logo effrayant

Si votre logo utilise du texte simple ou est une image de texte simple, vous pouvez remplacer la police par une police plus typique d’Halloween.

→
Police utilisée : Creepster

• Si votre logo est une image, modifiez l’image pour changer la police.
• Si votre logo est du vrai texte, suivez ce tutoriel pour changer la police utilisée dans le logo : Include assets (e.g. images, fonts) in themes and components
  • Utilisez le sélecteur #site-text-logo dans votre CSS.

[JimPas]

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.
i really do like the webs. Looks good!

[Canapin (Coin-coin le Canapin)]

@JimPas

I’d love that but I have a few users that have arachnophobia

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

[Paracelsus]

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!

[Canapin (Coin-coin le Canapin)]

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

[ondrej]

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

[Chaboi_3000]

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

Bugs theme-component

Bugs: a Discourse theme-component Did you know fruit flies were the first living creatures to be sent into space? Spiders are found on every continent of the world except Antarctica This theme component is a port and update of Auzbugs repo. It originally started out as an April fools joke and has been adapted over time. I’ve included a new bugs interact feature in this component. This is just a bit of fun : I suggest you use it sparingly, maybe just at…

[ondrej]

Just added that as well. Thanks @Chaboi_3000!

[Terrapop]

Awesome, just added the spiderwebs to our Discourse

[Canapin (Coin-coin le Canapin)]

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.

[ECoops123]

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.

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

[Canapin (Coin-coin le Canapin)]

@ondrej

That would be a nice idea!

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

[ondrej]

Ah! Good I’ll see to it.

[soraiden]

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

[anon89147131]

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

[soraiden]

J’ai réutilisé le même concept pour les fêtes de décembre. Merci encore une fois !! https://forum.lettucecraft.com/

[darkpixlz (Pyx)]

J’obtiens cette erreur sur mon site avec l’ajout de Ghost.

[Stephen]

C’est assez plausible si l’on considère son âge et la fréquence d’utilisation.

[darkpixlz (Pyx)]

Ouais, je viens de voir ça et j’ai pensé que ce serait une idée amusante d’en ajouter une partie. C’est aussi drôle que Discourse dise « ATTENTION !!! VOTRE SITE EST CASSÉ !!! » alors que ce n’est qu’une apparition fantôme cassée lol

[Canapin (Coin-coin le Canapin)]

J’essaierai d’y jeter un œil. C’est trop effrayant comme ça.