Zoomdata Selectors by Color

The Zoomdata interface uses a set of consistent brand colors to call attention to important elements throughout the client application. Through the supervisor function, you can remove much of the basic Zoomdata branding, such as logos, headers, and footers. The color selectors allow you to further neutralize the interface to better suit your business needs. Using the various selectors below, you can insert colors and color palettes of your choice.

To change the colors within the interface, you need to find the desired selector and then upload your custom CSS file into Zoomdata. For more information on how to accomplish this, see Customizing the Zoomdata User Interface .

The following colors are covered in this topic:

Zoomdata Solar Green
Zoomdata Beach Blue

Zoomdata Solar Green Color Selectors

The selectors listed below all use the Zoomdata solar green color scheme. This includes a variety of buttons and icons. This color is primarily used when icons and buttons are selected, such as the home icon.

Settings Icon

zd.icon.user.admin:after. Li-active {
color: red;
}

Home Icon

.main-menu .navbar-inverse .nav > li.current > a, .main-menu .navbar-inverse .nav > li.active > a {
color: red;
}

Open Hover Color

For the new home page in version 2.5, you can change the hover color that is displayed when attempting to open a dashboard.

.zdView-CardImage-328430818.item-open .open-btn:hover{
border: red;
color: red;
}

Left Pane Filters

Using this one color selector changes all filters when selected. This selector is for the new home page in version 2.5.

.zdView-FastFilterItem-219878426.active .item-icon {
color:red;
}

Menu Options

Using this color selector changes the data sources/All items background color.

.zd.icon.connectors:after {
color: red;
}

User Information

Changing this color selector changes the background color of the name of the user.

.main-menu .zd-userinfo .header {
color: red;
}

To change the color of the user icon, use the selector below.

.zd.icon.user:after {
color: red;
}

Zoomdata Beach Blue Color Selectors

The selectors listed below all use the Zoomdata beach blue color scheme. This includes a variety of buttons and icons. The majority of these buttons are found in administrator and supervisor functions.

Login Button

input .btn.btn-success.btn-large {
background-color: red;
}

New Button

Using this selector changes the color of the New button.

.zdView-AddNew-4162627664 button.add-new-button {
background-color: red;
}

New User Button

Using this selector changes the color of the New User button for administrators and supervisors.

.zdView-Users button.add-new-user {
background-color: red;
}

Manage Connections Button

Using this selector changes the colors of the Manage connection button.

a.btn.zd-button.blue.connections-btn {
background-color: red;
}

Add Chart Button

Using this selector changes the colors of the Add Chart button in the dashboard pane.

.visualization-control.right .chart-control.negative:hover {
background-color: red;
border: red;
}

Was this topic helpful?