Versions Compared

Version Old Version 5 New Version 6
Changes made by

MS (Unlicensed)

MS (Unlicensed)

Saved on

Key

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

...

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

Login CSS configuration
(basic/advanced)

Main login logo path

  • background-image

  • padding-bottom

Main login logoImage Modified

Main login background

  • background-image

  • background-color

Main login backgroundImage Modified

Left section background

  • background-image

  • background-color

  • color (text color)

Left section backgroundImage Modified

Cookies bar configuration
(advanced)

Bottom cookies bar

  • background-color

  • color (text color)

Bottom cookies barImage Modified

Bottom cookies ‘I understand’ button

  • background-color

  • color (text color)

Bottom cookies bar I understand buttonImage Modified

Bottom cookies ‘I understand’ button (hover)

  • background-color

  • color (text color)

Bottom cookies bar I understand button hoverImage Modified

Bottom cookies ‘policy’ buttons

  • background-color

  • color (text color)

Bottom cookies bar policy buttonsImage Modified

Bottom cookies ‘policy’ buttons (hover)

  • background-color

  • color (text color)

Bottom cookies bar policy buttons hoverImage Modified

Buttons, checkboxes and links CSS configuration
(advanced)

Main button

  • background-color

  • border-color

Main backgroundImage Modified

Main button (disabled)

  • background-color

  • border-color

Main button disabledImage Modified

Main button (hover)

  • background-color

  • border-color

Main button hoverImage Modified

Active button

  • background-color **

Active buttonImage Modified

Link button

  • color

Link buttonImage Modified

Checkbox

  • background-color

  • border-color

CheckboxImage Modified

Lists, pagination and grids CSS configuration
(advanced)

Pagination number color

  • color

Pagination number colorImage Modified

Main list selected item

  • background-color **

  • color

Main list selected itemImage Modified

Grid header

  • background-color

  • color

Grid headerImage Modified

Grid selected row

  • background-color

  • color

Grid selected rowImage Modified

Popup CSS configuration (advanced)

Popup header color

  • background-color

Popup header colorImage Modified

Popup left menu

  • background-color

  • color

Popup left menuImage Modified

Other elements CSS configuration
(advanced)

Selected tab underline color

  • border-color

Selected tab underline colorImage Modified

Scroll CHROME THUMB

  • background-color

  • border-radius

Scroll CHROME THUMBImage Modified

Scroll CHROME HOVER

  • background-color

Scroll CHROME HOVERImage Modified

Scroll Firefox - General style

  • background-color

Image 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 to your default theme to mark it as the default.

...

  1. For example, for a theme called “my_default_theme”.

    Code Block
    > theme/ ln -s my_default_theme default

    For example, for the empty theme.

    Code Block
    > theme/ ln -s empty default

Note that Tomcat does not allow access to symbolic links by default and you will need to enable the allowLinking property.
See https://tomcat.apache.org/tomcat-9.0-doc/config/resources.html

  • Or if you do not wish to use a symbolic link (e.g. for security reasons), in the theme folder, rename or copy the folder of the theme you would like to use as the default to create a "default" folder.

Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files.