mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-12 09:21:59 -06:00
61 lines
19 KiB
HTML
61 lines
19 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/manifest.json">
|
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
|
<meta name="description" content="The open-source server management solution.">
|
|
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#0e4688">
|
|
<link rel="preload" href="/assets/css/0.styles.affe18a7.css" as="style"><link rel="preload" href="/assets/js/app.f5248f1c.js" as="script"><link rel="preload" href="/assets/js/4.e413141f.js" as="script"><link rel="preload" href="/assets/js/1.ee4ff4e2.js" as="script"><link rel="preload" href="/assets/js/45.93e2654c.js" as="script"><link rel="prefetch" href="/assets/js/10.041c438a.js"><link rel="prefetch" href="/assets/js/11.efec8f80.js"><link rel="prefetch" href="/assets/js/12.8f07f9da.js"><link rel="prefetch" href="/assets/js/13.7b958e39.js"><link rel="prefetch" href="/assets/js/14.3700aaa2.js"><link rel="prefetch" href="/assets/js/15.c05cc168.js"><link rel="prefetch" href="/assets/js/16.90c5b55f.js"><link rel="prefetch" href="/assets/js/17.c2890275.js"><link rel="prefetch" href="/assets/js/18.2e49d336.js"><link rel="prefetch" href="/assets/js/19.2b788db0.js"><link rel="prefetch" href="/assets/js/2.f895a645.js"><link rel="prefetch" href="/assets/js/20.1bb23db3.js"><link rel="prefetch" href="/assets/js/21.0f5b1b2b.js"><link rel="prefetch" href="/assets/js/22.78202da6.js"><link rel="prefetch" href="/assets/js/23.e5b12066.js"><link rel="prefetch" href="/assets/js/24.433197bc.js"><link rel="prefetch" href="/assets/js/25.f87fba53.js"><link rel="prefetch" href="/assets/js/26.e0451f04.js"><link rel="prefetch" href="/assets/js/27.778d7f34.js"><link rel="prefetch" href="/assets/js/28.653b63a6.js"><link rel="prefetch" href="/assets/js/29.895e3725.js"><link rel="prefetch" href="/assets/js/30.c937ce7b.js"><link rel="prefetch" href="/assets/js/31.f4330266.js"><link rel="prefetch" href="/assets/js/32.edb430bb.js"><link rel="prefetch" href="/assets/js/33.126692c0.js"><link rel="prefetch" href="/assets/js/34.db1f95ca.js"><link rel="prefetch" href="/assets/js/35.a76295a7.js"><link rel="prefetch" href="/assets/js/36.6c7ce3e9.js"><link rel="prefetch" href="/assets/js/37.acc05557.js"><link rel="prefetch" href="/assets/js/38.8fdb9156.js"><link rel="prefetch" href="/assets/js/39.1f3570f3.js"><link rel="prefetch" href="/assets/js/40.bb2a349e.js"><link rel="prefetch" href="/assets/js/41.64e4dde3.js"><link rel="prefetch" href="/assets/js/42.4c3311c7.js"><link rel="prefetch" href="/assets/js/43.616bf7c7.js"><link rel="prefetch" href="/assets/js/44.9551b5b1.js"><link rel="prefetch" href="/assets/js/46.ce8b7f0f.js"><link rel="prefetch" href="/assets/js/47.b0fb31c4.js"><link rel="prefetch" href="/assets/js/48.f5a91324.js"><link rel="prefetch" href="/assets/js/49.32cae87f.js"><link rel="prefetch" href="/assets/js/5.1bddf890.js"><link rel="prefetch" href="/assets/js/50.7ac9f837.js"><link rel="prefetch" href="/assets/js/51.62b4f299.js"><link rel="prefetch" href="/assets/js/52.1a350460.js"><link rel="prefetch" href="/assets/js/53.ec2372f5.js"><link rel="prefetch" href="/assets/js/54.4e3df14a.js"><link rel="prefetch" href="/assets/js/55.b3c6ca74.js"><link rel="prefetch" href="/assets/js/56.7580319c.js"><link rel="prefetch" href="/assets/js/57.509d31af.js"><link rel="prefetch" href="/assets/js/58.be20f1e0.js"><link rel="prefetch" href="/assets/js/59.0d03d88a.js"><link rel="prefetch" href="/assets/js/6.d7837586.js"><link rel="prefetch" href="/assets/js/60.0ecb1163.js"><link rel="prefetch" href="/assets/js/61.47306d7b.js"><link rel="prefetch" href="/assets/js/62.c45ac518.js"><link rel="prefetch" href="/assets/js/63.ca2283e2.js"><link rel="prefetch" href="/assets/js/64.1f485a5f.js"><link rel="prefetch" href="/assets/js/65.c4581f90.js"><link rel="prefetch" href="/assets/js/66.c98a36dd.js"><link rel="prefetch" href="/assets/js/67.1dc632b6.js"><link rel="prefetch" href="/assets/js/68.f8c52b5e.js"><link rel="prefetch" href="/assets/js/69.33280bba.js"><link rel="prefetch" href="/assets/js/7.ad189dcf.js"><link rel="prefetch" href="/assets/js/70.ba33f507.js"><link rel="prefetch" href="/assets/js/71.e87b1de3.js"><link rel="prefetch" href="/assets/js/72.0cf75ac7.js"><link rel="prefetch" href="/assets/js/73.5ba5ba29.js"><link rel="prefetch" href="/assets/js/8.f208d3ff.js"><link rel="prefetch" href="/assets/js/9.56fc48a0.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.affe18a7.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="/pterodactyl-flat.png" 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://pterodactyl.io/discord" 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://pterodactyl.io/discord" 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>Daemon Installation</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/installation-guides/daemon/centos7.html" class="sidebar-link">CentOS 7</a></li><li><a href="/community/installation-guides/daemon/centos8.html" class="sidebar-link">CentOS 8</a></li><li><a href="/community/installation-guides/daemon/debian9.html" class="sidebar-link">Debian 9</a></li><li><a href="/community/installation-guides/daemon/debian10.html" class="sidebar-link">Debian 10</a></li><li><a href="/community/installation-guides/daemon/ubuntu1804.html" class="sidebar-link">Ubuntu 18.04</a></li><li><a href="/community/installation-guides/daemon/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></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> <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/wwww/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.f5248f1c.js" defer></script><script src="/assets/js/4.e413141f.js" defer></script><script src="/assets/js/1.ee4ff4e2.js" defer></script><script src="/assets/js/45.93e2654c.js" defer></script>
|
|
</body>
|
|
</html>
|