Theme styling

The front-end of Zero One is based on UIkit, in our opinion the best CSS/JS framework that exists.

From version 2.0.0 Zero One theme has an in-built Theme styler. And it is not just a simple styler, it is actually a stylesheet compiler, which means, it compiles all LESS/CSS into one minified CSS file. Which adds greatly to website speed.

Turn the styling ON/OFF

It is important to understand this option.

When you save your style options and refresh any front-end website page in that moment styles compiling happened. And it will take up to 5-10 seconds. If something is wrong with your input, an error will arise, so then just check have you added in input something strange.

But remember one thing, when you finish styling and you are happy with how it looks, and styles are compiled, turn it off. Why turn it off? Because it will compile every time you refresh any page, and slow your website.

Styles

You can change the feel of the whole website just by changing these options. Add shadows or rounded borders to website elements.

Main site colors

It can't get easier than this. 😎 Choose your colors and completely change the look.

Only HEX colors are allowed at the moment.

Change the navbar height, style, and dropdown colors.

Offcanvas & Buttons

Fine-grain offcanvas appearance.

Button style and button border have two options each, and by combining those options you can create 9 different sets of buttons. From version 4.5.0 is possible to customize the colors of every button type.

Typography

We don't want to narrow your options. Use any font provider you like. Use Google, Adobe, FontSpace, or any other fonts. You can use that URL option for even your self-hosted fonts.

Just make sure when adding Font Family names you follow the rules, just as we noted.

Check out the small video preview on how to add new Google Fonts https://www.one.thezero.club/guide/tricks/adding-google-fonts

Breakpoints

You can customize the breakpoints to suit your requirements.

Custom code

On the bottom, there are also input fields for adding custom CSS code, or other custom code, such as Analytics, Tag manager code, custom JS code, and even URLs, or whatever.

Advanced

You should also check out the advanced Less/CSS setup. Even if you are not going to do it, it is worth checking to understand how everything works. Especially because you can customize Zero One further.

Last updated