LESS Development

phpFox 4.3+ provides support to develop your themes using LESS. This not only makes it easier on you as the designer, but also gives Admins the ability to change the color palette of your theme direct from their AdminCP.

If you wish to continue reading on, make sure you have an IDE, Text Editor or Server that supports LESS compiling. phpFox only supports the LESS compiling from the AdminCP for when a client is designing your theme. Under development its best to do it via the .less files.

variables.less

To get this started we need to have a file in our themes assets/ folder called variables.less. You can place any of your custom less variables here. In this test, we will work with a simple example. In that file add

@header_bg: #000;

With this in place, we can now start working with autoload.less.

autoload.less

The autoload.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

@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

{
    "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

{
    "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.

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