- Accounts & Connection Management
- Data Management & Analysis
- Price Monitoring
- Charting
- Trading
- Scanners
-
Builders
-
Manual Strategy Builder
- Main Concept
- Operand Component
- Algo Elements
-
Use Cases
- How to create a condition on something crossing something
- How to create an indicator based on another indicator
- How to calculate a stop loss based on indicator
- How to submit stop order based on calculated price
- How to calculate a current bar price using a price type from inputs
- How to Use a Closed Bar Price
- Automatic Strategy Builder
-
Manual Strategy Builder
- Autotrading
- FinScript
- Trade Analysis
- Media Feeds
- Logs & Notifications
- UI & UX
Overview
Â
The Tab Control properties section within the Application Themes module of FinStudio provides essential customization options for the tabs used across the trading platform. Tabs are instrumental in organizing content efficiently, allowing users to navigate through various sections and modules swiftly. Customizing these elements enhances usability, ensures visual coherence, and improves the overall navigation experience.
Customizing Tab Control Properties
Â
Background:
Â
- Functionality: Sets the background color of the tab area.
- Impact: The background color can influence the visual integration of the tabs within the overall interface. Choosing an appropriate color ensures that tabs are distinct yet harmonious with the application's design theme.
Â
Selected Background:
Â
- Functionality: Determines the background color of the currently active (selected) tab.
- Impact: A contrasting background color for the active tab helps users quickly identify which section or module is currently in view, enhancing usability.
Â
Under Tab Line Brush:
Â
- Functionality: Specifies the color of the horizontal line beneath the tabs.
- Impact: This line can act as a visual separator between the tabs and the content area, helping to define the tab area more clearly.
Â
Tabs Panel Height:
Â
- Functionality: Sets the total height of the tabs panel.
- Impact: Properly adjusting the panel height ensures that the tabs are neither too intrusive nor too inconspicuous, balancing visibility with efficient use of space.
Â
Tabs Height:
Â
- Functionality: Determines the height of the tabs themselves.
- Impact: Similar to panel height, the tabs' height affects how easily users can interact with them. Adequate height enhances accessibility without overwhelming the interface.
Â
Tabs Corner Radius:
Â
- Functionality: Allows adjustment of the corners of the tabs to make them rounded.
- Impact: Rounded corners can soften the design and may be used to align with the overall aesthetic style of the application.
Â
Tabs Gap Size:
Â
- Functionality: Sets the size of the gap between individual tabs.
- Impact: Adequate spacing between tabs prevents the interface from appearing cluttered and helps users differentiate and select tabs more easily.
Â
Font:
Â
- Functionality: Customizes the font used in the tabs, including type, size, and color.
- Impact: Font choice is crucial for ensuring readability and aesthetic appeal. The right font helps maintain consistency with the application’s overall design and enhances user accessibility.
Â
Selected Font:
Â
- Functionality: Specifies the font settings for the selected (active) tab.
- Impact: Differentiating the font of the active tab, either through size, color, or style, helps highlight the active section and guide the user’s navigation.
Â
Implementing Changes: Steps for Customization
Â
-
Navigate to Tab Control Properties:
- Access this section by selecting the 'Tab Control' category within the Theme Tab of the Application Themes module.
- Access this section by selecting the 'Tab Control' category within the Theme Tab of the Application Themes module.
-
Adjust Tab Settings:
- Modify the background colors, under tab line brush, panel and tabs heights, corner radius, gap size, and font settings using the provided controls. Preview the changes in real-time to assess their impact.
- Modify the background colors, under tab line brush, panel and tabs heights, corner radius, gap size, and font settings using the provided controls. Preview the changes in real-time to assess their impact.
-
Apply and Evaluate:
- After configuring the settings, apply the changes to update the appearance of the tabs across the application. Evaluate the new design in various user scenarios to ensure it meets functional and aesthetic expectations.
Â
Best Practices
Â
-
Visual Consistency:
- Ensure that the tabs' design is consistent across different parts of the application to prevent cognitive overload and maintain a cohesive look.
- Ensure that the tabs' design is consistent across different parts of the application to prevent cognitive overload and maintain a cohesive look.
-
Accessibility:
- Choose font sizes and colors that provide good contrast against the tab backgrounds for better readability.
- Choose font sizes and colors that provide good contrast against the tab backgrounds for better readability.
-
Navigation Efficiency:
- Keep tabs well-spaced and adequately sized to facilitate easy navigation, especially in environments where quick access is frequently required.
Â
Conclusion
Â
Customizing the Tab Control properties in FinStudio's Application Themes module allows users to tailor the appearance and functionality of tabs to enhance navigational efficiency and aesthetic appeal. By carefully adjusting these properties, users can ensure that the tabs not only fit well with the application's overall design but also improve the usability and overall user experience.
- Accounts & Connection Management
- Data Management & Analysis
- Price Monitoring
- Charting
- Trading
- Scanners
-
Builders
-
Manual Strategy Builder
- Main Concept
- Operand Component
- Algo Elements
-
Use Cases
- How to create a condition on something crossing something
- How to create an indicator based on another indicator
- How to calculate a stop loss based on indicator
- How to submit stop order based on calculated price
- How to calculate a current bar price using a price type from inputs
- How to Use a Closed Bar Price
- Automatic Strategy Builder
-
Manual Strategy Builder
- Autotrading
- FinScript
- Trade Analysis
- Media Feeds
- Logs & Notifications
- UI & UX