Styled Panel
Changing Typography of Fields
User changes typography of a field
Users can change the typography properties of a field to customize its appearance, including color, font, and alignment.
Info:
- Field: Name
- Typography Properties:
- Color: #3366CC
- Line Height: 1.5
- Text Alignment: Center
- Font Family: Arial, sans-serif
- Font Size: 16px
- Weight: Bold
User previews the window with changed typography
Users can preview the window to ensure that the typography changes have been applied correctly to all fields.
Info:
- Action: Preview the window
- Outcome: The window will display all fields with the updated typography properties.
User resets typography properties of a field
Users can reset the typography properties of a field to default settings if needed.
Info:
- Field: Address
- Action: Reset typography properties
- Outcome: The "Address" field will revert to default typography settings.
User saves the window with changed typography
Users can save the window with the updated typography properties to ensure that the changes are applied.
Info:
- Action: Save the window
- Outcome: The window will be saved with the updated typography properties.
Customizing Field Appearance
User changes background, border, and border-radius of a field
Users can customize the appearance of a field by adjusting background, gradient, border, and border-radius properties.
Info:
- Field: Email
- Appearance Properties:
- Background: #F0F0F0 or gradient from #FFA07A to #FF6347
- Image: url('path/to/image.png')
- Border Color: #CCCCCC
- Border Radius: 5px
- Border Type: Solid
- Border Width: 2px
User previews the window with changed appearance
Users can preview the window to verify that the appearance changes have been applied correctly to all fields.
Info:
- Action: Preview the window
- Outcome: The window will display all fields with the updated appearance properties.
User resets appearance properties of a field
Users can reset the appearance properties of a field to default settings if needed.
Info:
- Field: Phone Number
- Action: Reset appearance properties
- Outcome: The "Phone Number" field will revert to default appearance settings.
User saves the window with changed appearance
Users can save the window with the updated appearance properties to ensure that the changes are applied.
Info:
- Action: Save the window
- Outcome: The window will be saved with the updated appearance properties.
Adjusting Position, Size, Padding, and Margin of Fields
User adjusts position, size, padding, and margin of a field
Users can adjust the layout properties of a field, including position, size, padding, and margin.
Info:
- Field: Name
- Layout Properties:
- Position X: 100px
- Position Y: 50px
- Width: 200px
- Height: 40px
- Padding: 10px
- Margin: 5px
User previews the window with adjusted layout
Users can preview the window to ensure that layout adjustments have been applied correctly to all fields.
Info:
- Action: Preview the window
- Outcome: The window will display all fields with the updated layout properties.
User saves the window with adjusted layout
Users can save the window with the updated layout properties to ensure that the changes are applied.
Info:
- Action: Save the window
- Outcome: The window will be saved with the updated layout properties.