Customise Decap CMS admin portal branding

Saqib · Saqib · commit 490dab336aec · 2026-02-26T13:57:45.000+05:30
- Add branded splash screen with CDL logo that fades out on load
- Replace Decap login logo with CDL logo via logo_url in config.yml
- Hide Decap footer SVG attribution using MutationObserver
- Document admin portal branding in README
diff --git a/README.md b/README.md
@@ -71,6 +71,15 @@ Visit `https://civicdatalab.in/admin/` and log in with your GitHub account.
 3. Set **Authorization callback URL** to `https://civicdatalab.in/admin/`
 4. Copy the **Client ID** and update `app_id` in `static/admin/config.yml`
 
+### Admin portal branding
+
+The CMS login page (`/admin/`) has been customised:
+- **Splash screen** — a full-page branded loading screen with the CivicDataLab logo (`/static/cdl_logo.png`) is shown while the CMS loads, then fades out.
+- **Login page logo** — the default Decap logo is replaced with the CivicDataLab logo via the `logo_url` field in `static/admin/config.yml`.
+- **Decap footer** — the Decap attribution SVG at the bottom of the login page is hidden via a `MutationObserver` in `static/admin/index.html`.
+
+To update the logo, replace `/static/cdl_logo.png` and update the `logo_url` in `static/admin/config.yml` if the path changes.
+
 ### CMS collections available
 
 | Collection | Content folder |
diff --git a/static/admin/config.yml b/static/admin/config.yml
@@ -5,6 +5,8 @@ backend:
   auth_type: pkce
   app_id: YOUR_GITHUB_OAUTH_APP_CLIENT_ID  # TODO: Create a GitHub OAuth App and replace this before merging to main
 
+logo_url: /cdl_logo.png
+
 media_folder: "static/images/uploads"
 public_folder: "/images/uploads"
 
diff --git a/static/admin/index.html b/static/admin/index.html
@@ -5,7 +5,51 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CivicDataLab | Content Manager</title>
   </head>
+  <style>
+    #splash {
+      position: fixed;
+      inset: 0;
+      background: #eff0f4;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      transition: opacity 0.4s ease;
+    }
+    #splash img { width: 180px; }
+    img[src="/cdl_logo.png"] { width: 180px !important; }
+    #splash p {
+      margin-top: 16px;
+      font-family: sans-serif;
+      font-size: 14px;
+      color: #666;
+    }
+  </style>
   <body>
+    <div id="splash">
+      <img src="/cdl_logo.png" alt="CivicDataLab" />
+      <p>Loading Content Manager...</p>
+    </div>
     <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+    <script>
+      window.addEventListener('load', function () {
+        var splash = document.getElementById('splash');
+        splash.style.opacity = '0';
+        setTimeout(function () { splash.style.display = 'none'; }, 400);
+      });
+
+      // Hide Decap footer SVG branding once it renders
+      function hideDecapBranding() {
+        document.querySelectorAll('svg[viewBox="0 0 335 90"]').forEach(function (el) {
+          var parent = el.parentElement;
+          (parent || el).style.display = 'none';
+        });
+      }
+      var observer = new MutationObserver(hideDecapBranding);
+      observer.observe(document.body, { childList: true, subtree: true });
+      var interval = setInterval(hideDecapBranding, 500);
+      setTimeout(function () { clearInterval(interval); }, 10000);
+    </script>
   </body>
 </html>
