Versions Compared

Version Old Version 2 New Version 3
Changes made by

Xavier Thevenot (Unlicensed)

MS (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Introduction to themes management

...

nameIntroduction 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 Abiquo platform can manage enterprise tenants directly, or with a reseller hierarchy. Abiquo supports branding of the UI for enterprises, 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 new theme management feature, you can easily manage themes directly in the Abiquo UI, except for a few minor details.

This feature focuses on making branding configuration easier for resellers, and it includes the management of themes for reseller domain and subdomains.

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 you create with the theme management feature will load with priority over the themes you create with Abiquo CSS branding.

...

Display themes management view

Panel
bgColor#FFFAE6

Privileges: Manage default themes or Manage reseller themes

To display themes Themes management view, go to Users → Themes management. You will have to

There are two types of themes: the default theme and reseller themes.

Default theme

The Default theme is used to set a default theme that will be always loaded load if no others themes (resellerfor resellers) are active.

Panel
bgColor#FFFAE6

Privileges: Manage default themes

To display default themes management view, user must have Manage default themes privilege and select All enterprises option then Themes management tab.

...

Default themes:

  1. Go to Users view

  2. In the Enterprises list, select All

  3. Go to Themes management

...

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 and their customer enterprises. The platform will display the reseller theme when it is active. You can also set a reseller theme for domains and subdomains.

Panel
bgColor#FFFAE6

Privileges: Manage reseller themes

To display reseller themes management view:

  1. Go to Users view

...

  2. In the Enterprises list, select a reseller enterprise

...

  2. Go to Themes management

...

...

Create or modify a theme

...

modify a theme

The

...

steps to create a default theme and a reseller theme

...

are very similar, 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.

Panel
bgColor#FFFAE6

Privileges: Manage default themes or Manage reseller themes

To create or modify a

...

theme:

  1. Go to Users → Themes management

    • To clone a theme, click the duplicate clone button.

    • To create a new theme, click the + add button

  2. Complete the dialog.

    1. Enter the Name of the

...

    1. theme. The

...

    1. name must be unique

...

    1. Optionally, for a reseller theme

...

    1. ,

...

    1. add domains/subdmomains

...

    1. that will

...

    1. use the theme

...

      • Don’t include the protocol, only the domain/subdomain value (

...

      • e.g: www.abiquo.com,

...

      • demo.abiquo.com

...

      • ,

...

      • example.com/users/)

      • You can define a

...

      • domain

...

      • or subdomain for one reseller theme

...

      • only

    2. Select if the theme will be

...

    1. Active

    2. Start editing

...

    1. CSS configuration.

...

    1. You can edit in basic mode (by default)

...

    1. or advanced mode.

...

    1. If you use advanced mode, you can customize more theme details (see next section

...

    1. ).

...

Theme

...

CSS sections and

...

element configuration

This section will detail describes all the sections and elements that you can configure when creating /or editing a theme.

For some images, you can set a value of none to use no image or remove the default image.

For improved theme rendering, some values must be a tint value of the main color. For color values marked with “**”, use the helper tool to set the recommended value.

Section (modes)

Element

Ui UI element

Main css CSS configuration
(basic/advanced)

Colors

  • main Main color

  • secondary Secondary color

These two colors will be used to set different elements css in CSS classes.

In basic mode, colors will be assigned automatically.

In advanced mode, user clicks each the Apply button buttons to assign colors.

Enterprise logo

  • recommended Recommended size *: 50x50px
    50 px x 50px

Login css CSS configuration
(basic/advanced)

Main login logo path

  • background-image *

  • padding-bottom

Main login background

  • background-image *

  • background-color

Left section background

  • background-image *

  • background-color

  • color (text color)

Cookies bar configuration
(advanced)

Bottom cookies bar

  • background-color

  • color (text color)

Bottom cookies ‘I understand’ button

  • background-color

  • color (text color)

Bottom cookies ‘I understand’ button (hover)

  • background-color

  • color (text color)

Bottom cookies ‘policy’ buttons

  • background-color

  • color (text color)

Bottom cookies ‘policy’ buttons (hover)

  • background-color

  • color (text color)

Buttons, checkboxes and links css CSS configuration
(advanced)

Main button

  • background-color

  • border-color

Main button (disabled)

  • background-color

  • border-color

Main button (hover)

  • background-color

  • border-color

Active button

  • background-color **

Link button

  • color

Checkbox

  • background-color

  • border-color

Lists, pagination and grids css CSS configuration
(advanced)

Pagination number color

  • color

Main list selected item

  • background-color **

  • color

Grid header

  • background-color

  • color

Grid selected row

  • background-color

  • color

Popups css Popup CSS configuration (advanced)

Popup header color

  • background-color

Popup left menu

  • background-color

  • color

Other elements css CSS configuration
(advanced)

Selected tab underline color

  • border-color

Scroll CHROME THUMB

  • background-color

  • border-radius

Scroll CHROME HOVER

  • background-color

Scroll Firefox - General style

  • background-color

...

** 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

...

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 customize the preloader

...

for your whole platform with CSS.

To customize the preloader, modify the CSS file.

Code Block
languagecss
"open ui_path/lib/pace/loading-bar.css"
:root {
  --main-color: #4B0F1E; //
Change
Replace this value with
required
your value
}

Extra configuration

Note

Adding this extra level of customization is at your own risk if the

css

CSS file is not well formatted or if the definitions are not correct

The feature allows you to configure

...

limited

...

CSS classes to

...

make 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

...

define 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”.

    Code Block
    > theme/ ln -s my_default_theme default

    For example, for the empty theme.

    Code Block
    > 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.html

  • Or 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.