¿Cómo cambiar la animación de bienvenida de Discourse?

Soporte
9

No puedes editar directamente la plantilla de pantalla de presentación ERB de un tema, y dado que la pantalla de presentación se carga antes que el CSS/JS principal, la personalización es complicada.

El CSS que escribes en las pestañas normales de CSS/SCSS del tema se compila y se carga solo después de que se muestra el cargador de la pantalla de presentación. Por lo tanto, incluso si tu CSS funciona allí, los puntos originales aparecen brevemente al cargar.

Dicho esto, puedes anular la animación de la pantalla de presentación insertando CSS en línea dentro de la etiqueta head_tag del tema. Esto asegura que tus estilos se apliquen de inmediato, evitando el parpadeo de los puntos predeterminados.

Aquí tienes un ejemplo que reemplaza la animación de puntos predeterminada con un efecto Pulser similar al de tu Codepen:

<style>
  :root {
    --pulser-color-1: #ffcc00;
    --pulser-color-2: #ff6347;
  }
  #d-splash .dots {
    all: unset;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
  #d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
  #d-splash .dots[style*="--n:0"]  { transform: translate(0%, -50%); }
  #d-splash .dots[style*="--n:1"]  { transform: translate(150%, -50%); }
  #d-splash .dots[style*="--n:2"]  { transform: translate(300%, -50%); }
  #d-splash .dots::before,
  #d-splash .dots::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--pulser-color-1);
    top: 0;
    left: 0;
    opacity: 0;
    animation: pulse 1s ease-out infinite;
  }
  #d-splash .dots::before {
    border-color: var(--pulser-color-2);
    animation-delay: 0.3s;
  }
  @keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
</style>

Nota: el navegador no puede analizar SCSS dentro de una etiqueta <style>. Por lo tanto, no puedes simplemente poner SCSS en línea. Debes usar CSS en lugar de SCSS.

El resultado:

pulsereffect

Necesitas crear un nuevo componente de tema, hacer clic en Editar Código, ingresar la etiqueta Head y pegar el bloque <style> anterior.

Guarda y actualiza tu sitio con una recarga forzada para ver la animación de pulso actualizada inmediatamente en la pantalla de presentación.

Esta es una solución ingeniosa hasta que Discourse implemente pantallas de presentación más personalizables en la actualización planificada v2.

5 Me gusta