Frontend settings¶
Besides the backend settings, several frontend configuration options are available to customize your Fleio installation.
- How to edit constants.js files
- How to change the top logo
- How to change default language
- Change the page size
- Customize page title
- How to change instance create form display
- Root password related settings
- Show hide cloud-init user data
- Changing local compute storage setting
- Volume related setting
- Hide volume options for flavors with disk size
- How to change default display mode for items
- How to add custom menu items and categories
- How to set custom add credit URL
- How to set custom logout URL
- Changing text editor on tickets plugin, etc.
- White label
- Custom favicon
- Adding new custom themes
- New menu definition
- Adding custom headers in requests
- Add HTML head or body tags
- Include custom JavaScript/CSS code
How to edit constants.js files¶
There are two constants.js
files: one for end-user panel and a second one for staff panel.
Full file path on disk for end-user panel file is:
/var/webapps/fleio/frontend/site/constants/constants.js
Full file path on disk for staff panel file is:
/var/webapps/fleio/frontend/site/staff/constants/constants.js
How to change the top logo¶
AngualarJS frontend¶
As of 2020.05 release, the AngularJS frontend is still being used on end-user/staff. This is subject to change in the future releases.
You do not need to pay the white-label fee in order to remove the Fleio logo from the top-left corner of Fleio web application.
To change the top logo for the end-user and/or staff panel, see How to edit constants.js files.
Add the properties logo_light
and logo_dark
to the CONFIG
JavaScript object and set their value to the full
HTTP path of an image file.
The light logo will be used on dark backgrounds and the dark logo on bright background.
For example, here’s a how an end-user panel configuration would look like:
var user_config = {
api_url: 'http://localhost:8000/api',
language: 'en', // default language
base_url: '/',
home_url: '/',
// externalBilling: {
// enabled: true,
// addCreditUrl: 'http://...'
// },
logo_light: 'https://fleio.com/images/logo.png',
logo_dark: 'https://fleio.com/images/logo.png',
shutdown_instance_note: "NOTE: The instance will continue to be charged even if it's shutdown. Delete the instance if you want to no longer be charged.",
// toast_hide_delay: 3000, // bottom-left toast message animation delay in milliseconds
items_display_mode: 'cardview', //cardview || listview
enable_debug: false, // set to true in development to enable angular debug
flavors_as_cards: false, // used on instance creation for flavors selector layout
local_compute_storage_enabled: true, // used on instance create on boot source selection
};
Those options can also be found in the staff panel configurations file.
Angular frontend¶
As of 2020.05.0 release, Angular frontend is being used for Reseller panel and newstaff panel.
In order to change the logo you need to upload your logo in the following folders:
/var/webapps/fleio/frontend/reseller/assets/assets/img/reseller/
/var/webapps/fleio/frontend/staff/assets/img/staff/
The next step is to change the logoDark
and logoLight
in the following files:
/var/webapps/fleio/frontend/reseller/assets/config/reseller.config.json
and
/var/webapps/fleio/frontend/staff/assets/config/staff.config.json
You will have to replace null
with "REPLACE_ME_WITH_THE_CORRECT_FILENAME.png"
How to change default language¶
In order to change the default language you must edit the language
field in constants.js file:
var user_config = {
language: 'en', // default language
};
If you added custom strings for Fleio, by following the guide available at How to customize Fleio strings, you will have to change ‘en’ with your chosen language (in our example it was ‘en_us’).
Also, if you want to change the default language to all your existing clients you will have run an update query directly on the database, or impersonate each user and change the language.
Change the page size¶
Fleio uses infinite scroll to display objects list. By default, 20 objects are loaded at once and you can change this default value for end-user or staff user constants.js files.
var user_config = {
// ...
paginate_by: '20'
// ...
}
Customize page title¶
The browser’s page title (that is the HTML <title>
tag) default format is:
var user_config = {
// ...
base_title: '@ - Fleio'
// ...
}
Where the @
character is replaced depending on the current page, resulting a title like “Home - Fleio” or
“Instanced - Fleio”.
You can redefine the title format in constants.js files.
How to change instance create form display¶
Instance create form display can be changed using the flavors_as_cards
property from the constants.js
file.
When set to false, the instance create form will look like this:

When the setting is set to true, the flavors will be displayed as cards. Their description will appear in each card’s body:

Show hide cloud-init user data¶
You can toggle cloud-init use data field from the create instance form via constants.js files:
var user_config = {
// ...
show_userdata_on_new_instance_form: true,
// ...
}
Changing local compute storage setting¶
If you set local_compute_storage_enabled
property from the constants.js
file to false
, local compute storage
option when selecting boot source on instance creation will not be available anymore.
By default it is set to true
in constants.js files:
var user_config = {
// ...
local_compute_storage_enabled: true,
// ...
}
Hide volume options for flavors with disk size¶
If you want to hide the volume options when deploying an instance with a flavor that has disk space configured you will
have to set hideVolumeSelectionForFlavorsWithDisk
to True in /var/webapps/fleio/frontend/staff/assets/config/staff.config.json
.
{
// ...
"hideVolumeSelectionForFlavorsWithDisk": false,
// ...
}
This setting defaults to False.
How to change default display mode for items¶
Change the items_display_mode
property from the same constants.js
files as stated above to either cardview
to display the items as cards or listview
to display them like a list.
Note that the user will still be able to change the display mode for a page using the button from the top-right side of
the page content.
How to set custom add credit URL¶
The Add credit button from the end-user’s dashboard can be customized to any link. You can for instance set an external link, if you are using another system (like WHMCS) to handle invoicing and credit card payments.

