The Styles settings page
The Styles settings page is where you design the look of the tabs.
Presets are complete tab styles created by our professional design team using the style settings.
Selecting a preset shows it in the live preview but it will not be saved to your tabs until the Use preset button is clicked.
When the Use preset button is clicked, all existing style settings will be replaced with the settings from the preset.
When designing your tabs, select a preset that closely matches the look you want for your tabs and then use the style settings to make changes.
The style settings are organized into the following categories:
- Change text colors, sizes, weights, styles, and alignment.
- Change margins, padding, and distribution.
- Change border colors, border widths, border styles, and corner radiuses.
- Change background colors.
- Change the indicator type and colors for the vertical layout.
- Add custom CSS.
The app simply organizes the content that it's given into tabs.
The app does not control the appearance of tab content in any way.
Learn more about tab content styling.
Each section of the style settings shows one or more of the following panels:
- Settings for the tab titles. These settings apply to all tab titles unless overridden by settings in other panels.
- Open tabs
- Settings for the titles of tabs that are open.
- First tab
- Settings for the title of the first tab in a tab set.
- Hovered tab
- Settings for the titles of tabs that are hovered over with the mouse.
- Last tab
- Settings for the title of the last tab in a tab set.
- Settings for the HTML element that wraps each tab content panel.
- Settings for the HTML element that wraps each tab set.
You can see and select the layout that the style settings change with the layout selector at the bottom of the settings column.
To save you time, many vertical layout style settings are inherited from the horizontal layout if they haven't been set.
For example, when tab titles are set to red for the horizontal layout, they'll be red for both layouts unless they're set to a different color for the vertical layout.
Inherited settings are indicated by a blue dot beside the setting name.
The live preview uses an example tab set to show how your tabs will look with the current style settings. It's updated as style settings are changed so that you can see the changes without saving them.
If a style setting isn't set then the tabs in your shop will inherit that style from the theme.
Styles inherited from the theme can not be shown in the live preview.
The live preview shows how the app will style the tabs but it can't show how that styling may be affected by the theme.
If style settings have been set but the tabs in your shop still look different than the tabs in the live preview it's because the theme is overriding the tab style settings.
The page background and tab content colors are set by the theme so they can't be shown in the live preview. Instead, the preview shows the page background in white and the tab content in black.
If your theme colors are different then you can change the live preview to match them using the live preview settings.
When the Preview settings button is clicked from the live preview actions bar, the preview settings bar shows with the following controls:
- Change the color of the live preview background.
- Change the color of the example tab content text.
- Reset the live preview settings to their defaults.
- Save the live preview settings and close the settings bar.
The theme preview shows how your tabs look in the themes that they're enabled in.
Clicking the View in theme button from the live preview actions bar opens a new browser tab to show the tabs in the theme.
If the tabs are enabled in more than one theme then clicking the View in theme button opens a menu that lists each theme that the tabs are enabled in. Clicking a theme name opens a new browser tab to show the tabs in that theme.