Style Settings

22 Apr Style Settings

Click button on Top Toolbar and select Style tab. It contains a lot of style settings grouped by categories.

Global Style Settings

This category contains global parameters of the popup:

• Position. Select popup position on browser window.
• Enable overlay. Activate this option if you want to enable overlay.
• Overlay animation. Adjust the overlay animation effect.
• Overlay color. Adjust the overlay color.
• Active overlay. If enabled, the popup will be closed when user click overlay.
• Spinner colors. Adjust colors of the spinner.
• Text style. Adjust the style (font, color, size, etc.) of the text that appears in your popup.

Input Field Style Settings

This category contains parameters to adjust the style of input fields.

• Icon style. Adjust the style (size, color, position) of input field icons.
• Input text. Adjust the text style (font, color, size, etc.) of input fields. You can do it for different input states (normal, hover, focus). These parameters override “Text style” parameters from “Global Style Settings” category.
• Input background. Adjust the background style of input fields. You can do it for different input states (normal, hover, focus).
• Input border. Adjust the border style of input fields. You can do it for different input states (normal, hover, focus).
• Input shadow. Adjust the shadow style of input fields. You can do it for different input states (normal, hover, focus).
• Checkbox and radio style. Choose how to display checkbox and radio button fields and their captions.
• Checkbox view. Choose the checkbox view.
• Radio button view. Choose the radio button view.
• Image Select style. Adjust image alignment and effect.
• Image label. Adjust the text style (font, color, size, etc.) of image label. These parameters override “Text style” parameters from “Global Style Settings” category.
• Image border. Adjust the border style of images. You can do it for different states (normal, hover, selected).
• Image shadow. Adjust the shadow style of images. You can do it for different states (normal, hover, selected).
• Multiselect style. Choose how to display multiselect options.
• Tile style. Adjust the tile style.
• Tile text. Adjust the text style (font, color, size, etc.) of tiles. You can do it for different input states (normal, hover, selected). These parameters override “Text style” parameters from “Global Style Settings” category.
• Tile background. Adjust the background style of tiles. You can do it for different input states (normal, hover, selected).
• Tile border. Adjust the border style of tiles. You can do it for different input states (normal, hover, selected).
• Tile shadow. Adjust the shadow style of tiles. You can do it for different input states (normal, hover, selected).
• Range slider skin. Select the skin of range slider. This parameter is available if your enabled Ion.RangeSlider plugin on General Settings page.
• Range slider colors. Adjust colors of range slider. This parameter is available if your enabled Ion.RangeSlider plugin on General Settings page.

Button Style Settings

This category contains parameters to adjust the style of buttons.

• Button style. Adjust the button size and position.
• Button text. Adjust the text style (font, color, size, etc.) of buttons. You can do it for different button states (normal, hover, active). These parameters override “Text style” parameters from “Global Style Settings” category.
• Button background. Adjust the background style of buttons. You can do it for different button states (normal, hover, active).
• Button border. Adjust the border style of buttons. You can do it for different button states (normal, hover, active).
• Button shadow. Adjust the shadow style of buttons. You can do it for different button states (normal, hover, active).

Error Bubble Style Settings

If user submit wrong data through certain input field, the error bubble is displayed for this field. In this category you can configure the view of the bubble.

• Bubble background. Adjust the background of error bubbles.
• Error text style. Adjust the text style (font, color, size, etc.) of errors. These parameters override “Text style” parameters from “Global Style Settings” category.

Progress Bar Settings

In case of using multi-page (multi-step) forms, you can enable progress bar. In this category you can configure the view of the progress bar.

• Progress style. Select the general view of progress bar.
• Colors. Adjust colors of progress bar.
• Double-tone stripes. Add double-tone diagonal stripes to progress bar.
• Show page name. Show page name.
• Include confirmation page. Consider Confirmation page as part of total pages and include it into progress bar.