Back to Documentation

How to Customize Your Theme

PanelN gives you 100% control over the look and feel of your SMM panel. We use the powerful Twig templating engine, allowing you to easily edit HTML, CSS, and JS directly from your dashboard.

Built-in Twig Documentation

You don't need to search the web for variables! The complete documentation for our specific Twig variables is hosted directly inside your admin panel at /admin/docs. It lists every single tag you can use to pull data.

Step 1: Open the Code Editor

Log into your Admin dashboard and navigate to Appearance > Themes. Find the theme you want to edit and click the Code Editor (or icon) button.

Step 2: Editing Twig, CSS, and JS

Inside the Code Editor, editing is super easy. You will see a folder sidebar containing your theme's files. You can navigate through:

  • HTML/Twig Files: Standard HTML mixed with double curly braces {{ user.balance }} to print dynamic data.
  • CSS Files: Located in the /assets/css/ folder for modifying colors, fonts, and layouts.
  • JS Files: Located in the /assets/js/ folder for adding custom scripts (like live chat widgets).

File Management & Uploads

Need to upload custom images, icons, or background videos for your theme? You don't need external hosting. Navigate to Admin > Appearance > Files. Here, you can upload any media and immediately copy the URL to use inside your Twig or CSS files!

Read the full guide on File Management here.

Safe Editing: File Reset Feature

Don't worry about breaking your panel! If you ever mess up a file and your panel stops working, PanelN includes a File Reset feature. With one click, you can revert any messed-up file back to its original, default state.