Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

phpFox phpFox 4.3+ provides support to develop your themes using 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.

 

...

To get this started we need to have a file in our themes themes assets/ folder called 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

Code Block
languagenone
themeRDark
borderStylesolid
linenumberstrue
collapsefalse

@header_bg: #000;

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

autoload.less

The The autoload.less file needs to also be placed in your themes themes assets/ folder. The first line of this file should be to include the the variables.less file. In this working example let's add the following code code

Code Block
languagenone
themeRDark
borderStylesolid
linenumberstrue
collapsefalse

@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 themes theme.json file. Open your your theme.json json file. You will find something similar to this this

Code Block
languagenone
themeRDark
borderStylesolid
linenumberstrue
collapsefalse

{
    "id": "sample",
    "name": "Sample"
}

 

We need to add a new object for the key key vars. Using the example we have worked with thus far, this file would then look like like

Code Block
languagenone
themeRDark
borderStylesolid
linenumberstrue
collapsefalse

{
    "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 the variables.less file. In this case it is 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  in the TM, log into your AdminCP and head on over to your theme. You will notice a new menu has been added for for Design.   Click on that and you should see

Image RemovedImage Added