Streamlining CyberPanel Navigation with Custom CSS and Tampermonkey

Managing multiple CyberPanel installations can be a challenge. The interface is powerful, but when you’re juggling several servers, the navigation menus and controls can start to feel cluttered. I found myself constantly hunting for the right submenu or control, and realized that a few small tweaks could make the dashboard much easier to use.

Starting with CyberPanel’s Design Tab

CyberPanel includes a Design tab that allows administrators to inject custom CSS directly into the dashboard. This is a great starting point for quick adjustments. For example, I added styles to visually separate submenus, highlight important links, and tone down upsell items that distracted from the core controls.

Here are some of the CSS rules I used:

css

a + #websites-submenu {
  border: solid 2px #888;
}

a + .submenu {
  background: #999;
}

#sidebar a:has(+ #websites-submenu) {
  background: #ddf5de; /* highlight the Websites menu */
}

/* Give disabled effect to upsell links */
#sidebar a:has(+ #wordpress-submenu) {
  color: #ddd;
}

#sidebar .menu-item.expanded {    
  margin: 0;
  border-radius: 0;
  border: solid 2px #777;
  background: #ddd;
}

/* Fix control display on various pages */
.pagination-select {
  height: 50px;
}

These changes made the sidebar easier to scan, reduced visual noise, and improved the usability of the pagination dropdown.

The Limitation: Multiple Installs

The problem came when I realized I had several CyberPanel installs. Copying and pasting the same CSS into each one was tedious, and worse, it meant I had to remember to update every server whenever I wanted to tweak a style. That’s not scalable.

Enter Tampermonkey

Tampermonkey, a browser extension for running custom userscripts, provided the perfect solution. Instead of embedding CSS into each CyberPanel instance, I could keep all my styles in one script and let the browser inject them automatically whenever I visited a CyberPanel dashboard.

Here’s a simplified example:

javascript

// ==UserScript==
// @name         CyberPanel Custom Styles
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Inject custom CSS into CyberPanel installs
// @match        https://my-cyberpanel-site1.com:8090/*
// @match        https://my-cyberpanel-site2.example.com:8090/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        a + #websites-submenu { border: solid 2px #888; }
        a + .submenu { background: #999; }
        #sidebar a:has(+ #websites-submenu) { background: #ddf5de; }
        #sidebar a:has(+ #wordpress-submenu) { color: #ddd; }
        #sidebar .menu-item.expanded { margin: 0; border-radius: 0; border: solid 2px #777; background: #ddd; }
        .pagination-select { height: 50px; }
    `);
})();

Fixing the Pagination Select

One annoyance I ran into was the pagination dropdown on the /websites/listWebsites page. By default, the select box was blank when you were on Page 1. That made it easy to miss that additional pages even existed.

With Tampermonkey, I added a small script that automatically sets the dropdown to “Page 1” when the page loads:

javascript

// ==UserScript==
// @name         CyberPanel Pagination Default
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Default pagination select to Page 1
// @match        my-cyberpanel-site1.com:8090/websites/listWebsites*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function setDefaultPage() {
        const select = document.querySelector('.pagination-section select');
        if (select && (!select.value || select.value === '')) {
            select.value = "1";
            select.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }

    document.addEventListener('DOMContentLoaded', setDefaultPage);
    setTimeout(setDefaultPage, 1000); // catch late Angular rendering
})();

Now, whenever I open the Websites list, the dropdown clearly shows “Page 1” by default, making it obvious that pagination exists.

There is no custom javascript field. You can modify the Cyberpanel files, but after each update you would have to redo them. As such, Tampermonkey was very helpful.

Why This Workflow Works

• Centralized control: All CSS and JS tweaks live in one script, so updates are instant across installs.
• Conditional targeting: You can add multiple @match lines or check window.location.host to apply different styles or behaviors per server.
• No server changes: The CyberPanel installs remain untouched, which is great for environments where you don’t want to modify production systems.
• Beyond CSS: With Tampermonkey, you’re not limited to styling — you can fix interface quirks with JavaScript too.

Conclusion

CyberPanel’s Design tab is a handy way to start customizing the interface, but if you’re managing multiple installs, Tampermonkey gives you a more scalable workflow. By centralizing your CSS and JavaScript in a userscript, you can keep your dashboards consistent, reduce clutter, and fix usability issues like the pagination dropdown — all without duplicating effort across servers.