Change any aspect of your site’s appearance like colors, fonts and spacing without writing any CSS.
YOOtheme Pro comes with a Style Library 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.
Open the Style Library by clicking the currently active style and select a new one. There are various options available to filter the styles.
|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.
The My Styles tab shows a list of your saved styles. Click the style to apply it to your website. Use the Rename, Download and Delete icons which appear up on hover to rename, download and delete the style. The Current Style matching indicator shows if the style is identical to the one currently used. The last modified date shows when the style was saved. Additionally, the search can be used to easily find the needed style.
To save a style, open the style library and click the Save Style button in the upper right corner.
To upload a style use the Upload Style button in the upper right corner.
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.
|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 grey 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.
All customizations added in the style library can be downloaded as a Less file. Unlike the style preset saved in the style library, Download Less button only downloads the Less customizations without the used style.
By default the style is automatically compiled after a change in the style customizer or after a YOOtheme Pro update. But in some cases the style needs to be recompiled manually, for example when creating a custom Less style in the child theme. To do that, simply click the Recompile Less button.