Create a reseller theme

Introduction to reseller themes

You can create a reseller theme for a reseller enterprise, to use for all customers in the reseller’s hierarchy. The platform will display the reseller theme when it is active, instead of the default theme. You can create multiple themes but you can only set one active theme per reseller.

You can manage themes for reseller domains and subdomains. In Abiquo 6.1.3+, the administrator can create a list of prohibited domains using an Abiquo configuration property on the API Server. This lets you prevent users from accidentally creating a reseller theme that will apply to the main platform domain!

In Abiquo 6.1.3+, the cloud admin 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 privilege to Manage theme login configuration enables users to manage Domains, Login CSS configuration, and Cookies bar configuration.

Edit a theme without access to login configuration
Edit a theme without access to login configuration

Create a reseller theme for a reseller hierarchy

Before you begin:

  1. Prepare your images as described in the table below. For more details, see Sample theme image reference

  2. 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 or https://url/img/imageName.png.

Privileges: Manage default themes or Manage reseller themes, Manage theme login configuration

To create or modify a reseller theme:

  1. Go to Users view

  2. In the Enterprises list, select a reseller enterprise

  3. Go to Themes management

    Reseller themes management view
    Reseller themes management view
  4. Click a button to clone or add a theme, or select an existing theme and edit it.

  5. Enter the Name of the theme. The name must be unique

  6. Optionally, for Domains, enter domains/subdomains that will use the theme.

    1. In Abiquo 6.1.3+, you will need the Manage theme login configuration privilege

    2. Don’t include the protocol, only the domain/subdomain value (e.g: www.abiquo.com, demo.abiquo.com, example.com/users/)

    3. You can enter a domain/subdomain value in one reseller theme only

    4. The administrator can prohibit the use of a list of domains with an Abiquo configuration property

  7. To use this theme in the UI, select Active theme

  8. 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).

  9. To check the theme, click Test theme, then after you have checked it, click Stop testing theme

  10. To update the theme, click Save

Changes to the reseller theme will display after the user refreshes their browser window.


Theme elements and CSS

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

Login configuration

  • In Abiquo 6.1.3+, to edit login configuration (Login CSS configuration and Cookies bar configuration), the user must have the privilege to Manage theme login configuration.

  • For a reseller theme, the login configuration applies to the specified Domains only

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

For improved theme rendering, for certain color values, you must use a tint value of the main color. For these color values, which are marked with ** (double asterisk), use the helper tool to set the recommended value.

Section (modes, privileges)

Element

UI element

Section (modes, privileges)

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

 

 

 

Copyright © 2006-2024, Abiquo Holdings SL. All rights reserved