Style Customizer

Change any aspect of your site’s appearance like colors, fonts and spacing without writing any CSS.

YOOtheme Pro comes with a Style Libary which allows you to switch the style of your whole website including all layouts with just one click. Choose one of the pre-built styles as a starting point and customize it to your needs.

The following settings can be found in the Style panel of YOOtheme Pro.


Style Library

Open the Style Library by clicking the currently active style and select a new one. There are various options available to filter the styles.

Filter Description
Style Filter whether all styles and their color variations, only the main styles without their color variations or a specific style should be shown.
Background Filter styles by black, dark, colorful, light or white background color.
Color Filter styles by the primary color which is used by UI elements like buttons and panels.
Type Filter whether the style is flat, material (using gradients and shadows) or skeurmophic (using textures and images).

Once a new style is selected, it will be applied to the whole website in the live preview.

Style library


Preview UI components

The option preview all UI components replaces the actual page in the live preview on the right side with an overview of all available UI components. This is great because you get a quick feeling of how the style looks across all components. A detailed preview of each component and all its variations will open when you customize a specific component.

Once done, you can switch back and disable the option to see how the customized style looks with your actual website and its content.

Preview UI components


General

There are two menus with a large number of sub-panels to customize the selected style to your needs. The General menu contains a few settings which are often modified first, while the Components menu is a full list of all UI components which can be customized.

Components

Panel Description
Global This panel contains global variables used across different UI components.
Theme This panel groups styles and theme features from YOOtheme Pro that do not come from UIkit.
Inverse Here you can customize components for inversed backgrounds. See the Inverse documentation for more information.
Google Fonts Manage which Google font variants and subsets are loaded. See the Fonts documentation for more information.

Note Adjust the global variables first, and you might not need to go into single components.

Components

Clicking on a component will open a sub-panel with all style settings available to customize. To identify components within your website, just hover an item in the the sidebar, and all its representations in the live preview will be highlighted with a blue border. In contrast, hovering any content in the live preview will show a tooltip that indicates which components are used in this specific part of the website. This gives you a good hint as to which components to check in order to customize it.

The whole YOOtheme Pro theme and all its styles and layouts are created with the UIkit front-end framework. UIkit provides pre-defined CSS classes for buttons, cards, typography and basically everything that YOOtheme Pro is built upon. Changing the style of CSS classes in UIkit means changing your YOOtheme Pro style as well. This is why the YOOtheme Pro Style Customizer is a UIkit style customizer that provides a powerful interface to customize all its components and their modifiers. This also means that there is a comprehensive documentation for each component in the UIkit documentation, which is a great resource to learn from.


Reset Modifications

When an option is changed in any of the component sub-panels, a gray dot will appear to its left indicating that the component has been modified. Hovering that dot will show an X, which, when clicked, resets the option back to the default value of the selected style.

Reset a single option to default

There is also a reset button to reset all options from one component.

Reset all component options to default

Hit Reset to Defaults at the bottom of the sidebar to reset all attributes to the style's default values.

Reset all modifications

YOOtheme Pro