Page Comparison

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.

...

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.

...

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

      Image RemovedImage Added

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 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	Image Modified
Login CSS configuration (basic/advanced, login)	Main login logo path background-image padding-bottom	Image Modified
	Main login background background-image background-color	Image Modified
	Left section background background-image background-color color (text color)	Image Modified
Cookies bar configuration (advanced, login)	Bottom cookies bar background-color color (text color)	Image Modified
	Bottom cookies ‘I understand’ button background-color color (text color)	Image Modified
	Bottom cookies ‘I understand’ button (hover) background-color color (text color)	Image Modified
	Bottom cookies ‘policy’ buttons background-color color (text color)	Image Modified
	Bottom cookies ‘policy’ buttons (hover) background-color color (text color)	Image Modified
Buttons, checkboxes and links CSS configuration (advanced)	Main button background-color border-color	Image Modified
	Main button (disabled) background-color border-color	Image Modified
	Main button (hover) background-color border-color	Image Modified
	Active button background-color **	Image Modified
	Link button color	Image Modified
	Checkbox background-color border-color	Image Modified
Lists, pagination and grids CSS configuration (advanced)	Pagination number color color	Image Modified
	Main list selected item background-color ** color	Image Modified
	Grid header background-color color	Image Modified
	Grid selected row background-color color	Image Modified
Popup CSS configuration (advanced)	Popup header color background-color	Image Modified
	Popup left menu background-color color	Image Modified
Other elements CSS configuration (advanced)	Selected tab underline color border-color	Image Modified
	Scroll CHROME THUMB background-color border-radius	Image Modified
	Scroll CHROME HOVER background-color	Image Modified
	Scroll Firefox - General style background-color	Image Modified
Labels	Custom Support Popup Text	Image Added
	Customized "Powered By" Messages	Image Added
	Theme-Specific Logo and URL Settings	Image Added
Configuration	Custom Logout Redirection	Image Added