Create a default theme

Introduction to the default theme

Abiquo supports branding of the UI for all enterprises with a default theme. The Default theme will load if no others themes (reseller themes) are active.

The themes management feature lets you create basic and advanced styling, but you can create additional customizations by modifying CSS files. The CSS files will have lower priority than the themes. For more details, see Themes flowchart and Extra configuration at https://abiquo.atlassian.net/wiki/spaces/doc/pages/360939624.

Create a default theme for the platform

You can create multiple default themes, but you can only set one theme as active to display it.

Before you begin:

1. Prepare your images. For more details, see below and https://abiquo.atlassian.net/wiki/spaces/doc/pages/311374740

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

1. Go to Users → Themes management

2. In the Enterprises list, select All

3. Click a button to clone or add a theme, or select an existing theme and edit it.

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

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

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

7. To check the theme, click Test theme, then Stop testing theme

8. To update the theme, click Save

Changes to the 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, some values must be 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, login)	Element	UI element

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	Open
Login CSS configuration (basic/advanced, login)	Main login logo path background-image padding-bottom	Open
	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