Custom Assets

Add custom CSS, JavaScript, fonts and Less that will be preserved during all updates of YOOtheme Pro.

Child themes allow you to load additional asset files to your website. However, you should always check if it is really necessary to create one.

Many customizations can be made from within YOOtheme Pro, like modifying the theme style in the style customizer. To add custom JavaScript, CSS or LESS, go to the Settings → Custom Code panel in YOOtheme Pro – see the Settings documentation on custom code for more information. Custom CSS for specific elements in the YOOtheme Pro page builder can be added in the Advanced tab of the element settings. That way your code stays right where it is applied and is also removed if you ever decide to remove the element.

As you can see, you might not even need a child theme with additional files. Still, if you have many customizations or prefer to keep all of your custom code in actual files uploaded to your server, child themes offer all the functionality you need.


CSS

To add custom CSS in your child theme, create a /css folder with a custom.css file inside. Add your CSS rules to that file. The parent theme’s styles will continue to load, additionally loading the custom CSS.

Note You can also load any external CSS file. Learn more in the documentation on modules and events.


JavaScript

To add custom JavaScript in your child theme, create a /js folder with a theme.js file inside. Add your JavaScript code to that file. This file is loaded instead of the default theme.js so that you can completely overwrite the JavaScript behavior.

Note You can also load any external JS file. Learn more in the documentation on custom modules.


Fonts

To add custom fonts in your child theme, create a /fonts folder inside your child theme directory and put your font files there. Now add a @font-face rule to the child theme's /css/custom.css and reference the font files. For example:

@font-face {
    font-family: 'my-custom-font';
    src: url('../fonts/my-custom-font.eot');
    src: url('../fonts/my-custom-font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/my-custom-font.woff') format('woff'),
         url('../fonts/my-custom-font.ttf') format('truetype'),
         url('../fonts/my-custom-font.svg#mycustomfont') format('svg');
}

To apply the font to HTML elements or CSS components, go to the style customizer and open the font picker. Instead of selecting one of the proposed fonts, type the full name of your custom font inside the search field and hit enter.

Enter your font name

Note When you select a Google font in the Style Customizer, it is automatically downloaded to your server and stored locally. There is no round-trip to Google Fonts server, which positively influences your Google PageSpeed rank and helps with GDPR-compliance.


Less

To add a custom Less style in the child theme, create a /less folder with a theme.my-custom-style.less file inside. Your new style my-custom-style should now be available in the style library.

The easiest way to get started is by importing an existing style from the parent theme and customizing it.

The following example loads the default Fuse style:

// Imports the default Fuse style
@import "../../yootheme/less/theme.fuse.less";

// Add your custom Less to customize the style here

The following example loads a specific Fuse style:

// Imports the default Fuse style
@import "../../yootheme/less/theme.fuse.less";

// Style
@import "../../yootheme/vendor/assets/uikit-themes/master-fuse/styles/white-red.less";

// Add your custom Less to customize the style here

The following example loads just the core UIkit style:

// Platform
@import "../../yootheme/less/platform.less";

// UIkit Core
@import "../../yootheme/vendor/assets/uikit/src/less/uikit.less";

// UIkit Theme
@import "../../yootheme/vendor/assets/uikit-themes/master/_import.less";
@import "../../yootheme/vendor/assets/uikit-themes/master-uikit/_import.less";

// Theme
@import "../../yootheme/less/theme.less";

// Add your custom Less to customize the style here

YOOtheme Pro