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 My Customization tab shows a list of your own saved customizations. Click on the name of the customization to apply it to your website. Customizations can also be renamed and deleted with the action buttons, which show up on the right side when hovering an item in the list.
Style customizations can be saved in the style library. Once a customization is saved, it is available in the My Customizations tab. Clicking on it will load your customizations and switch back to the used style which was active when the customizations were saved.
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 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.