How to change Discourse splash animation?

Support
9

You can’t directly edit the ERB splash template from a theme, and since the splash loads before core CSS/JS, customization is tricky.

The CSS you write in the theme’s normal CSS/SCSS tabs is compiled and loaded only after the splash loader shows. So even if your CSS works there, the original dots appear briefly on load.

That said, you can override the splash animation by injecting inline CSS inside the theme’s head_tag. This ensures your styles apply immediately, avoiding the default dots flicker.

Here’s an example that replaces the default dots animation with a Pulser effect similar to the one in your 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>

Note: the browser cannot parse SCSS inside a <style> tag. So you cannot simply put SCSS inline. You must use CSS instead of SCSS.

The result:

pulsereffect

You need to create a new theme component, click on Edit Code, enter the Head tag and paste the above block.

Save and refresh your site with a hard reload to see the updated pulse animation immediately on splash.

This is a neat workaround until Discourse implements more customizable splash screens in the planned v2 update.

5 Likes