...
Go to Users view
For the default theme, in the Enterprises list, select All
OR
For a reseller theme, select a Reseller enterpriseGo to Themes management
...
Create or modify a theme
The steps For details of how 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.
| 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
imgfolder on the Abiquo server or another web server and obtain the path to the image.
For example:theme/abicloudDefault/img/imageName.pngorhttps://url/img/imageName.png.
To create or modify a theme:
...
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 for login to the theme:
In Abiquo 6.1.3+, you will need the
Manage theme login configurationprivilegeDon’t include the protocol, only the domain/subdomain value (e.g:
www.abiquo.com,demo.abiquo.com,example.com/users/)You can define each 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
...
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
This section 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 ** (double asterisk), use the helper tool to set the recommended value.
...
Section (modes, login)
...
Element
...
UI element
...
Main CSS configuration
(basic/advanced)
...
Colors
Main color
Secondary color
...
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
Recommended size:
50 px x 50px
...
...
Login CSS configuration
(basic/advanced, login)
...
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, login)
...
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 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 configuration
(advanced)
...
Pagination number color
color
...
...
Main list selected item
background-color **
color
...
...
Grid header
background-color
color
...
...
Grid selected row
background-color
color
...
...
Popup CSS configuration (advanced)
...
Popup header color
background-color
...
...
Popup left menu
background-color
color
...
...
Other elements 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
...
Themes flowchart
This , see:
...
Themes flowchart
The theme management feature is a complete solution to customize themes. The following diagram gives a global view of how theme management works.
...