Compartilhe suas decorações de Halloween do Discourse!

[Canapin (Coin-coin le Canapin)]

De forma semelhante às decorações de Natal, aqui está um tópico para compartilhar decorações de Halloween.

Fantasma assustador

O fantasma tem, por padrão, 1 chance em 10 de aparecer ao abrir o editor.

1. Faça upload da seguinte imagem no seu tema/componente e defina o nome da variável como ghost:

Fonte

2. Adicione este JavaScript na aba /head do seu tema ou componente:
   Você pode aumentar ou diminuir o valor da variável rarity para fazer o fantasma aparecer com menos ou mais frequência.

   <script type="text/discourse-plugin" version="1.4.0">
   const appEvents = api.container.lookup("service:app-events");
   appEvents.on('composer:opened', () => {
       let rarity = 10 // o fantasma tem 1 chance em [valor de rarity] de aparecer ao abrir o editor
       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>
   

3. Adicione este código na aba 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);
       &.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);
           }
       }
   }
   

O fantasma “pula” no celular quando o teclado virtual aparece.

Teias de aranha

As teias serão ocultadas em telas menores.

Como adicionar isso ao seu fórum:

1. Crie um novo componente de tema ou edite seu tema, faça upload desta imagem e defina o nome da variável como spiderweb:

   
   
   Fonte

2. Adicione o seguinte CSS ao seu tema ou componente:

   @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);
         }
      }
   }
   

Ícone de caveira para o seletor de emojis

Um detalhe sutil que substitui o ícone de sorriso no editor de mensagens por uma caveira

1. Adicione skull na sua configuração conjunto de ícones SVG:
   

   

2. Substitua o ícone na aba /head do seu tema/componente de tema:

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

Consequentemente, isso também substitui o ícone de sorriso em outros lugares, como no painel de administração. Mas é Halloween, afinal, certo?

Abóbora de Jack (Jack-o’-lantern)

Uma abóbora esculpida simples e estática que fica no canto inferior direito do seu site:

1. Crie um novo componente de tema ou edite seu tema, faça upload desta imagem e defina o nome da variável como pumpkin:

   
   
   Fonte

2. Adicione o seguinte CSS ao seu tema ou componente:

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

É incompatível com fóruns que já usam uma imagem de fundo na tag <body>.

Logotipo assustador

Se o seu logotipo usa texto simples ou é uma imagem de texto simples, você pode substituir a fonte por uma mais temática de Halloween.

→
Fonte utilizada: Creepster

• Se o seu logotipo usa uma imagem, edite sua imagem para alterar a fonte.
• Se o seu logotipo é texto real, siga este tutorial para alterar a fonte usada no logotipo: Include assets (e.g. images, fonts) in themes and components
  • Use o seletor #site-text-logo no seu CSS.

[JimPas]

Eu adoraria, mas tenho alguns usuários que têm aracnofobia. Eles já deixaram isso bem claro várias vezes, e são alguns dos meus postadores mais frequentes.
Eu realmente gosto das teias. Fica ótimo!

[Canapin (Coin-coin le Canapin)]

@JimPas

Eu adoraria, mas tenho alguns usuários que têm aracnofobia.

Esse é o motivo pelo qual não incluí uma aranha. Eu (talvez equivocadamente) assumi que as pessoas teriam mais tolerância apenas com teias?

[Paracelsus]

Ter aranhas correndo pela tela e um som de ‘MUHAHAAHA’ ao visitar pela primeira vez, além de sons de porta rangendo ou correntes arrastando ao entrar em uma categoria ou clicar em um tópico (de forma um pouco aleatória, como a cada 20 cliques, caso contrário fica muito irritante se acontecer toda vez) seria incrível também!

[Canapin (Coin-coin le Canapin)]

Pensei em fazer um pequeno fantasma aparecer aleatoriamente (e raramente) por um segundo na tela quando respondermos a um tópico:

[ondrej]

Essa seria uma ótima ideia! Obrigado por criar isso.

[Chaboi_3000]

Este componente de tema criado por @Rhidian seria uma escolha perfeita:

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]

Acabei de adicionar isso também. Obrigado @Chaboi_3000!

[Terrapop]

Show, acabamos de adicionar as teias de aranha ao nosso Discourse

[Canapin (Coin-coin le Canapin)]

Removi minhas últimas postagens para incluí-las na primeira, já que é um wiki. Convido vocês a adicionarem suas próprias personalizações também!
Melhorei o código do fantasma, além de adicionar um efeito de “pop-out” com uma transição de escala.

[ECoops123]

Acho que temos uma ideia aqui, @ondrej. Deveria trazer um pouco de diversão e um clima festivo para a comunidade. Adoraria que isso fosse adicionado durante o período do Halloween.

Talvez reduzir a variedade para dar um toque de ‘tempero’ mais inesperado

[Canapin (Coin-coin le Canapin)]

@ondrej

Que ideia legal!

Criei e adicionei o fantasma assustador no primeiro post.

[ondrej]

Ah! Bom, eu vou cuidar disso.

[soraiden]

Muito obrigado! Estamos de festa no http://lettucecraft.com/ com as suas decorações!

[anon89147131]

Acabei de remover isso do meu fórum, mas foi divertido enquanto durou - obrigado pela ajuda (nós te creditamos)

[soraiden]

Reutilizei o mesmo conceito para as festas de dezembro. Obrigado mais uma vez! https://forum.lettucecraft.com/

[darkpixlz (Pyx)]

Estou recebendo este erro no meu site com o ghost adicionado.

[Stephen]

Isso é bastante plausível quando se considera a idade e a pouca frequência de uso.

[darkpixlz (Pyx)]

Sim, eu acabei de ver isso e pensei que seria uma ideia divertida adicionar um pouco disso. É engraçado também como o discourse é tipo “AVISO!!! SEU SITE ESTÁ QUEBRADO!!!” Quando é apenas um pop-up fantasma quebrado, lol

[Canapin (Coin-coin le Canapin)]

Vou tentar dar uma olhada. Está muito assustador assim.