Skip to content

Configuring and customizing the system

Jump to bottom
Jakub Man edited this page Jun 28, 2018 · 16 revisions

Configuring and custmizing the system

Table of Contents

  1. Introduction
  2. Configuration File
  3. Configuration File Contents
    1. Name and Logo
    2. Assets
    3. Color Theme
    4. API
  4. Toggling Modules
  5. Summary

Introduction

Aside from configuring a single module so it can be bootstrapped and used from within the GUI, you can also configure the GUI as a whole. You can set it up with a custom name (something else than a Liberouter GUI), different logo, custom asset locations, custom color layout or even toggle installed modules.

Configuration File

The configuration file actually used by the GUI is located in frontend/src/assets/config.json. Do not edit this file, unless you want to toggle modules (see Toggling Modules). This file is generated during the bootstrapping procedure and is created based on the data present in the modules/app.config.json, that you can edit. Some extra data are added during the bootstrap, namely means for toggling the modules.

Configuration File Contents

Name and Logo

There are mandatory keys that in the app.config.json. Logo should be a path to the image, relative to src directory or a directory where you store assets. Name is any string.

Authorization

By default, users are authorized by their login and password. However, it is not necessary in some environments where the user is always trusted (e.g. because of the access allowed only from private or specific networks). For these cases, variable authorization with the false value can be defined in app.config.json (not recommended).

Assets

This allows you to include your own asset locations to the mix. These locations will be symlinked to frontend/src/assets. This key is optional.

Color Theme

Allows you to define your own color palette for the GUI. It is a optional key. Inspect default app.config.json for a hint of what can be changed. Values should be strings representing a color in any CSS valid color, including gradients (gradients are an experimental feature, see Themes for more info). You can use these colors in your SCSS files using variables with the same name as in the config file, eg. $colorMain would give you the color set in config as colorMain. You have to use @import "colors" in your SCSS file if you want to use these variables. Symlink to _colors.scss is created in your module during bootstraping.

Currently, these colors can be changed:

  • colorMain - Main color of the whole system. Used as menu background color, color of buttons, login form background and other parts of system. You can see this color on most pages.
  • colorHighlight - Used mostly as color, when user is hovering over an element, that can be clicked on, eg. buttons, links and menu items.
  • colorSelected - Used on clickable elements, when a mouse button is pressed on them.
  • colorSelected2 - Used as an alternative color on mouse button press, when two different colors are needed.
  • colorBackground - Background color of the whole system.
  • colorItemBackground - Background color of elements like login forms, cards etc.
  • colorText - Color of most text elements
  • colorTextInverse - Color of text elements, that are on darker backgrounds.
  • colorLink - Color of links.
  • colorLinkHover - Color of links on hover.
  • colorHeadnig - Color of heading elements (h1-h4, h5 and h6 are in colorText)

You can also checkout our premade themes.

Please note that some modules might not use these colors and set their own styles instead.

API

Mandatory key. It allows you to remap backend to different url, different port forwarding rules and proxies.

Toggling Modules

After you install all of desired modules to the modules folder and bootstrap them, frontend/src/assets/config.json is created. Apart from the data defined in your modules/app.config.json, there is an extra key modules. Each module is identified by its name defined in its own config.json and has a property enabled. You can set it either to true or false. Setting value to false will hide the module from the GUI (it is still reachable, though).

Summary

You can manually change any value in the frontend/src/assets/config.json when the GUI is deployed (it will be in a different location for production mode) and when you refresh the page with GUI in your browser, these changes will apply immediately. You can freely change the color scheme or module selection without the need to rebuild whole application.

Clone this wiki locally