De manera similar a decoraciones de Navidad, aquí hay un tema para compartir decoraciones de Halloween.
Fantasma espeluznante
El fantasma tiene por defecto 1 entre 10 probabilidades de aparecer al abrir el editor.
- Sube la siguiente imagen en tu tema/componente y establece el nombre de la variable como ghost:
Fuente
-
Añade este JavaScript en la pestaña
\u003c/head\u003ede tu tema o componente:
Puedes aumentar o disminuir el valor de la variable rarity para que el fantasma aparezca menos o más a menudo.\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 // el fantasma tiene 1 entre [valor de rarity] probabilidades de aparecer al abrir el 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); } }); \u003c/script\u003e -
Añade este código en la pestaña 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); } } }
El fantasma “salta” en móviles cuando aparece el teclado virtual.
Telarañas
Las telarañas se ocultarán en pantallas más pequeñas.
Cómo añadir esto a tu foro:
-
Crea un nuevo componente de tema o edita tu tema, sube esta imagen y establece el nombre de la variable como spiderweb:
Fuente -
Añade el siguiente CSS a tu tema o componente:
@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); } } }
Icono de calavera para el selector de emojis
Uno sutil que reemplaza el icono de la carita sonriente en el editor de mensajes por una calavera 
-
Añade
skullen tu configuración de subconjunto de iconos svg:
-
Reemplaza el icono en la pestaña
\u003c/head\u003ede tu tema/componente de tema:\u003cscript type="text/discourse-plugin" version="0.8.23"\u003e api.replaceIcon('far-smile', 'skull'); \u003c/script\u003e
Por lo tanto, reemplaza el icono de la carita sonriente en otros lugares también, como el panel de administración. Pero después de todo, es Halloween, ¿verdad?
Calabaza tallada (Jack-o’-lantern)
Una calabaza tallada simple y estática que se encuentra en la parte inferior derecha de tu sitio:
-
Crea un nuevo componente de tema o edita tu tema, sube esta imagen y establece el nombre de la variable como pumpkin:
Fuente -
Añade el siguiente CSS a tu tema o componente:
body { background: transparent url($pumpkin) bottom right no-repeat; background-size: 10%; } @media all and (min-width: 1024px) { body { background-size: 7%; } }
Es incompatible con foros que ya utilizan una imagen de fondo en \u003cbody\u003e.
Logo inquietante
Si tu logotipo usa texto plano o es una imagen de texto simple, puedes reemplazar la fuente por una más al estilo de Halloween.
→ 
Fuente utilizada: Creepster
- Si tu logotipo usa una imagen, edita tu imagen para cambiar la fuente.
- Si tu logotipo es texto real, sigue este tutorial para cambiar la fuente utilizada en el logotipo: Include assets (e.g. images, fonts) in themes and components
- Usa el selector
#site-text-logoen tu CSS.
- Usa el selector
¡Estamos en ambiente festivo en 
