Design basics

After installing AlterCPA, you need to complete the most important setting — choose the color scheme for the system. You have several options for working with the appearance of your network.

  1. Change the color scheme and enter the network name. The easiest option, suitable for use inside affiliate teams and other closed projects.
  2. Select an existing design option. Several design options come bundled with the system. You can slightly adjust the color scheme in them and put them to use.
  3. Change an existing style into something of your own. You have full access to templates and files inside the “Skins” tool. You can make any changes to the appearance of your network.

As practice has shown, the best network design option includes choosing the desired color scheme and adding your own beautiful landing page on the home page.

Choosing the color scheme

The basic settings of the appearance of your system are in the “Control — Settings — Appearance” section. Color scheme settings can be used by both the standard and additional skins of the system. It is recommended to specify them:

  • Menu color — responsible for the main system menu style and navigation sidebar. Rarely used by additional styles.
  • Button color — responsible for the color of the main action buttons on the site. It does not affect the color of secondary buttons. Used by all styles.
  • Block color — responsible for the color of the widgets with data, for example, on the main page. Used by almost all styles.

It is not recommended to change the additional color and style parameters responsible for loading or disabling style files. It is better to configure these settings inside the corresponding style.

Standard skins

You can activate support for skins. To do this, go to the “Control — Settings — Skins” section and click the activation button. Standard system design skins are loaded.

  • Brilliant — one of the first admin templates based on Bootstrap 3, kept here for nostalgia and as a sample of building a skin.
  • Bootstrap 3 — an absolute design classic. The “Parameters” button lets you choose from 17 different design styles. Some of them are quite nice.
  • DiffDash — a beautiful light theme, much loved by our customers.
  • Classic dark theme — the classic dark design theme.
  • Classic top navigation — the classic theme with a horizontal menu.
  • Classic dark theme with top navigation — the classic dark-themed design with a horizontal menu.

To activate a skin, click the “Select” button in the “Active” column. To configure its display settings, use the “Parameters” button (relevant for Bootstrap). Do not make changes to existing styles — they will be erased on the next update!

Creating your own skin

A new skin is created using a form above the table. As a name, it is best to specify the name of the folder in which the skin will be placed. A nicer display name can be specified later in the settings.

You have access to editing template files, adding your own CSS and JS files, uploading images, and working with macros and parameters. All these actions are described in the “Design” section of our knowledge base.

Lifehack! To take any of the existing skins as the basis of your own, act like this:

  1. Create a new skin.
  2. Click “Export” on the system skin you like.
  3. Click “Import” above the skin table.
  4. In the “Folder” field, select the skin you created; in the “File” field, select the downloaded export file.
  5. Click “Import” to upload the skin.
  6. Find the uploaded skin. Its name will be from step 2, and its folder from step 3.
  7. Click “Settings” for the selected skin and give it back the old name, which was erased during import.
  8. Change the skin as you wish.