Introduction to themes management
Abiquo’s platform is designed to manage enterprises and resellers. Until now, the branding management was pretty complicated, requirering developpers intervention and physical files (and configuration) to display custom themes.With this feature, the management will be easier and will not require external intervention. Excepting some minor details, the customization will be handled throught the UI.
The feature is focused on reseller needed, making the branding configuration easier for all reseller children. Additionally, the feature integrates domain/subdomains management.
Display themes management view
Privileges: Manage default themes or Manage reseller themes
To display themes management view, go to Users → Themes management. You will have to types of themes:
Default theme
Default theme is used to set a default theme that will be always loaded if no others themes (reseller) are active.
To display default themes management view, user must have Manage default themes privilege and select All enterprises option then Themes management tab.
Reseller themes
Reseller themes are used for resellers, to define an active theme for him ans for its children. The theme can also be set for domains and subdomains.
To display reseller themes management view, user must have Manage reseller themes privilege and select a reseller enterprise then Themes management tab.
Create or modify a theme
The creation of a default theme and a reseller theme is almost similar, the diference is realted with domains/subdomains.
Privileges: Manage default themes or Manage reseller themes
To create or modify a role:
Go to Users → Themes management
To clone a theme, click the duplicate clone button.
To create a new theme, click the + add button
Complete the dialog.
Enter the Name of the role. The names of themes must be unique
(Only for reseller theme), you can add domains/subdmomains which will apply the theme
don’t include protocol, only the domain/subdomain value (ex: https://www.abiquo.com, https://demo.abiquo.com/, https://example.com/users/)
a specific domain/subdomain can only be defined in one reseller theme.
Select if the theme will be active. You can define many themes, but only one will be active (only one default theme, and only one theme per reseller)
Start editing css configuration. We can do it with two differents mode: basic (by default) and advanced mode. The difference is the level of customization details (see next section for more details).
Theme css sections and elements configuration
This section will detail all the sections and elements that you can configure creating/editing a theme.
Section (modes) | Element | Ui element |
|---|---|---|
Main css configuration (basic/advanced) | Colors
| These two colors will be used to set different elements css classes. In basic mode, colors will be assigned automatically. In advanced mode, user clicks each Apply button to assign colors. |
Enterprise logo
|  | |
Login css configuration (basic/advanced) | Main login logo path
|  |
Main login background
|  | |
Left section background
|  | |
Cookies bar configuration (advanced) | 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 (advanced) | Main button
|  |
Main button (disabled)
|  | |
Main button (hover)
| | |
Active button
|  | |
Link button
|  | |
Checkbox
|  | |
Lists, pagination and grids css configuration (advanced) | Pagination number color
|  |
Main list selected item
|  | |
Grid header
|  | |
Grid selected row
|  | |
Popups css configuration (advanced) | Popup header color
|  |
Popup left menu
|  | |
Other elements css configuration (advanced) | Selected tab underline color
|  |
Scroll CHROME THUMB
|  | |
Scroll CHROME HOVER
| | |
Scroll Firefox - General style
| |
* if you don’t want to use an image, or want to remove the default one, use the none value
** to improve the theme rendering, some values must be used as a tinted value of main color. Use the helping tool to use the recommended value.
Themes workflow and extra configuration
This feature is a complete solution to customize themes. To have a global view of how it’s working, we detail the workflow.
Customize preloader
The preloader cannot be customize through this new UI feature because it’s the first element loaded (at this point, the API communication is not ready).
But you can customize the preloader by physically modifying the css file.
"open ui_path/lib/pace/loading-bar.css"
:root {
--main-color: #4B0F1E; //Change this value with required 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 to configure a limited css class to maintain it easy to use. If you need an extra level of customization (rounded buttons, change login section position, etc….), you can use another physical css file to defined these changes.
In the theme folder, create a symbolic link, named 'default', which points to your default theme to mark it as the default.
For example, for a theme called “my_default_theme”.> theme/ ln -s my_default_theme default
For example, for the empty theme.
> theme/ ln -s empty default
Note that Tomcat does not allow access to symbolic links by default and you will need to enable the allowLinking property.
See https://tomcat.apache.org/tomcat-9.0-doc/config/resources.htmlOr if you do not wish to use a symbolic link (e.g. for security reasons), in the theme folder, rename or copy the folder of the theme you would like to use as the default to create a "default" folder.
Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files.