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.

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.

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.

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.

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.

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.

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

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