Guide Clarity: Free CyberPanel 3 Theme with Clean Blue UI and Fold-Away Menu - Printable Version +- AdminsForum (https://adminsforum.com) +-- Forum: Free & open-source control panels (https://adminsforum.com/Forum-free-open-source-control-panels) +--- Forum: CyberPanel (https://adminsforum.com/Forum-cyberpanel) +---- Forum: CyberPanel Guides & Tutorials (https://adminsforum.com/Forum-cyberpanel-guides-tutorials) +----- Forum: CyberPanel Getting Started Guides (https://adminsforum.com/Forum-cyberpanel-getting-started-guides) +----- Thread: Guide Clarity: Free CyberPanel 3 Theme with Clean Blue UI and Fold-Away Menu (/Thread-guide-clarity-free-cyberpanel-3-theme-with-clean-blue-ui-and-fold-away-menu)

Clarity: Free CyberPanel 3 Theme with Clean Blue UI and Fold-Away Menu - JAY - 11-03-2026 Clarity: a free, cleaner look for CyberPanel 3 CyberPanel 3 works well, but many of its screens are hard on the eyes. Labels are tiny (9 to 11 px), orange and purple are mixed on the same page, and the tool pages make you scroll past big empty cards to find one link. So we made a free theme for it, called Clarity. It only changes how the panel looks. Nothing about how CyberPanel works, saves or runs is touched. You paste it into the panel's own Custom CSS box, and you can remove it the same way in a few seconds. Watch the full walkthrough (4 minutes) Before: the default CyberPanel 3 look.     After: the same dashboard with this theme.     What the theme changes Readable text everywhere. Normal text is 14 px and no label is smaller than 12 px. We checked 98 panel pages for this. One calm colour. One blue for buttons and links, instead of orange on some pages and purple on others. Coloured icons by area. Mail is always sky blue, databases purple, backups amber, users pink, server teal and security red, in the menu and on the tool pages. After a day you find things by colour. Compact tool lists. The Server, Email, Security, Users and Settings pages show every tool as a tidy list, so most of them fit on one screen. A darker, grouped menu. Shaded group headings (Hosting, Account, Administration) and a clear blue bar on the page you are on. A fold-away menu (optional). One click folds the menu into a slim strip of icons and gives the page more room. Hover an icon to see its name. The panel remembers your choice. Calmer logs and service pages. Logs show in a dark, easy-to-read terminal view, and running services get a soft green "live" dot. Gentle motion. Pages and cards ease in and usage bars fill in. Nothing flashy, and it turns itself off if your computer is set to reduce motion. A cleaner sign-in page. Each sign-in field and its icon look like one box, with one clear blue ring when you click in. Server tools page: compact list with coloured icons.     Fold-away menu: icons only, with the name shown when you hover.     Services page and sign-in page:         Is it safe? The theme is plain CSS, which means styling only. It has no scripts, loads no fonts or images from other websites and sends nothing anywhere. It does not change your websites, databases, email or settings. To remove it, empty the Custom CSS box and click Save Changes. The panel goes straight back to its default look. Download Download Clarity 1.3.2 for CyberPanel It lives in our Downloads library, which always has the newest version, the changelog and the file checksum. The download is free for registered members. If you are not logged in, create a free account (it takes a minute) or log in first. The zip has 4 files: clarity-cyberpanel.css: the theme (this is the one you paste). clarity-cyberpanel.min.css: the same theme without comments. Use this one instead if you like. fix-theme-flash.sh: the optional helper script (explained below). README.txt: short install notes. How to install the theme (about 2 minutes) Log in, download the zip above and unzip it on your computer. Open clarity-cyberpanel.css in any text editor (Notepad is fine), press Ctrl + A to select everything, then Ctrl + C to copy it. Log in to CyberPanel as admin. In the menu, click Settings, then open Design. Click inside the Custom CSS box. If there is old CSS in it, select it and delete it first (or save a copy if you want to keep it). Paste the theme with Ctrl + V. Click Save Changes. Reload the page with Ctrl + Shift + R (on a Mac: Cmd + Shift + R). The new look shows straight away.     That's it. The readable text, coloured icons, compact lists and the new sign-in page all work with just these steps. Optional: the helper script CyberPanel adds your Custom CSS at the very bottom of each page. Because of that, when you refresh you may see the old look for a split second before the theme loads. The small helper script fixes that and adds two extras: Loads the theme at the top of every page, so there is no flash of the old look on refresh. Adds a menu button to the header that folds the menu into icons, and remembers your choice. Adds a small "Clarity theme by AdminsForum" link to the bottom of the sign-in page. You can skip this one. How to run it Upload fix-theme-flash.sh to your server, for example into /root. You can use SFTP, or CyberPanel's Server > Root File Manager. Connect to your server with SSH as root. Run: Code:Copy cd /root bash fix-theme-flash.sh Reload the panel with Ctrl + Shift + R. Want only some parts? Put these words in front of the command to skip a part: Code:Copy NO_CREDIT=1 bash fix-theme-flash.sh             # skip the sign-in page link NO_RAIL=1 bash fix-theme-flash.sh               # skip the fold-away menu NO_CREDIT=1 NO_RAIL=1 bash fix-theme-flash.sh   # only the no-flash fix The script makes a backup of each file it changes (the backup ends in .af-bak), and it is safe to run more than once. After a CyberPanel upgrade: upgrades replace the panel's page files, so run the script again. Your Custom CSS (the theme itself) is kept. To undo the script, put the backups back and restart the panel: Code:Copy cp /usr/local/CyberCP/baseTemplate/templates/baseTemplate/index.html.af-bak /usr/local/CyberCP/baseTemplate/templates/baseTemplate/index.html cp /usr/local/CyberCP/loginSystem/templates/loginSystem/login.html.af-bak /usr/local/CyberCP/loginSystem/templates/loginSystem/login.html systemctl restart lscpd Good to know Tested on: CyberPanel 3.0 (build 8) with OpenLiteSpeed on Ubuntu 24.04. Any CyberPanel 3.x should work. It is not made for CyberPanel 2.x. Light mode only. If you click the moon button in the header, you get CyberPanel's own dark look, unchanged. The File Manager keeps its default look, because CyberPanel does not load Custom CSS on that page. On phones the menu still slides in and out as normal. Don't want the small "Clarity theme by AdminsForum.com" line under the menu? Search the CSS file for "15. Credit line" and delete the one line under it before you paste. Theme looks wrong after you saved? Press Ctrl + Shift + R to clear the old copy from your browser. If one page still looks off, reply below. Found a page that looks wrong, or have an idea for the next version? Reply below with a screenshot (please hide your server IP first) and we'll fix it. More CyberPanel guides Fail2ban brute-force protection Change PHP version per website Git deployment from GitHub SSH key login, passwords off Create a website Issue SSL and fix failed certificates Subdomains, addon domains and aliases Rewrite rules, force HTTPS, HSTS Install WordPress with LiteSpeed Cache Cron jobs and a real WP-Cron Redis object cache for WordPress Databases and phpMyAdmin Email, DKIM, SPF and DMARC Email forwarding, catch-all, plus-addressing Mail queue, spam senders, blacklists CyberPanel DNS vs Cloudflare Packages and website limits Deploy Laravel on CyberPanel WordPress staging (clone) fixes Backups: create, restore, schedule File Manager and FTP Reset the admin password from SSH Log files and config locations Check and restart services First steps after install ModSecurity + OWASP rules (fix) CLI cheat sheet Install CyberPanel on Ubuntu 24.04 Firewall explained Install PHP extensions Change PHP settings (php.ini) Update CyberPanel safely Server Error (500) after a fresh install Packages, users and ACLs Upgrade CyberPanel safely Real visitor IPs behind Cloudflare Import a large SQL file over SSH Remote MySQL access for one IP Move WordPress to CyberPanel by hand Fix "Error establishing a database connection" Fix PHP2Shell (CVE-2026-109618/109619) Docker apps on your domain with SSL Run your own nameservers (PowerDNS) Tested on CyberPanel 3.0 (build 8) with OpenLiteSpeed 1.9.4 and MariaDB 10.11 on Ubuntu 24.04, November 2026. Theme version 1.3.0.