More on that on settings.py ADD_CREDIT_URLS setting documentation.
The Billing panel that shows client’s credit and the Add credit button can be hidden completely through an end-user feature toggle.
How to set custom logout URL¶
By default your customers will be redirected to the login page when they log out. If you want to set a custom URL you will need to edit two variables, one for each type of frontend.
For AngularJS frontend you need to edit logout_redirect variable available in the following locations:
/var/webapps/fleio/frontend/site/constants/constants.js (end user)
/var/webapps/fleio/frontend/site/staff/constants.js (staff)
For Angular frontend you need to edit the logoutRedirect variable available in:
/var/webapps/fleio/frontend/staff/assets/config/staff.config.json (staff)
/var/webapps/fleio/frontend/reseller/assets/config/reseller.config.json (reseller)
Changing text editor on tickets plugin, etc.¶
The rich text editor found on tickets plugin, notification templates edit page, etc. can be customized in the
constants.js
file. All you need to do is to add a new property called tiny_mce_options
and define a dictionary
with the settings. The example below is the default one, you can find more settings reading the tinymce documentation.
tiny_mce_options: {
relative_urls: false,
inline: false,
plugins : 'link code image lists autolink',
toolbar: ["undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | link code image | bullist numlist | removeformat"],
skin: 'lightgray',
theme : 'modern',
menubar: ''
},
White label¶
If you want to remove the small Fleio link that appears at the bottom of the login screen and at the bottom of the left menu, you have to purchase the white-label option.
Changing the top logo is a simple setting and does not require you to pay the white-label fee.
Adding new custom themes¶
You can add your own custom themes and change the list of themes that a user can choose from on his profile page. In
order to do so, add in constants.js files (staff/end-user) your theme definition in the
customThemesCallback
function.
This may look something like this:
{
// ... other settings
customThemesCallback: function(mdThemingProvider) {
mdThemingProvider.definePalette('testAccent', {
'50': '#FF6633',
'100': '#BBBBBB',
'200': '#FFFFFF',
'300': '#FFFFFF',
'400': '#FFFFFF',
'500': '#FFFFFF',
'600': '#FFFFFF',
'700': '#FFFFFF',
'800': '#FFFFFF',
'900': '#FFFFFF',
'A100': '#FF3919',
'A200': '#FF3919',
'A400': '#FF3919',
'A700': '#FF3919',
'contrastDefaultColor': 'light'
});
mdThemingProvider.definePalette('testPrimary', {
'50': '#083652',
'100': '#083652',
'200': '#083652',
'300': '#083652',
'400': '#083652',
'500': '#083652',
'600': '#083652',
'700': '#083652',
'800': '#083652',
'900': '#083652',
'A100': '#083652',
'A200': '#083652',
'A400': '#FFFFFF',
'A700': '#C0CADD',
'contrastDefaultColor': 'light'
});
var testBackground = mdThemingProvider.extendPalette('flLightBackGround' , {
'600': '#083652'
});
mdThemingProvider.definePalette('testBackground', testBackground);
mdThemingProvider.theme('Test')
.backgroundPalette('testBackground')
.primaryPalette('testPrimary')
.accentPalette('testAccent');
},
}
The above is actually a replication of the existing “Dusk” theme. You can name it and add whatever colors you want,
you may find more info on
AngularJS Material documentation.
Once you’ve defined your new theme, you can change the default user theme and the list of themes that appear in the
profile page by changing the other two settings: default_theme
and registeredThemes
. Fleio’s default theme is
‘Spring’ and themes registered by default are: ‘Spring’, ‘Navy’, ‘Dusk’.
This is how your new settings may look like:
{
// ... other settings
registeredThemes: ['Spring', 'Custom',],
default_theme: 'Custom',
}
For defining and adding new themes in the frontend panels using Angular framework, read more here: Angular frontend customization.
Adding custom headers in requests¶
You can manipulate headers sent from frontend requests using a settings in constants.js (both staff and end-user). Use
the callback interceptorConfig
in order to change headers like so:
{
// ... other settings
interceptorConfig: function(config, cookies) {
// e.g. config.headers['header_name'] = 'header-value';
return config;
},
}
Remember to always return the config that was passed as a parameter to the function. You may also use cookies
which is the angularjs cookies service (just named without the dollar sign).
Note: to do the same thing but for the panels that make use of Angular framework, read more here: Angular frontend customization.