Changing Less variables
Last updated
Was this helpful?
Last updated
Was this helpful?
Now, while your terminal is open and yarn watch the 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 into xampp/htdocs/zero-one/assets/app/dist/css/ folder.
You can learn more in-depth if you like at .
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.
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
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.
Well, the buttons are a bit different. But also easy. You will see this:
Both of those variables have only two options, and those are obvious. Test it and see.
Try this, it is a smooth rounded button