Versions Compared

Old Version 6

changes.mady.by.user MS

Saved on

compared with

New Version 7

changes.mady.by.user MS

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Go to Users → Themes management

    • To clone a theme, click the duplicate clone button.

    • To create a new theme, click the + add button

  2. Complete the dialog.

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

    2. Optionally, for a reseller theme, add domains/subdmomains subdomains that will use the theme

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

      • You can define a domain or subdomain for one reseller theme only

    3. Select if the theme will be Active

    4. Start editing 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).

...

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)

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

Enterprise logo

Login CSS configuration
(basic/advanced)

Main login logo path

  • background-image

  • padding-bottom

Main login logo

Main login background

  • background-image

  • background-color

Main login background

Left section background

  • background-image

  • background-color

  • color (text color)

Left section background

Cookies bar configuration
(advanced)

Bottom cookies bar

  • background-color

  • color (text color)

Bottom cookies bar

Bottom cookies ‘I understand’ button

  • background-color

  • color (text color)

Bottom cookies bar I understand button

Bottom cookies ‘I understand’ button (hover)

  • background-color

  • color (text color)

Bottom cookies bar I understand button hover

Bottom cookies ‘policy’ buttons

  • background-color

  • color (text color)

Bottom cookies bar policy buttons

Bottom cookies ‘policy’ buttons (hover)

  • background-color

  • color (text color)

Bottom cookies bar policy buttons hover

Buttons, checkboxes and links CSS configuration
(advanced)

Main button

  • background-color

  • border-color

Main background

Main button (disabled)

  • background-color

  • border-color

Main button disabled

Main button (hover)

  • background-color

  • border-color

Main button hover

Active button

  • background-color **

Active button

Link button

  • color

Link button

Checkbox

  • background-color

  • border-color

Checkbox

Lists, pagination and grids CSS configuration
(advanced)

Pagination number color

  • color

Pagination number color

Main list selected item

  • background-color **

  • color

Main list selected item

Grid header

  • background-color

  • color

Grid header

Grid selected row

  • background-color

  • color

Grid selected row

Popup CSS configuration (advanced)

Popup header color

  • background-color

Popup header color

Popup left menu

  • background-color

  • color

Popup left menu

Other elements CSS configuration
(advanced)

Selected tab underline color

  • border-color

Selected tab underline color

Scroll CHROME THUMB

  • background-color

  • border-radius

Scroll CHROME THUMB

Scroll CHROME HOVER

  • background-color

Scroll CHROME HOVER

Scroll Firefox - General style

  • background-color

Scroll Firefox - General styleImage RemovedScroll Firefox - General styleImage Added

...

Themes workflow and extra configuration

...

The feature allows you to configure limited CSS classes to make it easy to use. If you need an extra level of customization (rounded buttons, change login section position, etc….), you can use another physical CSS file to define these changes.

  1. Create your theme following the instructions for Abiquo CSS Branding in the Abiquo branding guide

  2. In the theme folder, create a symbolic link, named 'default', which points default to point to your default theme to mark it as the default. For example, for a theme called “mymy_default_theme”theme.

    Code Block
    > theme/ ln -s my_default_theme default

    For example, for the empty theme.

    Code Block
    > theme/ ln -s empty default

...