Compartilhe suas decorações de Natal do Discourse!

[Canapin (Coin-coin le Canapin)]

Olá,

Aqui estão algumas luzes animadas de Natal que você pode adicionar abaixo do cabeçalho do Discourse.

Esta é uma implementação das Luzes de Natal do Toby no Codepen: https://codepen.io/tobyj/pen/QjvEex
Ajustei um pouco o código para que se encaixe no Discourse.

Veja em ação aqui: https://forum.monocycle.info/ (Removê-las-ei em janeiro)

Capturas de tela:

No celular (elas não seguirão o cabeçalho fixo):

Com um tema escuro:

Como adicioná-las ao Discourse:

1. Acesse seu painel de administração -\u003e personalização -\u003e escolha seu tema atual -\u003e CSS/HTML personalizado
2. Adicione este código na aba CSS:

/* Luzes de Natal

   Direitos autorais (c) 2019 por Toby (https://codepen.io/tobyj/pen/QjvEex)
   É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para lidar com o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar, publicar, distribuir, sublicenciar e/ou vender cópias do Software, e permitir que as pessoas a quem o Software é fornecido o façam, sujeito às seguintes condições:
   O aviso de direitos autorais acima e este aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais do Software.
*/

$globe-width:   12px;
$globe-height:  15px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;
$speed: 0.5;

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 0;
  z-index: 1;
  margin: -54px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
  li {
    position: relative;
    animation-fill-mode: both; 
    animation-iteration-count:infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: $globe-width;
    height: $globe-height;
    border-radius: 50%;
    margin: $globe-spacing/2;
    display: inline-block;
    background: rgba(0,247,165,1);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);
    animation-name: flash-1;
    animation-duration: 2s;
    \u0026:nth-child(2n+1) {
      background: rgba(0,255,255,1);
      box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5);
      animation-name: flash-2;
      animation-duration: 0.4s;
    }
    \u0026:nth-child(4n+2) {
      background: rgba(247,0,148,1);
      box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);
      animation-name: flash-3;
      animation-duration: 1.1s / $speed;
    }
    \u0026:nth-child(odd) {
      animation-duration: 1.8s / $speed;
    }
    \u0026:nth-child(3n+1) {
      animation-duration: 1.4s / $speed;
    }
    \u0026:before {
      content: "";
      position: absolute;
      background: #222;
      width: ($globe-width - 2);
      height: $globe-height/3;
      border-radius: 3px;
      top: (0 - ($globe-height/6));
      left: 1px;
    }
    \u0026:after {
      content: "";
      top: (0 - $globe-height/2);
      left: $globe-width - 3;
      position: absolute;
      width: $globe-spacing + 12;
      height: ($globe-height/3 * 2);
      border-bottom: solid #222 2px;
      border-radius: 50%;
    }
    \u0026:last-child:after {
      content: none;
    }
    \u0026:first-child {
      margin-left: -$globe-spacing/2-$globe-width;
    }
  }
}
@keyframes flash-1 { 
    0%, 100% { background: rgba(0,247,165,1);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);} 
    50% { background: rgba(0,247,165,$light-off-opacity);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);}
}
@keyframes flash-2 { 
    0%, 100% { background: rgba(0,255,255,1);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,1);} 
    50% { background: rgba(0,255,255,$light-off-opacity);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.2);}
}
@keyframes flash-3 { 
    0%, 100% { background: rgba(247,0,148,1);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);} 
    50% { background: rgba(247,0,148,$light-off-opacity);
    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);}
}
/* mobile */
.mobile-view .lightrope {
    margin-top: -36px;
}

3. Adicione este código na aba Após o cabeçalho:

\u003cul class=\"lightrope\"\u003e
\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u003cli\u003e\u003c/li\u003e\u00

[habeycole (Abiodun Olumide Daniels)]

Absolutely amazing. I’m definitely having this on my Discourse site, for sure!

[Canapin (Coin-coin le Canapin)]

The classic Santa claus hats on avatars:

Hat from uihere.com :

How to add it to Discourse:

1. Go to your admin panel -> customization -> choose your current theme -> custom CSS/HTML
2. Add this code in your CSS tab:

.main-avatar:after {
    content: url(https://i.imgur.com/G6gA3Wn.png);
    position: absolute;
    top: -5px;
    left: -19px;
}
.mobile-view .main-avatar:after {
    top: -17px;
}

(the hats should only appear on a topic view)

Save and enjoy your hats!

I recommend you to host the hat image on your Discourse server.

[codinghorror (Jeff Atwood)]

I know @dax posted some here a while ago, are they still valid?

[Canapin (Coin-coin le Canapin)]

There is another christmas hat tutorial here: Christmas hats!
A christmas hat theme component here: Christmas hats component
A snowing effect: Discourse snowing effect?
Another snowing effect and a santa claus head as a loading image: Christmas theme

[b481]

can’t wait to incorporate this in a week or so. thanks OP!

[anon23393886]

We need a theme like that for Thanksgiving.

[soraiden]

Thank you! Will turn the lights on Christmas morning.

[meghna (Meghna Jalan)]

I made a theme component out of different Christmas decoration ideas where each flair can be individually enabled/disabled.

Christmas Decoration Component

Adding a bit of festive flair to your forum – I present a Christmas decoration component! [Screenshot 2020-12-21 at 11.48.08 PM] This component includes three flairs: Christmas Lights Christmas Hats Christmas Decoration Image Each flair can be individually enabled/disabled via theme settings. For Christmas Decoration Image there is also a setting to invert color for forum with Dark theme. [Screenshot 2020-12-21 at 11.46.41 PM] The Christmas lights were inspired from @Ca…

[JimPas]

@meghna

I made a theme component out of different Christmas decoration ideas where each flair can be individually enabled/disabled.

That was a great idea! Last year I had a few users who, as soon as I mentioned the Christmas flairs, said “I don’t want that on my avatar.” Bah, humbug.

[P2W (Mike Riddick)]

Awesomeness nice job

[Canapin (Coin-coin le Canapin)]

Devido às mudanças na forma como o cabeçalho fixo do Discourse funciona, as luzes de Natal na primeira postagem não ficarão mais fixas.

Mas isso não é um grande problema.

Além disso, alterei um valor de margem que estava desatualizado.