Customizing Your Pterodactyl Panel: Themes and Blueprint Extensions

The default Pterodactyl panel works well but looks like every other Pterodactyl installation. If you run a hosting company or a community server, you want your panel to feel like yours. Custom branding, colors, and features set you apart.

There are two approaches: manual React frontend customization and the Blueprint extension framework.

---

Approach 1: Manual Theme Customization

Pterodactyl's frontend is built with React and Tailwind CSS. You can modify colors, logos, and layout by editing the source and rebuilding.

Prerequisites

You need Node.js and Yarn installed on your panel server:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt install -y nodejs
npm install -g yarn

Changing Colors

Navigate to your Pterodactyl installation:

cd /var/www/pterodactyl

The Tailwind config controls the color palette. Edit tailwind.config.js:

Find the color definitions and replace them with your brand colors:

colors: {
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',  // Your primary brand color
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
}

Replacing the Logo

Replace the logo file in the public directory:

cp your-logo.svg /var/www/pterodactyl/public/assets/svgs/pterodactyl.svg

Rebuilding the Frontend

After making changes, rebuild:

cd /var/www/pterodactyl
yarn install
yarn build:production

If you get an OpenSSL error:

export NODE_OPTIONS=--openssl-legacy-provider
yarn build:production

Clear the cache:

php artisan view:clear
php artisan config:clear

---

Approach 2: Blueprint Framework

Blueprint is a community extension framework for Pterodactyl. It lets you install pre-built extensions without modifying core files. This is safer and easier to maintain across Pterodactyl updates.

Installing Blueprint

cd /var/www/pterodactyl
wget https://raw.githubusercontent.com/BlueprintFramework/main/release/blueprint.sh
chmod +x blueprint.sh
bash blueprint.sh

Follow the installation prompts. Blueprint integrates into your Pterodactyl installation.

Installing Extensions

Extensions come as .blueprint files. Install them with:

cd /var/www/pterodactyl
blueprint -install extension-name

Popular Blueprint Extensions

| Extension | What It Does | |---|---| | Nebula | Modern dark theme with smooth animations | | Redirect | Custom redirects for panel pages | | Server Analytics | Usage graphs and statistics per server | | Announcements | Display banners and announcements to users |

Check the Blueprint marketplace for available extensions: blueprint.zip/browse

Creating Your Own Theme

If existing themes do not match your brand, you can create a Blueprint theme extension:

1. Fork an existing theme extension from GitHub
2. Modify the CSS/React components
3. Package it as a .blueprint file
4. Install on your panel

This keeps your customizations separate from core Pterodactyl files. When Pterodactyl updates, your Blueprint extensions stay intact.

---

Things to Customize

Login Page

The login page is the first thing users see. Add your logo, brand name, and support links. If you use a Blueprint theme, most handle this automatically.

Server Console Page

The console is where users spend most of their time. Adding quick-action buttons (restart, kill, file manager shortcuts) improves the user experience.

Footer and Branding

Replace "Pterodactyl" branding in the footer with your company name and support links. The meta title in the HTML head should also reflect your brand.

Favicon

Replace the default Pterodactyl favicon:

cp your-favicon.ico /var/www/pterodactyl/public/favicons/favicon.ico

---

Keeping Customizations Through Updates

The biggest risk with manual theme changes is losing them during Pterodactyl updates. When you run php artisan pterodactyl:update, it may overwrite your modified files.

Solutions:

1. Use Blueprint: Extensions survive updates
2. Use Git: Track your changes with version control so you can re-apply them after updates
3. Keep a diff file: After making changes, run git diff > my-theme.patch and re-apply with git apply my-theme.patch after updates

---

Performance Note

Custom themes should not affect panel performance unless you add heavy JavaScript. Keep custom CSS minimal and avoid large image backgrounds on the login page. The panel needs to load fast on mobile and slow connections.

Space-Node uses a customized Pterodactyl panel with our own branding and features. For customers who want to customize their experience, all panel features are accessible through the web interface. Check the plans here.