Theme Customizations

Theme Content

The theme comes with page settings for each section within the page. These settings will set the content in each block of the template.

Theme Colors

Zenii is built using Tailwindcss so customizing it is very easy. It comes with tailwind.config.js file where you can customize the theme colors and fonts. The default config file looks like this:

module.exports = {
    theme: {
        colors: {
            primary: '#6C63FF',
            secondary: '#8C87E6',
            tertiary: '#444444',
            error: '#ff6363',
            white: '#FFFFFF',
            lightGray: '#f9f9f9',
            gray: '#F3F3F3',
            transparent: 'transparent'
        },
        fontFamily: {
            body: ['Roboto','sans-serif'],
            display: ['Rubik', 'Roboto', 'sans-serif']
        }
    }
}

You can change or add theme colors, fonts, spacing, sizing just like Tailwindcss' config. Here's the full config reference.

When changing fonts in the config, make sure to include the font link in the partials/meta.htm or add your font files in case you want to include it.

Theme Color Picker

The theme comes with a color picker option on the theme's setting. You can override the theme colors by setting the Override default theme colors to on. These will override the colors inside tailwind.config.js file. Instead, it will use the colors selected on the backend. This feature uses Octobercms asset combiner.

Compiling Assets

The theme is compiled using Laravel Mix, so all of its options can be used inside webpack.mix.js.

Command for development:

npm run dev

Command for development with live reloading:

npm run watch

Command for production build:

npm run prod

PostCSS plugin is used for the styles along with PostCSS Nested, PostCSS Import, Autoprefixer to use sass like functionalities like import and nesting. PurgeCSS is used when compiling assets for production. This plugin greatly reduces the file size of the style.css as it removes unused css.

Using Octobercms' Ajax Framework

By default, the theme does not include jquery & October's ajax framework. You can enable it on the theme settings in the extras tab. Additionally you can disable smoothscrolling and scroll animations in the tab.