Decorações de Halloween 👻

Personalização Componente de tema
, ,
1

||||
-|-|
:discourse2: | Resumo | As Decorações de Halloween adicionarão um toque assustador ao seu fórum nesta temporada festiva!
| :eyeglasses: | Prévia | Prévia no Discourse Theme Creator |
:hammer_and_wrench: | Link do Repositório | https://github.com/discourse/discourse-halloween-decorations
:open_book: |Novo nos Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse

Instale este componente de tema

Recursos

:information_source: Este componente de tema só é exibido na visualização para desktop. :desktop_computer:

Este componente possui três estilos:

  • Animação de morcegos
  • Teia de aranha em ambos os lados
  • Animação de carregamento de abóbora

Feliz Halloween! :ghost: :spider_web:

:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

37 Curtiram
Customizing your site with existing theme components
2

Isso é muito legal. Obrigado!

2 Curtiram
3

3 posts foram divididos em um novo tópico: Onde está a abóbora?

4

Isso ainda é apenas para desktop?

1 Curtiu
5

sim, é.

vou anotar no OP. obrigado.

2 Curtiram
6

Esta é uma imagem de um gato estilizado e ilustrado com um fundo de cor azul sólida. (Legenda gerada por IA)
Esta é uma imagem de um gato estilizado e ilustrado com um fundo de cor azul sólida. (Legenda gerada por IA)1263×886 80.4 KB

Acho que é possível ter uma animação de tela aberta ao clicar no fórum que também oculta o conteúdo no atualizador

<!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; /* Adiciona efeito de transição */
      visibility: visible;
      opacity: 1;
    }

    #custom-video {
      width: auto; /* Define a largura como 100% */
      height: auto; /* Altura se ajusta automaticamente */
    }
  </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); // Oculta 3 segundos após o fim do vídeo
      });
    });
  </script>
</body>
</html>
1 Curtiu
7

Meus membros adoram isso - muito bem feito. Não é intrusivo, apenas a quantidade perfeita. A animação da abóbora é tão rápida que você quase pensa que está vendo coisas - lol. Meus usuários de celular estão tão decepcionados - lol, eles também querem! E meu gato encontrou os morcegos! Espero que possamos esperar algo para todos os feriados, você sabe Dia dos Veteranos, Ação de Graças, Natal, Ano Novo, Dia dos Namorados, São Patrício, Páscoa, Dia da Memória, 4 de Julho, Dia do Trabalho, etc.. e coisas divertidas para os intervalos - neve caindo, flores, a praia, folhas de outono, etc.

Um gato está olhando atentamente para uma tela de computador com um navegador da web aberto, apresentando uma lista colorida de tópicos de favoritos e um ícone de aranha preta. (Legenda gerada por IA)
Um gato está olhando atentamente para uma tela de computador com um navegador da web aberto, apresentando uma lista colorida de tópicos de favoritos e um ícone de aranha preta. (Legenda gerada por IA)261×634 57.1 KB

3 Curtiram
8

Olá @famousamos.1 :wave: bem-vindo ao Discourse Meta :slight_smile:

também temos

6 Curtiram
9

Uhuu! Meus membros ficarão tão animados - vocês todos sabem que eles vão esperar decorações divertidas o tempo todo, certo?? lol

1 Curtiu
10

Exceto se estiverem usando celulares… bem, alguém pode ficar animado ao ver alguns morcegos e nada mais.

Isso deve ser marcado como desktop porque em celulares está quebrado.

2 Curtiram
11

Isso é verdade - meus membros móveis não podem ver essas coisas [ainda]

2 Curtiram
12

É possível definir um período de tempo específico para ativação? Por exemplo, que esta decoração só apareça anualmente no Halloween.