Home   >   Design • vFlow • vFlow Tasks   >   Add Custom Style

Add Custom Style

You can use this task to impart a custom style to the page, component, or element. The style includes several style-based properties, such as the font’s color, size, type, background, animation, and CSS file-based properties.

To configure the Add Custom Style property:

  1. In the Events dialog box, scroll down.
  2. Under Add Tasks, click the Select Task list, and then select ADD_CUSTOM_STYLE task.
  3. Click Add Task Config, and the Add Task dialog box opens.
  4. In the Add Task dialog box, click the Configuration area to expand it.
  5. In the Configuration area, perform the function as follows:
PropertyDescription
Select TypeClick this list and then select one of the following entity types:
a. Page
b. Component
c. Element

The application will impart the style to the selected entity.
Select IDIn this field, enter the ID of the selected entity.

Note:- If you do not remember the ID of the selected entity type, close the current dialog box and go to the selected entity (For example:- element) and then note down its ID.
Add StyleClick Add Style to expand it. In the Add Style area, you can configure the following properties:
a. Font family
b. Font size
c. Text alignment
d. Text’s background color
e. Text’s padding and Margin, and others.

To configure the font-related properties of an entity, visit the posts: vFlow Components and vFlow Elements (Common Properties). In the vFlow Elements (Common Properties) post, see the section: UI Properties (Data Style) and UI Properties (Label Style).
Add AnimationTo configure the animation-related properties of an entity, visit the posts: vFlow Components and vFlow Elements (Common Properties). In the vFlow Elements (Common Properties) post, see the section: UI Properties (Animation Style).
Add Css ClassesClick Add Css Classes, and the Add Css Classes field comes into view. In the Add Css Classes field, enter the Css class’s name if you want to apply the styles that are defined in the Css class.

Note:- To know more about how to define a CSS class, visit the post: vFlow Elements (Common Properties). In the vFlow Elements (Common Properties) post, go to the UI Properties (Animation Style) section.
  1. After you define the style-related properties, click Submit to configure the ADD_CUSTOM_STYLE task.
Was this article helpful?
YesNo