Minivolve Logo
Log inSign up

Help Center

Styling Your App

Learn how to customize the appearance of your Minivolve apps with powerful styling tools.

Using the Style Editor

The Style Editor gives you precise control over the appearance of your app elements. You can access styling options by selecting any field in the app builder and clicking the "Styles" tab in the properties panel.

The Style Editor is especially powerful for container fields, where styling changes can affect all contained elements.

Available Styling Options

Typography

  • Font Family: Choose from a variety of web-safe fonts
  • Font Size: Set text size from 12px to 48px
  • Font Color: Use color picker or enter hex values
  • Bold Text: Toggle between normal and bold weight

Background

Choose between three background types:

  • Solid Color: Pick any color for a uniform background
  • Gradient: Create dynamic two-color gradients with adjustable direction (0-360°)
  • Image: Upload and position a background image

Accent Color

The accent color controls interactive elements like slider tracks, checkboxes, and radio buttons. This creates a consistent visual language throughout your app.

Border Styling

  • Border Style: None, solid, dashed, or dotted
  • Border Width: Control thickness in pixels
  • Border Color: Customize border color
  • Border Radius: Add rounded corners (0-50px)

Spacing

Fine-tune layout with precise control over:

  • Margin: External spacing around elements (top, right, bottom, left)
  • Padding: Internal spacing within elements (top, right, bottom, left)

Custom CSS

Advanced users can add custom CSS properties for additional styling options not covered by the built-in controls.

Style Inheritance

Container fields automatically pass certain style properties to their child elements:

  • Font family, size, weight, and color
  • Accent color for interactive elements

This helps maintain visual consistency while reducing the need to style each element individually.

Tips for Effective Styling

  • Use containers for grouping: Organize related fields in containers and apply consistent styling to them.
  • Limit color palette: For professional-looking designs, use a limited color palette of 2-3 main colors plus black/white/gray.
  • Maintain adequate contrast: Ensure text has sufficient contrast with background colors for readability.
  • Apply consistent spacing: Use consistent margin and padding values throughout your app.
  • Start with containers: Style container elements first, then refine individual fields as needed.

Troubleshooting

Numeric Input Issues

If you experience issues with numeric inputs or sliders not responding to changes:

  1. Make sure you're clicking directly on the input field
  2. Try clicking away from the field and then back into it
  3. If problems persist, refresh the page and try again

Note: Recent improvements have been made to fix issues with numeric inputs and sliders in the Style Editor.

Examples

Check out the template gallery for examples of well-styled apps that you can use as inspiration or starting points for your own designs.