...
The Abiquo platform can manage enterprise tenants directly, or with a reseller hierarchy. Abiquo supports branding of the UI for all enterprises with a default theme, and for resellers and their customers.
In previous versions, for custom themes, developers created the branding files, then administrators loaded them and configured the UI to display them. With the this new theme management feature, you can easily manage themes directly in the Abiquo UI, except for a few minor details.
...
The Abiquo branding feature with CSS files is still available and you can use it as before to create advanced customizations using CSS. The themes styles you create with the theme management feature will load with priority over the themes styles you create with Abiquo CSS branding. See Themes flowchart and Extra configuration below.
...
Display themes management view
...
...
Privileges: Manage default themes or Manage reseller themes
To display Themes management view, go to Users → Themes management.
There are two types of themes: the default theme and reseller themes.
...
The Default themewill load if no others themes (for resellers) are active.
...
Panel | ||
---|---|---|
| ||
Privileges: Manage default themes |
To display Default themes:
Go to Users view
In the Enterprises list, select All
Go to Themes management
...
Reseller themes are for resellers and their customer enterprises. The platform will
...
load the reseller theme when it is active. You can also set a reseller theme for domains and subdomains.
Panel | ||
---|---|---|
| ||
Privileges: Manage default themes or Manage reseller themes |
To display reseller themes management view:
Go to Users view
In For the default theme, in the Enterprises list, select All
OR
For a reseller theme, select a Reseller enterpriseGo to Themes management
...
The steps to create a default theme and a reseller theme are very similar, but . But for a reseller you can also configure domains and subdomains. You can create multiple themes of each type, but you can set one default theme as active and one theme per reseller only.
Info |
---|
In Abiquo 6.1.3+, you can create a theme for a reseller and configure the domain and login information. Then you can allow the reseller admin to modify the other configuration only. In Abiquo 6.1.3+, the new privilege to |
Panel | ||
---|---|---|
| ||
Privileges: Manage default themes or Manage reseller themes, Manage theme login configuration |
Before you begin:
Prepare your images.
Add your images to a theme
img
folder on the Abiquo server or another web server and obtain the path to the image.
For example:theme/abicloudDefault/img/imageName.png
orhttps://url/img/imageName.png
.
...
Go to Users → Themes management
To clone a theme, click the duplicate clone button.
To create a new theme, click the + add button
for All enterprisesor a reseller enterprise
Click a button to clone or add a theme, or select an existing theme and edit it.
Complete the dialog.
Enter the Name of the theme. The name must be unique
Optionally, for a reseller theme, for Domains, add domains/subdomains
that will use the themefor login to the theme:
In Abiquo 6.1.3+, you will need the
Manage theme login configuration
privilegeDon’t include the protocol, only the domain/subdomain value (e.g:
www.abiquo.com
,demo.abiquo.com
,example.com/users/
)You can define
aeach domain or subdomain for one reseller theme only
The administrator can can prohibit the use of a list of domains with an Abiquo Configuration property on the API server
Select if the theme will be Active
- Start editing
To use this theme in the UI, select Active theme
Edit CSS configuration.
You can edit in basic mode (by default) or advanced mode. If you use advanced mode, you can customize more theme details (see next section).To check the theme, click Test theme, then Stop testing theme
To update the theme, click Save
Changes to the theme will display after the user refreshes their browser window.
...
Theme CSS sections and element configuration
...
For improved theme rendering, some values must be a tint value of the main color. For color values marked with **
(double asterisk), use the helper tool to set the recommended value.
Section (modes, login) | Element | UI element |
---|---|---|
Main CSS configuration | Colors
| These two colors will be used to set different elements in CSS classes. In basic mode, colors will be assigned automatically. In advanced mode, user clicks the Apply buttons to assign colors. |
Enterprise logo
| ||
Login CSS configuration | Main login logo path
| |
Main login background
| ||
Left section background
| ||
Cookies bar configuration | Bottom cookies bar
| |
Bottom cookies ‘I understand’ button
| ||
Bottom cookies ‘I understand’ button (hover)
| ||
Bottom cookies ‘policy’ buttons
| ||
Bottom cookies ‘policy’ buttons (hover)
| ||
Buttons, checkboxes and links CSS configuration | Main button
| |
Main button (disabled)
| ||
Main button (hover)
| ||
Active button
| ||
Link button
| ||
Checkbox
| ||
Lists, pagination and grids CSS configuration | Pagination number color
| |
Main list selected item
| ||
Grid header
| ||
Grid selected row
| ||
Popup CSS configuration (advanced) | Popup header color
| |
Popup left menu
| ||
Other elements CSS configuration | Selected tab underline color
| |
Scroll CHROME THUMB
| ||
Scroll CHROME HOVER
| ||
Scroll Firefox - General style
|
...
Themes
...
flowchart
This feature is a complete solution to customize themes. The following workflow diagram gives a global view of how theme management works.
...
...
Customize the preloader
As the UI loads, the platform will display progress on a loading bar with the preloader.
You cannot customize the preloader with this new UI feature because it’s the first element loaded before API communication is ready. But, you can as part of a UI theme because it loads before the API can send the theme.
To customize the preloader for your whole platform with , use CSS.To customize
Modify the preloader , modify the CSS file, for example, as shown here.
Code Block | ||
---|---|---|
| ||
"open ui_path/lib/pace/loading-bar.css" :root { --main-color: #4B0F1E; //Replace this value with your value } |
...
Extra configuration
...
...
Adding this extra level of customization is at your own risk if the CSS file is not well formatted or if the definitions are not correct
The feature allows you to The theme management feature lets you configure limited CSS classes to make only so it is easy to use. If you need an extra level of customization (rounded buttons, change login section position, etc….), you can use another CSS file to define these changes.
Note |
---|
Adding this extra level of customization is at your own risk if the CSS file is not well formatted or if the definitions are not correct |
To create extra configuration:
Create your theme following the instructions for Abiquo CSS Branding in the Abiquo branding guide
In the theme folder, create a symbolic link, named
default
to point to your default theme to mark it as the default. For example, for a theme calledmy_default_theme
.Code Block > theme/ ln -s my_default_theme default
For example, for the empty theme.
Code Block > theme/ ln -s empty default
...