...
With this in place, we can now start working with autoload.less.
autoload.less
The autoloadThe autoload.lessfile less file needs to also be placed in your themes assets/ folder. The first line of this file should be to include the variables.less file. In this working example let's add the following code
| Code Block |
|---|
@import "variables";
.sticky-bar {
background:@header_bg;
} |
If you check your site you will see it changes the main header background color.
theme.json
In order to allow clients to easily change the color palette of your theme this requires us to define design rules in our themes theme.json file. Open your theme.json file. You will find something similar to this
| Code Block |
|---|
{
"id": "sample",
"name": "Sample"
} |
We need to add a new object for the key vars. Using the example we have worked with thus far, this file would then look like
| Code Block |
|---|
{
"id": "sample",
"name": "Sample",
"vars": {
"header_bg": {
"title": "Header Background",
"id": ".sticky-bar",
"attr": "background"
}
}
} |
Each key for this associative object must be the variable name we created in the variables.less file. In this case it is header_bg. Each key requires an object of 3 key/value sets.
| Key | Description |
|---|---|
| title | The English phrase for what the Admin will be editing. |
| id | The CSS rules to make these changes. These should match your CSS rules you apply in autoload.less for this specific variable. |
| attr | This is the CSS property you are changing. This must be a valid CSS property. |
Testing the Design Manager
Now that we have everything in place to enable the Design Manager in the TM, log into your AdminCP and head on over to your theme. You will notice a new menu has been added for Design. Click on that and you should see
