Custom Css Configuration

The objective of this guide is to provide step-by-step instructions on how to configure custom CSS and apply it to your application.

Expected output:

1st Step

  1. You can customize various UI elements, such as Controls UI, Application UI, Menu, and more, by writing CSS code within the system.

2nd Step

  1. Begin by creating a new blank transaction page.

3rd Step

  1. For now, we will focus on customizing controls such as Textboxes, Text Areas, and similar elements.

4th Step

  1. Add the control(s) you wish to customize.

5th Step

  1. Now, go to the system settings and navigate to the "Theme - Web" section. In this section, add your CSS code. For this example, we will customize the Textbox and Text Area. Additionally, you can modify the font family, body text color, theme, and other custom styles according to your requirements.

6th Step

  1. To customize any UI controls, Application UI, Menu, etc., you will need to overwrite the existing CSS of that control. This means you must take the predefined class of the control or UI element you want to customize and add new CSS to that class. To find the CSS class name, you can use the web inspection tool to identify the class name. For example, here, we will extract the class name of a textbox and apply new CSS to it.

7th Step

  1. Now, we will write CSS for the Textbox and Text Area to help you better understand the customization process. By inspecting the textbox in the previous step, we found that the textbox has the predefined class form-control. Therefore, we will apply new CSS to customize the style section for the form-control class.

8th Step

  1. When writing CSS, you need to first add the .cameo class, followed by the control or any other class you want to customize. For example, for the textbox, we used .cameo .formcontrol and then wrote the CSS for that. Once you’ve written the CSS, save it and refresh the system to apply the new styles.

9th Step

  1. By customizing the CSS, you can change the entire application's UI. You just need to target the specific class whose CSS you want to modify, and then write the CSS in the custom style in settings.

Final Output: