Using macros, you can replace the names of the classes used in all templates. This will allow you to leave existing template files when tightening a new skin - the template structure most often coincides, only the names of the classes differ.
The essence of macros
Most of the out-of-the-box Bootstrap dashboard templates use the same structure. They have a grid, buttons, forms, content blocks, and tables. The set of HTML-elements practically does not differ from the template in the template. But the class names are different.
For example, the AdminLTE template uses the box class as a "standard" page layout block. In classic Bootstrap 3, the panel class is used for the same purpose. The main content of the block has the class box-body and panel-body respectively. It turns out that in order to replace one template with another, we just need to change all the class names box to panel. Or to card if we have a more recent version of Bootstrap.
That is the task of macros. Most of the class names in AlterCPA templates are indicated by macros. You can change the name of the class in the settings, after which it will be automatically inserted into all templates, of which there are more than a hundred for a long time. And you won't need to change them manually. When updating the system, and hence the templates, everything will also be done automatically.
Macros settings
Macros are managed from the "Macros" section. The "Name" column expands the macro's task. The "Code" column contains a name that can be used to insert into the template and other macros.
The value of the macro is the content that will eventually be inserted into the template. A value can contain both a specific set of characters and the value of another macro. To insert the value of a macro xxx into another macro, use the code {xxx}.
You can also paste a value from the "Parameters" section. To insert a parameter with the name xxx, the code {cfg:xxx} will be used.
Additional options from the main appearance configuration:
{mcfg:box}- primary color of buttons and elements: success, warning, danger, primary, info, default{mcfg:bg}- widget coloring: light-blue, aqua, navy, teal, green, purple, yellow, orange, red, maroon, gray, black
For example, we have a macro box for the main block, which can contain the blocks box-header, box-body and box -footer. We write these macros as {box}-header, {box}-body and {box}-footer respectively. Now if we change the value of the box macro to panel, our dependent macros are converted to panel-header, panel-body > and panel-footer.
Inserting macros in the template
To insert a macro value named xxx into a template, use the following code:
{tpl:xxx}
You can also insert the value of a skin parameter. To insert a parameter named xxx into a template, use the following code:
{tpl:cfg-xxx}
Useful macros
When working with templates, it will be convenient for you to specify paths to resources using macros. So these paths will be relevant when moving the skin to another folder.
{tpl:skin}- skin folder, for examplemystyle.{tpl:skinpath}- skin folder path, for example/skin/mystyle, no slash at the end.{tpl:skincss}- CSS files path, for example/skin/mystyle/css, no slash at the end.{tpl:skinjs}- JS files path, for example/skin/mystyle/js, no slash at the end.{tpl:skinimg}- images path, for example/skin/mystyle/img, no slash at the end.
Recommended setting for Bootstrap-3
Before pulling a template based on Bootstrap-3, it is recommended to set up macros to match the classic Bootstrap as closely as possible:
bg-bg-{mcfg:box}bg-active-{bg}-active active-bgbox-panelbox-widget-{box-primary} widgetbox-header-{box}-headingalert-alert