Custom CSS

Custom CSS is a powerful way to improve the design and functionality of your app. Custom CSS is used to design the appearance and behaviour of your app. It allows you to customize the styles of elements, the brand’s colors, and show or hide elements based on your app’s appearance. This adaptability ensures consistent usability with your app, enhancing the user’s experience. Developers can design dynamic layouts, make real-time updates to the user interface, and control animations.

Steps to Integrate Custom CSS

1. Navigate to the Website Overrides section from the left side bar.

2. As you will click on “Configure”. A pop-up will appear to Add Custom CSS Rules.

3. Now, Enter CSS Rules For example, you have a footer at the bottom of your website. Navigating to a login page, you don't want to show this footer to your users. You can hide the footer by using custom CSS.

The above CSS rule hides the <footer> element from the page; the user will not be able to see it. Click on the “Save” button to save your changes. Click on the “Rebuild” button to reflect your changes in the website.

Implementation Tips:

• Craft CSS rules comprehensively to maintain design consistency and user experience.
• Thoroughly test post-page load JavaScript CSS for dynamic content or single-page sites.
• Explore the Custom JavaScript feature for advanced JavaScript operations.

Benefits of Customization

• Unique Branding: Tailor your app's appearance to reflect your brand identity effectively.
• Enhanced User Experience: Provide users with a visually appealing and intuitive interface.
• Flexibility and Adaptability: Customize styles and behaviors to meet evolving user needs and preferences.