How to Use the Custom CSS Feature for Visual Customizations

While your point-of-sale (POS) system comes with a clean and functional design out of the box, you may occasionally need unique visual adjustments to fit your specific operational needs. The Custom CSS setting is an advanced, developer-focused tool that functions similarly to the Custom Script feature. It allows your technical team to add Cascading Style Sheets (CSS) code to modify the appearance, layout, or visibility of elements within your software.

Part 1: Understanding When to Use Custom CSS

This feature is used strictly when a business requires tailored changes to the software's interface.

Example Scenario: If there is a specific field, button, or menu on the screen that your staff never uses, and you want it completely hidden to prevent confusion, a developer can write a few lines of CSS code (such as setting an element's display to "none"). By pasting that code here, the software will automatically hide that specific element across your POS interface.

Part 2: Adding and Saving Custom CSS

If your developer or technical support team has provided you with a custom CSS snippet, follow these steps to apply it to your system.

1. Navigate to your main Settings menu and open the POS Global Settings window.
2. Scroll all the way down to the bottom of the settings page.
3. Locate the large text box labeled Custom CSS (positioned next to the Custom Script box).
   
   *[Image: POS Global Settings window showing the Custom CSS text box at the bottom of the screen]*
4. Carefully copy and paste the exact code provided by your developer into the Custom CSS box.
5. Click the Save Settings button in the bottom right corner of the window. The new styling rules will take effect immediately upon saving.