How to use custom CSS on Vepple.

1. Open your Vepple frontend and right-click on the element you wish to customise. Select 'Inspect' or 'Inspect Element' to open the browser's developer tools.
2. In the developer tools panel, the selected element's HTML code will be highlighted.
3. In the Styles tab of the developer tools, click the '+' (Add Rule) button to generate a CSS selector for the element automatically. This will create a new CSS rule where you can modify properties and see changes in real-time.
4. Once you're satisfied with the styling, copy the entire CSS rule.
5. Go to your Vepple CMS and navigate to CMS → Site Options → Custom CSS Tab.
6. In the provided text area, input your CSS code. If your styles aren’t applying as expected, try adding !important to override existing styles, e.g.:
   

   .your-selector {color:
    red !important;
   }

7. Click the Update button at the top right of the page to finalise your changes.

Best Practices & Use Cases

Use Specific Selectors

Avoid overly broad selectors (e.g., div {}) that may unintentionally affect multiple elements. Instead, use targeted class names or IDs to ensure precise styling.

Ensure Accessibility

Follow accessibility guidelines such as WCAG to make sure text has sufficient contrast, hover states are clear, and elements remain usable for users with disabilities.