Visual overrides

Almost every theme has options which cannot be implemented with a simple CSS class addition, such as color options which allow the user to select the color from color picker.

As using the style attribute is not an elegant solution, we have created an alternative which allows you to create custom CSS code on the fly during the website rendering process.

To do so, create a visual-override.js file in your theme directory and create a function which will be used to generate additional CSS code based on the options params:

/*
 * Custom function used to generate the output of the override.css file
 */

var generateOverride = function(themeConfig, postConfig, commonConfig, pageConfig) {
    return `
        body {
            background: ${themeConfig.primaryColor};
            font-size: ${themeConfig.fontSize}px;
        }
    `;
};

module.exports = generateOverride;

Your function must can use four arguments:

• themeConfig - it contains an object with all your custom theme options values
• postConfig - it contains options which are post-specific
• commonConfig - it contains other options like excerpt length, posts per page etc.
• pageConfig - it contains options which are page-specific

The function must return CSS code which will be linked with the main CSS file from the theme.

We recommend using JavaScript multi-line strings for better code readability.