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

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.

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
   

   

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.

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