Košík
Košík

headerMAX

Co nás čeká?

Description

The headerMAX widget is designed to enhance the customization and usability of your Zabbix dashboard. It allows users to create visually distinct section headers and interactive buttons with URL links. These features help improve navigation and organization, making it easier to structure the dashboard according to specific monitoring needs.

With headerMAX, users can fully personalize their buttons and headers by choosing from multiple font styles, background colors, text sizes, and other design options. This level of customization ensures that important sections stand out and improves the clarity and efficiency of the dashboard layout.

Additionally, the option to create URL-linked buttons provides quick access to external resources, reports, or different dashboard views, reducing the time spent searching for critical information. Whether used to categorize sections, highlight key metrics, or link to important tools, HeaderMAX makes the Zabbix dashboard more user-friendly, visually appealing, and functionally adaptable.

Installation

Repository setup on the server

Connect to your Zabbix frontend server (perform on all frontend nodes) via SSH

Navigate to the /modules folder (typically located at /usr/share/zabbix/ or /usr/share/zabbix/ui/)

cd /usr/share/zabbix/modules/

Clone the repository on your server

#FREE
git clone https://git.initmax.cz/initMAX-Public/Zabbix-UI-Widgets-headerMAX.git

#PRO
git clone https://git:<<YOUR-TOKEN>>@git.initmax.cz/initMAX-Public/Zabbix-UI-Widgets-headerMAX-PRO.git

Change the ownership of the directory to the user under which your Zabbix frontend is running using the chown command (cat /etc/passwd to find which user was created during installation), some examples:

chown nginx:nginx ./Zabbix-UI-Widgets-headerMAX*
chown apache:apache ./Zabbix-UI-Widgets-headerMAX*
chown www-data:www-data ./Zabbix-UI-Widgets-headerMAX*

Frontend module initialization 

Navigate to the Zabbix frontend menu and select: Administration → General → Modules

Use the ‘Scan directory’ button at the top

Enable the newly discovered module/widget

The module is available in the menu

Configuration

FieldDescription
ContentMain text or HTML content to be displayed in the header widget.
Allow HTML tags in contentEnables rendering of basic HTML tags (e.g. <b>, <i>, <br>) in content.
Font familySets the font used for the text (e.g. Rubik, Arial, etc.).
Font colorDefines the color of the text using a color picker or hex code.
Font sizeSets the size of the text in pixels.
Font styleOptions to make the text bold, underlined, or italic.
Background colorSets the background color of the header area.
Horizontal alighAligns the content horizontally: None, Left, Center, or Right.
Vertical alignAligns the content vertically: None, Top, Middle, or Bottom.
PaddingSets the padding (spacing) around the content in pixels.
Remove background and borderRemoves the background color and border to make the widget fully transparent.

Usage Examples

Here are a few examples of how you can use the HeaderMAX widget

Example 1 – Header element on Dashboard

Uses only standard functions without HTML tags – available in the free version of the widget

Example 2 – Informational block

The HeaderMAX widget can also be used to display clear and concise context information without any styling or HTML.

The example below uses plain text only, making it compatible with the free version of the widget.

Example 3 – Interactive dashboard navigation button

Using HTML, the HeaderMAX widget can function as a custom navigation button that links to another dashboard.

This is especially useful for creating visual menus, section overviews, or quick-access panels directly within a dashboard layout. With styles applied directly in the HTML, you can control layout, padding, icons, and hover behavior to fit your branding and UI needs.

The example below includes a clickable icon and title, styled as a tile with rounded corners and background color transition on hover.

Note: This example requires HTML to be enabled in the widget settings and may use custom Zabbix icons (e.g., from imgstore.php).

Code example

<div style="
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    transition: background-color 0.3s ease;">
    
    <!-- MANUAL: Link to target dashboard -->
    <a href="zabbix.php?action=dashboard.view&dashboardid=138" 
       style="
       text-decoration: none;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       width: 100%;
       height: 100%;
       padding: 120px;
       box-sizing: border-box;
       transition: background-color 0.3s ease;"
       onmouseover="this.parentNode.style.backgroundColor='#f7be00';" 
       onmouseout="this.parentNode.style.backgroundColor='white';">
       
        <div style="
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;">
            <!-- MANUAL: Icon source and alt text -->
            <img src="imgstore.php?iconid=127" 
                 alt="Dashboard icon" 
                 height="110" 
                 style="
                 max-width: 100%;
                 object-fit: contain;">
        </div>
        
        <!-- MANUAL: Tile label -->
        <p style="
        color: #0D142D;
        font-weight: bold;
        margin: 10px 0 0;
        text-align: center;
        line-height: 1.2;">Network Overview</p>
        
    </a>
</div>

Where to get it?

If you’re interested in this widget, you can find it in our e-shop. There you’ll learn more about the available versions and how to get the product.

Get widget
×Košík

Your cart is empty.