36

Product support

Get help in the theme support forum.

Categories

Zenii Theme

A free flat landing page theme for OctoberCMS built using Tailwindcss.

Features

  • Responsive
  • Small CSS size
  • Material Icons
  • Flat Illustrations from unDraw
  • Built-in theme options
  • Theme Color Picker
  • Built using Tailwindcss
  • Laravel Mix

Demo

Credits to the authors of these libraries

License

This project is licensed under the MIT License - see the LICENSE.md file for details

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.

  • Found the theme useful on 6 Oct, 2020

    I really like the theme Trying to replace the logo.svg with my oen logo.svg and it renders to size 0x0 for some reason.

  • author

    Replied on 8 Oct, 2020

    Hi Brian,

    Glad you liked the theme! Your own logo.svg might not have width and height properties thus displaying 0x0. Here's the default logo.svg properties:

    <svg width="115" height="58" viewBox="0 0 115 58" fill="none" xmlns="http://www.w3.org/2000/svg">

    Hope this helps

  • Found the theme useful on 1 Aug, 2020

    Awesome theme easy to use. This theme made my day. Just looking forward to see if there is option to change the logo in backend.

  • author

    Replied on 3 Aug, 2020

    Thank you Farhan, glad you liked the theme. Unfortunately there's is no way to change the logo on the backend yet. But, you can simply add a config for it.

    Ex: In the fields.yaml you can add something like

    site_logo:
        tab: Basic Info
        label: Logo
        type: mediafinder
        mode: image

    In the header.htm partial replace

    <img src="{{ 'assets/dist/images/logo.svg'|theme }}" alt="logo" class="logo">

    with this

    <img src="{{ this.theme.site_logo|theme }}" alt="logo" class="logo">

    Hope this helps

  • Found the theme useful on 9 May, 2020

    Love it, thank you for that

  • author

    Replied on 19 May, 2020

    Thanks! Glad you liked it.

1.2.0

Added extra options to enable/disable smooth scroll, scroll animations & jquery + October's Ajax framework

Jul 10, 2020

1.1.2

Minor Bug fixes

Jul 10, 2020

1.1.1

Updated Tailwindcss version to 1.4.6

Jun 07, 2020

1.1.0

Added theme color picker

Apr 21, 2020

1.0.0

Initial release

Apr 11, 2020