Versions Compared

Key

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

...

This section describes the UI images that are supplied with the Sample ThemeThese images fit into the default styling and design of the user interface and can be used You can use these images as a guide for the approximate dimensions of your images.

In Abiquo branding you can also add your own images and restyle them as required.

Note
titleCustomization Precedence

Customizations of the colors or images in the enterprise console themes will override customizations in the login theme.

...

The logo.png file is the default enterprise logo.

  • We recommend a transparent background so that the background shading underneath the logo will be visible
  • High resolution logos (with higher ppi) may download slowly to the browser and display slowly to the user
  • The abiquo_gray.png file is the default enterprise logo in the sample theme

...

The abiquo_gray.png file is used as the default enterprise logo.

Dimensions: 132 150 x 33 150 pixels

Image RemovedImage Added

abiquo

...

The abiquo_login.png file is displayed in displays on the login dialog

Dimensions: 223 156 x 5342 pixels

Image Removed

abiquo_watermark

The abiquo_watermarkImage Added

login-panel-bg

The login-panel-bg.png file is displayed in the background of the login screen.

Dimensions: 677 360 x 577 360 pixels

Image RemovedImage Added

favicon

The favico.ico file contains a small Abiquo logo in Microsoft icon format. By default the favicon is shown in the browser tab where Abiquo is running

Dimensions: 16 x 16 pixels

Image RemovedImage Added

The image shown here is a png version. To obtain the favico.ico version, click on the following link

favicon.ico

mainmenu-buttons

The main menu buttons are individual icons of 30x30 pixels, loaded by the customer in the CSS file.

Individual icons
Home icon

Image Removed

Infrastructure icon

The infrastructure icon is the solid fa-server icon from fontawesome.

Virtual datacenters icon

The virtual datacenters icon is the solid fa-cloud icon from fontawesome.

Apps library icon

Image Removed

Users icon

The users icon is the solid fa-users icon from fontawesome.

Pricing icon

Image Removed

Events icon

...

Control icon

The control icon is the solid fa-heartbeat icon from fontawesome.

Configuration icon

Image Removed

Reports icon

Image Removed

Documentation icon

The documentation icon is the fa-book icon from fontawesome.

External URLs icon

...

Icon sheet

If you have a custom icon sheet as in previous versions of Abiquo, you will need to create custom Abiquo loads the main menu icons from an icon sheet.

Dimensions of icon sheet: 216 x 2300

You can create CSS to reference the icons on this an icon sheet. An

A small version of the icon sheet is displayed here against a colored background. 

Panel
bgColor#ccffff
borderWidth0

 Image RemovedImage Added

For example, the CSS to reference the virtual datacenters icon at coordinates (0,-90) is:

Code Block
.main-menu-section-link-icon-library {
  background: url(../../abicloudDefault/img/mainmenu-buttons.png) no-repeat 0 -90px;
}


You can also add your own individual icon images.

Dimensions of icons: 30 x 30