Learn how you can do Less customizations in your theme, adding your own UIkit theme or adding new settings to the Customizer.
Here is a short overview of the /less
folder.
Folder/File | Description |
---|---|
/less/theme.less |
Defines the theme style and imports the UIkit theme. This file will be compiled into CSS and saved in the /css folder every time you hit Compile Less in the theme settings. At the same time, all styles will be saved in the /styles/STYLE-NAME/css folder. |
/less/customizer.json |
Defines which customizer parameters will be displayed in default or advanced mode. It groups UIkit variables, sets what can be defined through the color picker, direct input or a select box and adds fonts. |
/less/bootstrap.less |
Imports all Bootstrap related files (Joomla 3 only). Just like the /less/theme.less file, it will be compiled into CSS every time you hit Compile Less in the theme settings. |
/less/uikit |
Contains the UIkit theme files. The UIkit core files can be found in /warp/vendor/uikit . |
Follow this tutorial first, before doing any Less customizations.
Copy the /less
folder and rename it to /less-custom
.
Open the theme's config.php
and register the new folder instead of the /less
folder:
'path' => array(
'theme' => array(__DIR__),
'js' => array(__DIR__.'/js'),
'css' => array(__DIR__.'/css'),
'less' => array(__DIR__.'/less-custom'), // Here
'layouts' => array(__DIR__.'/layouts')
),
Note This will change the core Less folder. All styles which are generated through the customizer will compile their CSS using the new /less-custom
folder.
Import the old /less/theme.less
in your new /less-custom/theme.less
by replacing the whole content with the following import rule.
@import "../less/theme.less";
Joomla 3 only: In order to make customizations update proof, import the old /less/bootstrap.less
in your new /less-custom/bootstrap.less
by replacing the whole content with the following import rule.
@import "../less/bootstrap.less";
Delete the folders /less-custom/UIkit
and /less-custom/bootstrap
.
Now you can start adding your custom code within the /less-custom/theme.less
.
UIkit has its own documentation, which you can find on the UIkit website. You might want to take a particular look at the docs on Variables, Best theming practices and the customizer.json when starting out with Warp themes and UIkit.
Do the following steps to add your own UIkit theme.
/less-custom/
folder:
/less/uikit
/less/bootstrap.less
/less/theme.less
/less-custom
like the whole /less-custom/uikit
folder, the /less-custom/theme.less
file or the /less-custom/customizer.json
to add your custom variables.Warp gives you access to all fonts available in the Google fonts directory. But occasionally you might want to add your own font or one that is not provided by Google.
Follow the tutorial Add your own custom Less folder above.
Open the /less-custom/customizer.json
file and add your font option and the correct path to the list.
"Custom Fonts": [ {"name": "FONT-FAMILY", "value": "'FONT-FAMILY'", "url":""} ], "System Fonts": [ ... ]
Firstly, follow the tutorial Add your own custom Less folder above.
Create a /fonts
folder inside the theme directory and put your font files there.
Add the @font-face
rule for your font to your /less-custom/theme.less
and link to your font files:
@font-face { font-family: 'FONT-FAMILY'; src: url('../fonts/FONT-FAMILY-webfont.eot'); .... }
Open /less-custom/customizer.json
file and add your font option like this:
"Custom Fonts": [ {"name": "FONT-FAMILY", "value": "\"FONT-FAMILY\", Helvetica, Arial, sans-serif"} ], "System Fonts": [ ... ]
And that's it! You can now use your font within the theme.
If you would like to add the option of picking images, like different backgrounds, to the Customizer, you can do so by following this tutorial. Let's say, you want to add two different background styles, red and blue.
Firstly, create an /images
folder inside your style /styles/STYLE-NAME
directory and put your background images there.
Create a new theme.less
by following the tutorial Add your own custom Less folder above.
Create a new variable for the body style and add it to the /less-custom/theme.less
file.
@theme_global-body-style: '';
Now we'll create mixins for each background case. In our example we have a mixin for the red case and one for the blue case.
.body-style() when (@theme_global-body-style = red) { body { background: url(../styles/STYLE-NAME/images/my-red.jpg) 0 0 repeat; } } .body-style() when (@theme_global-body-style = blue) { body { background: url(../styles/STYLE-NAME/images/my-blue.jpg) 0 0 repeat; } }
Afterwards, we need to call the mixin, which generates the actual CSS output.
.body-style();
Now, we'll create a select box for our body style @theme_global-body-style
. Just add the following code in the /less-custom/customizer.json
.
{
"type": "select",
"vars": [
"@theme_global-body-style"
],
"options": [
{"name": "Default", "value": ""},
{"name": "Red", "value": "red"},
{"name": "Blue", "value": "blue"}
]
},
Lastly, define, in which group your newly created variable should appear. In our example we added it to the General variables.
"groups": [
{
"label": "General",
"vars": [
"@theme_global-body-style",
"@global-background",
"@global-border",