Zero One Documentation
Search…
Changing Less variables
Now, while your terminal is open and
yarn watch command is running let's go to xampp/htdocs/zero-one/assets/app/custom/ folder. That folder contains all Zero One theme files. To understand how it works:
All files in
xampp/htdocs/zero-one/assets/app/custom/ folder override and extend core Uikit files in xampp/htdocs/zero-one/assets/app/src/less/ folder and are compiled as CSS files in to xampp/htdocs/zero-one/assets/app/dist/css/ folder. Variables (variables.less) file
Locate the
xampp/htdocs/zero-one/assets/app/custom/elements/variables.less and open it with your favorite code editor, or text editor. Every variable you see there is a global variable, and change many things.
Change fonts
Font variables are very straightforward, just change them as you wish.
If you want to add custom self-hosted fonts and want a clean setup you can do it like this https://www.one.thezero.club/guide/tricks/custom-fonts-import.
Colors, backgrounds, margins etc.
Everything is very straightforward and it will be easy for you to completely change the theme looks.
Remember, every time you save
variables.css file new CSS theme file will be generated. It takes 5 - 10 seconds. And you can check changes by refreshing the localhost website in the browser. Buttons
Well, the buttons are a bit different. But also easy. You will see this:
1
//
2
// Buttons
3
//
4
​
5
@global-button-style: creative; // default, creative
6
@global-button-border-style: default; // default, round
Copied!
Both of those variables have only two options, and those are obvious. Test it and see.
Try this, it is a smooth rounded button
1
//
2
// Buttons
3
//
4
​
5
@global-button-style: default; // default, creative
6
@global-button-border-style: round; // default, round
Copied!
Last modified 7mo ago