Working with the appearance of the site is conducted from the "Management - Settings - Skins" section. For any changes in the design of your system, you must first create your own skin.
Creating new skin
To add a new skin use a form located above the table. Specify in it the name of the folder in which your future skin will lie, and click "Add".
New skin will be added to the skin folder of your network. Inside the skin folder, you can safely post any media files, they will not interfere with the operation of the system and can be used in creating their design.
Export skin
You can make the skin archive to send to another network, backup or create a full copy. To do this, use the "Export" button, it will save all the contents of the skin folder.
Import skin
You can upload a third-party design skin or your own, for example, from a backup. To do this, use the "Import" button above the table. Specify the import file and select the folder. When imported, all the settings of the existing skin are erased.
You can import only in already existing folders. If you need to import a new skin, pre-create a folder for it.
CSS, JS and pictures
You can manage your skin media files directly from the network interface. To do this, go to the appropriate button in the table. You can upload existing files by the "Upload" button. For skins and scripts, you can create a new file and work with it in the embedded editor by the "Edit" button.
Location of files inside the skin:
- Styles: folder -
css, path macro -{tpl:skincss} - Scripts: folder -
js, path macro -{tpl:skincss} - Pictures: folder -
img, path macro -{tpl:skinimg}
Templates
In the "Templates" section of your skin TPL files. If an active skin is added any TPL file, the system will automatically use it instead of the built-in. To add a system file to a template for making changes, find it in the list and click the "Add" button. You can download a template for learning over the link in its name or change it in the editor by the "Edit" button.
The most useful templates:
home- home page landing.login- login, registration and password recovery form.header- heading part of the site, including top and side menu.footer- bottom part of the site with copyright and JS-code.
These files are extremely rarely changing when the system is updated. When working with a skin, it is not recommended to change other files as they can change at any time without warning.
Macros
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. For example, the standard unit in AdminLte is called box, in Bootstrap 3 it is panel, in Boostrap 4 This is card.
Parameters
Parameters can be used to change skin behavior. For example, you can make several skins with the same content, but differ in the parameters. The parameters are set by the list of names and their values. Some skins use the visual option setting parameters.
Settings
This section configures the embedding of CSS and JS files to the skin.
- Name. Used for convenience in the list of skins.
- JS files. List of files from the JS section to embed to skin. Specify one file per line, without adding .js at the end. Files are always connected after the main JS files of the system.
- CSS files. List of files from the CSS section to embed to skin. Specify one file per line, without adding .css at the end. Files are connected after the main CSS files of the system.
- Early CSS. List of CSS files to embed before the main system files. Set same as "CSS files" above.
- Skip loading system style.css. This file contains the basic styles of AdminLTE and Bootstrap. Not required when working with your template on Bootstrap.
- Skip loading system layout.css. This file contains a description of the blocks specific for AlterCPA. It is recommended to include it when working with own Bootstrap-based styles.
- Skip loading system skin-xxx.css. This file is used to stylish AdminLTE. You can turn it off and instead connect your color scheme file created based on it.
- Skip loading system FontAwesome.css. The file contains a font with icons. It is not recommended to disable it without connecting a more fresh or paid version.
- Disable loading app.js by AdminLTE. The file is responsible for the work of AdminLTE, it is recommended to turn it off when working with unique styles.
- Disable loading bootstrap.js. The file is responsible for scripts for Bootstrap 3. Disconnect it if another framework is used.
- Disable loading jquery.js. The file is required by almost all components of the system. It is not recommended to disconnect it at all. It is better to find a way to coexist with it in peace and harmony.