Docs

Web CSS Overview

The Web CSS section lets you manage site-wide frontend CSS directly from CMS. The current interface includes a CSS editor, an enable or disable toggle, and separate Save and Publish actions.

Video Walkthrough

Current Web CSS Interface

The current screen contains:

  • Enable Web CSS or Disable Web CSS toggle
  • Full code editor with line numbers
  • Save button
  • Publish button
  • Success toast after publish: Css published successfully.

Main Actions in This Page

  • Add or edit CSS rules
  • Save in-progress CSS changes
  • Publish CSS to apply it
  • Disable Web CSS when you want to stop using custom styling

Step-by-Step: Add or Update Web CSS

  1. Open CSS > Web CSS.
  2. Review whether the toggle currently shows Enable Web CSS or Disable Web CSS.
  3. Paste or write the required CSS rules in the editor.
  4. Click Save.
  5. Click Publish.
  6. Wait for the success message.
  7. Validate the frontend pages affected by the CSS.

Typical use cases:

  • Theme color overrides
  • Header/footer style adjustments
  • Minor UI spacing/visibility tweaks

Step-by-Step: Enable Web CSS

  1. Open Web CSS.
  2. Make sure your CSS is present in the editor.
  3. Turn the toggle on so the panel shows the enabled state.
  4. Click Save.
  5. Click Publish.
  6. Confirm the success toast appears.

Step-by-Step: Disable Web CSS

If custom CSS causes unwanted UI behavior, use the same panel as a rollback point:

  1. Open Web CSS.
  2. Turn the toggle off so the panel shows Enable Web CSS again.
  3. Click Save.
  4. Publish again if your flow requires the disabled state to go live.

This stops the custom stylesheet from controlling the frontend appearance.

Save vs Publish

The current UI separates draft saving from live publishing:

  • Save stores the CSS changes in the editor workflow
  • Publish applies the CSS as the active site styling

Recommended order:

  1. Edit CSS
  2. Save
  3. Publish
  4. Verify the frontend
  1. Keep CSS changes small and test in steps.
  2. Prefer scoped selectors to avoid global breakage.
  3. Save and publish only after reviewing the selector impact.
  4. Validate in both desktop and mobile layouts.
  5. Keep a backup/version of previous CSS before major changes.
  6. Use the disable toggle as a quick rollback if needed.

Notes

  • Web CSS affects broad UI areas, so avoid unnecessary !important usage.
  • Review dark/light mode impact when changing colors.
  • A publish success message is shown after the CSS goes live.