How can I add or edit global CSS for my Flawless POS website?

Flawless POS already includes a built-in option to manage global CSS that applies to all pages of your website. This is handled through the Header Navbar (Built-in -> Header Navbar) section, which exists across every page, making it a global element by design.

How to Access and Edit Global CSS:

1. Navigate to Website ->Pages -> Built-in -> Header Navbar.

   • This Navbar page acts as a global section, appearing on every page of your website.

2. Within the Navbar layout, locate the Code Block element.

   • This element already contains global CSS that affects your entire site.

   • You can either add your new CSS within this block or create a new code block for additional styles.

   • If you create a new block, make sure it remains hidden (not visible to the public).

3. To target specific sections or elements:

   • Assign CSS Classes directly to rows, columns, or elements in the Page Builder.

   • This allows your global CSS to reference them consistently.

Example Setup:

• Go to the Header Navbar page.

• Add or locate the existing {JS/CSS Code Block} element.

• Assign or reference a global class such as .global-css-wrapper in your stylesheet.

Notes:

1. Keep your code block within the Header Navbar section, since it loads on every page.

2. Avoid placing it on individual pages unless you want styles to apply locally.

3. Always preview your site before publishing to confirm visual consistency.