mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-11 14:00:27 -06:00
63 lines
20 KiB
HTML
63 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Creating a theme for Pterodactyl | Pterodactyl</title>
|
|
<meta name="generator" content="VuePress 1.5.4">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0e4688">
|
|
<link rel="manifest" href="/favicons/site.webmanifest">
|
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
|
<meta name="description" content="Pterodactyl is an open-source game server management panel built with PHP 7, React, and Go. Designed with security in mind, Pterodactyl runs all game servers in isolated Docker containers while exposing a beautiful and intuitive UI to end users.">
|
|
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#0e4688">
|
|
<link rel="preload" href="/assets/css/0.styles.26db9e46.css" as="style"><link rel="preload" href="/assets/js/app.6f644b5e.js" as="script"><link rel="preload" href="/assets/js/4.c604a46d.js" as="script"><link rel="preload" href="/assets/js/1.d27374d7.js" as="script"><link rel="preload" href="/assets/js/47.c270dd48.js" as="script"><link rel="prefetch" href="/assets/js/10.bcaf3754.js"><link rel="prefetch" href="/assets/js/11.55d74506.js"><link rel="prefetch" href="/assets/js/12.f47fda43.js"><link rel="prefetch" href="/assets/js/13.d96e5a31.js"><link rel="prefetch" href="/assets/js/14.2b6a0c7b.js"><link rel="prefetch" href="/assets/js/15.dcb97977.js"><link rel="prefetch" href="/assets/js/16.f2393fa3.js"><link rel="prefetch" href="/assets/js/17.403d3937.js"><link rel="prefetch" href="/assets/js/18.a38a22c6.js"><link rel="prefetch" href="/assets/js/19.d0ce4d8a.js"><link rel="prefetch" href="/assets/js/2.17b53296.js"><link rel="prefetch" href="/assets/js/20.48df507b.js"><link rel="prefetch" href="/assets/js/21.d3288560.js"><link rel="prefetch" href="/assets/js/22.8707baae.js"><link rel="prefetch" href="/assets/js/23.4e66327c.js"><link rel="prefetch" href="/assets/js/24.a7d8bd12.js"><link rel="prefetch" href="/assets/js/25.a18e760a.js"><link rel="prefetch" href="/assets/js/26.ce110c77.js"><link rel="prefetch" href="/assets/js/27.6e584590.js"><link rel="prefetch" href="/assets/js/28.45d4fe86.js"><link rel="prefetch" href="/assets/js/29.1cc47d12.js"><link rel="prefetch" href="/assets/js/30.831cc1fd.js"><link rel="prefetch" href="/assets/js/31.55c4be08.js"><link rel="prefetch" href="/assets/js/32.874608f0.js"><link rel="prefetch" href="/assets/js/33.257d9d0e.js"><link rel="prefetch" href="/assets/js/34.fead0e36.js"><link rel="prefetch" href="/assets/js/35.bc9ceac9.js"><link rel="prefetch" href="/assets/js/36.0050a325.js"><link rel="prefetch" href="/assets/js/37.13038a4c.js"><link rel="prefetch" href="/assets/js/38.7687dfa0.js"><link rel="prefetch" href="/assets/js/39.b4cd4648.js"><link rel="prefetch" href="/assets/js/40.04b12ca0.js"><link rel="prefetch" href="/assets/js/41.c2275e99.js"><link rel="prefetch" href="/assets/js/42.b62aa882.js"><link rel="prefetch" href="/assets/js/43.f9c88a30.js"><link rel="prefetch" href="/assets/js/44.d08991a7.js"><link rel="prefetch" href="/assets/js/45.f1a12be4.js"><link rel="prefetch" href="/assets/js/46.6188e703.js"><link rel="prefetch" href="/assets/js/48.eb0b027c.js"><link rel="prefetch" href="/assets/js/49.e7ffb6ba.js"><link rel="prefetch" href="/assets/js/5.af76139f.js"><link rel="prefetch" href="/assets/js/50.0c3d2560.js"><link rel="prefetch" href="/assets/js/51.9c936a2a.js"><link rel="prefetch" href="/assets/js/52.1612015f.js"><link rel="prefetch" href="/assets/js/53.3fbc2d3e.js"><link rel="prefetch" href="/assets/js/54.f7cd6f1d.js"><link rel="prefetch" href="/assets/js/55.0c04e712.js"><link rel="prefetch" href="/assets/js/56.57212138.js"><link rel="prefetch" href="/assets/js/57.2ed5d866.js"><link rel="prefetch" href="/assets/js/58.62c6769e.js"><link rel="prefetch" href="/assets/js/59.3fec0a23.js"><link rel="prefetch" href="/assets/js/6.f86bc75a.js"><link rel="prefetch" href="/assets/js/60.a1e5841d.js"><link rel="prefetch" href="/assets/js/61.d9f7a2d7.js"><link rel="prefetch" href="/assets/js/62.b1154572.js"><link rel="prefetch" href="/assets/js/63.54b57615.js"><link rel="prefetch" href="/assets/js/64.c2b85b4a.js"><link rel="prefetch" href="/assets/js/65.f7366621.js"><link rel="prefetch" href="/assets/js/66.33a82358.js"><link rel="prefetch" href="/assets/js/67.e0fb22da.js"><link rel="prefetch" href="/assets/js/68.ef89e2f1.js"><link rel="prefetch" href="/assets/js/69.22a84070.js"><link rel="prefetch" href="/assets/js/7.4a1def3b.js"><link rel="prefetch" href="/assets/js/70.a73af80a.js"><link rel="prefetch" href="/assets/js/71.11ed3097.js"><link rel="prefetch" href="/assets/js/72.ad254c63.js"><link rel="prefetch" href="/assets/js/73.b0510c77.js"><link rel="prefetch" href="/assets/js/74.4c316a74.js"><link rel="prefetch" href="/assets/js/75.58af963c.js"><link rel="prefetch" href="/assets/js/76.241ece69.js"><link rel="prefetch" href="/assets/js/77.43dd6598.js"><link rel="prefetch" href="/assets/js/78.af4ed622.js"><link rel="prefetch" href="/assets/js/8.1d46764c.js"><link rel="prefetch" href="/assets/js/9.ec68f296.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.26db9e46.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="nav"><div class="sidebar-button block md:hidden flex-no-shrink"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <div class="logo-container"><a href="/" class="home-link router-link-active"><img src="/logos/pterry.svg" class="logo"> <span class="site-name hidden md:inline can-hide">Pterodactyl</span></a></div> <div class="w-full"><div class="flex"><div class="search-box"><input aria-label="Search" placeholder="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links flex-no-shrink hidden md:flex"><div class="nav-item"><a href="/project/introduction.html" class="nav-link">Documentation
|
|
</a></div><div class="nav-item"><a href="/community/about.html" class="nav-link">Community Guides
|
|
</a></div><div class="nav-item"><a href="https://discord.gg/pterodactyl" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Get Help
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://dashflo.net/docs/api/pterodactyl/v1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
API
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <div class="nav-item"><a href="https://github.com/pterodactyl/panel" target="_blank" rel="noopener noreferrer" class="nav-link">
|
|
Contribute
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></nav></div></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links flex-no-shrink block md:hidden"><div class="nav-item"><a href="/project/introduction.html" class="nav-link">Documentation
|
|
</a></div><div class="nav-item"><a href="/community/about.html" class="nav-link">Community Guides
|
|
</a></div><div class="nav-item"><a href="https://discord.gg/pterodactyl" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Get Help
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://dashflo.net/docs/api/pterodactyl/v1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
API
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <div class="nav-item"><a href="https://github.com/pterodactyl/panel" target="_blank" rel="noopener noreferrer" class="nav-link">
|
|
Contribute
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>Community Guides</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/about.html" class="sidebar-link">Community Guides and Tutorials</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Panel Installation</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/installation-guides/panel/centos7.html" class="sidebar-link">CentOS 7</a></li><li><a href="/community/installation-guides/panel/centos8.html" class="sidebar-link">CentOS 8</a></li><li><a href="/community/installation-guides/panel/debian9.html" class="sidebar-link">Debian 9</a></li><li><a href="/community/installation-guides/panel/debian10.html" class="sidebar-link">Debian 10</a></li><li><a href="/community/installation-guides/panel/ubuntu1804.html" class="sidebar-link">Ubuntu 18.04</a></li><li><a href="/community/installation-guides/panel/ubuntu2004.html" class="sidebar-link">Ubuntu 20.04</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Wings Installation</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/installation-guides/wings/centos7.html" class="sidebar-link">CentOS 7</a></li><li><a href="/community/installation-guides/wings/centos8.html" class="sidebar-link">CentOS 8</a></li><li><a href="/community/installation-guides/wings/debian9.html" class="sidebar-link">Debian 9</a></li><li><a href="/community/installation-guides/wings/debian10.html" class="sidebar-link">Debian 10</a></li><li><a href="/community/installation-guides/wings/ubuntu1804.html" class="sidebar-link">Ubuntu 18.04</a></li><li><a href="/community/installation-guides/wings/ubuntu2004.html" class="sidebar-link">Ubuntu 20.04</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Creating Eggs</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/config/eggs/creating_a_custom_egg.html" class="sidebar-link">Creating a Custom Egg</a></li><li><a href="/community/config/eggs/creating_a_custom_image.html" class="sidebar-link">Creating a Custom Docker Image</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Game Configuration</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/games/minecraft.html" class="sidebar-link">Minecraft</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Tutorials</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/config/nodes/add_node.html" class="sidebar-link">Creating a New Node</a></li><li><a href="/community/tutorials/custom_theme_setup.html" class="active sidebar-link">Creating a theme for Pterodactyl</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/community/tutorials/custom_theme_setup.html#using-cli" class="sidebar-link">Using CLI</a></li></ul></li><li><a href="/community/tutorials/artisan.html" class="sidebar-link">Artisan CLI</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Customization</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/customization/panel.html" class="sidebar-link">Building Panel Assets</a></li><li><a href="/community/customization/wings.html" class="sidebar-link">Building Wings</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content content__default"><h1 id="creating-a-theme-for-pterodactyl"><a href="#creating-a-theme-for-pterodactyl" class="header-anchor">#</a> Creating a theme for Pterodactyl</h1> <p>This tutorial briefly covers how to create a theme for Pterodactyl without overwriting the main theme files.</p> <p>:::warn
|
|
The theming system has not been ported to 1.0+. This guide is only applicable to 0.7.X.
|
|
:::</p> <h2 id="using-cli"><a href="#using-cli" class="header-anchor">#</a> Using CLI</h2> <p>Begin by going to your panel's main directory typically installed at <code>/var/www/pterodactyl</code>. The command below is a straightforward setup that will cover
|
|
the majority of the functions all for you (such as Theme Name, Views Location, Assets Location etc).</p> <div class="language-bash extra-class"><pre class="language-bash"><code>php artisan theme:create
|
|
</code></pre></div><p>This command will activate the theme wizard. Besides the name, the defaults will suffice, see the below example.</p> <div class="custom-block warning"><p class="custom-block-title">Do not create the theme named as `pterodactyl` as that is Pterodactyl's main design and should NOT be overwritten.</p></div> <div class="language-bash extra-class"><pre class="language-bash"><code>Give theme name:
|
|
<span class="token operator">></span> <span class="token punctuation">(</span>Enter Theme Name Here<span class="token punctuation">)</span> <span class="token punctuation">(</span>Example: MyThemeNameHere<span class="token punctuation">)</span>
|
|
|
|
Where will views be located? <span class="token punctuation">[</span><span class="token punctuation">]</span>:
|
|
<span class="token operator">></span> <span class="token punctuation">(</span>Press Enter<span class="token punctuation">)</span>
|
|
|
|
Where will assets be located? <span class="token punctuation">[</span><span class="token punctuation">]</span>:
|
|
<span class="token operator">></span> themes/<span class="token punctuation">(</span>MyThemeNameHere<span class="token punctuation">)</span> <span class="token punctuation">(</span>Example: themes/MyThemeNameHere<span class="token punctuation">)</span>
|
|
|
|
Extends an other theme? <span class="token punctuation">(</span>yes/no<span class="token punctuation">)</span> <span class="token punctuation">[</span>no<span class="token punctuation">]</span>:
|
|
<span class="token operator">></span> <span class="token punctuation">(</span>Press Enter<span class="token punctuation">)</span>
|
|
</code></pre></div><p>If you have done it correctly, the summary should be like this:
|
|
Summary:</p> <ul><li>Theme name: <code>MyThemeHere</code></li> <li>Views Path: <code>/var/www/pterodactyl/resources/themes/MyThemeHere</code></li> <li>Asset Path: <code>/var/www/pterodactyl/public/themes/MyThemeHere</code></li> <li>Extends Theme: No</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code> Create Theme? <span class="token punctuation">(</span>yes/no<span class="token punctuation">)</span> <span class="token punctuation">[</span>yes<span class="token punctuation">]</span>:
|
|
<span class="token operator">></span> <span class="token punctuation">(</span>Press Enter<span class="token punctuation">)</span>
|
|
</code></pre></div><p>If the above shows as that then your initial theme has been created correctly!</p> <h3 id="set-your-newly-created-theme-as-default"><a href="#set-your-newly-created-theme-as-default" class="header-anchor">#</a> Set your newly created theme as default</h3> <p>Place your downloaded theme in the correct directory <strong>without overwriting</strong> the default Pterodactyl theme. See the following examples:</p> <p>Your <code>public</code> folder into <code>/var/www/pterodactyl/public/themes/MyThemeHere/</code></p> <p>Your <code>resources</code> folder into <code>/var/www/pterodactyl/resources/themes/MyThemehere/</code></p> <h3 id="setting-your-theme-name-in-env"><a href="#setting-your-theme-name-in-env" class="header-anchor">#</a> Setting your theme name in .env</h3> <p>After creating your theme and uploading those theme files correctly, you need to edit your <code>.env</code> (environment) file next.
|
|
Open up your <code>.env</code> file and locate <code>APP_THEME=pterodactyl</code> line and change it to <code>APP_THEME=MyThemeHere</code> (case-sensitive) and save it.</p> <p>When done correctly, your panel will now load your custom/new theme correctly without any issues.</p></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/pterodactyl/documentation/edit/master/community/tutorials/custom_theme_setup.md" target="_blank" rel="noopener noreferrer">Help us improve this page.</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <div class="page-nav"><p class="inner"></p> <div class="prev"><span>
|
|
←
|
|
<a href="/community/config/nodes/add_node.html">Creating a New Node</a></span></div> <div class="next"><span><a href="/community/tutorials/artisan.html">Artisan CLI</a>→
|
|
</span></div></div> </div></div><div class="global-ui"></div></div>
|
|
<script src="/assets/js/app.6f644b5e.js" defer></script><script src="/assets/js/4.c604a46d.js" defer></script><script src="/assets/js/1.d27374d7.js" defer></script><script src="/assets/js/47.c270dd48.js" defer></script>
|
|
</body>
|
|
</html>
|