Themes
With the release of v0.4, PteroCA now supports uploading and creating custom themes.
1. Installing a Custom Theme
To install your custom theme, place the theme folder (which contains the template.json file) into the /themes directory located in the root folder of the PteroCA project.
If your theme includes additional assets—such as CSS or JavaScript files—place them in the public/assets/theme/[your theme name] folder to ensure they’re correctly loaded by the panel.
2. Creating a New Theme
2.1 Create theme via CLI
If you wish to create your own theme, the following guidelines may be helpful. PteroCA supports a theming system that allows you to override the default theme.
To create a new theme, run the following command:
This command will prompt you for several details regarding the theme you are creating and then copy the default theme under the new name. The copied files will be placed in the themes/[your theme name] folder.
Additionally, the template.json file will be copied and populated with the metadata you provide (e.g., author, email, etc.). This file is required for every theme and specifies additional parameters such as the theme version and the PteroCA version.
Additionally, the theme assets—such as JavaScript and CSS files—have also been copied and can be found in the public/assets/theme/[your theme name] folder.
2.2 Change current theme in settings
Now go to Settings in the left-hand menu → Appearance → Current theme of the panel (current_theme). Edit this setting and change the current theme to your newly created one, then save your selection.
If you switched from the default theme to your new one, you might notice no visible changes. That’s perfectly normal—at this stage, your custom theme is identical to the default, aside from the name.
Keep reading the guidelines below to learn more about creating and customizing themes.
2.3 Modyfying the new theme
Understanding How Twig Templates Work in PteroCA
Within your newly created theme folder, you'll find three key directories:
bundles— Used to globally override templates provided by EasyAdmin.email— Contains email templates.panel— Includes everything related to the panel itself.
All templates are created using the Twig templating engine, which is widely used in Symfony.
As mentioned earlier, PteroCA uses EasyAdmin, a Symfony-based tool that simplifies and speeds up creating CRUD interfaces. Since approximately 75% of the PteroCA panel consists of CRUD views (for editing settings, users, categories, products, etc.), EasyAdmin significantly accelerates panel development.
Therefore, templates can be divided into two categories:
Standard Templates (Twig files in your theme directory)
Automatically Generated CRUD Templates by EasyAdmin (which can be overridden)
Templates generated by EasyAdmin can be freely overridden. If you place a Twig file with the appropriate name in the corresponding directory, EasyAdmin will automatically import your custom template and use it instead of generating the standard CRUD. Cool and fast, right?
Overriding standard templates
Standard templates are located everywhere except in two locations: the bundles directory and panel/crud.
You can freely modify each of these templates in your theme, editing their content or extending them using other Twig files.
If you need assistance with Twig templates in Symfony, please refer to the Twig documentation.
Overriding EasyAdmin templates
All CRUD views use EasyAdmin templates, which are located in the vendor directory (and thus cannot be edited directly). Each EasyAdmin template can be overridden, and PteroCA includes a system that allows for both global automatic replacement of templates and overriding templates for individual CRUD views. This means you can, for example, customize the user list view without affecting other lists (such as logs).
There are two directories where you can override EasyAdmin templates: the bundles folder and the panel/crud folder within your theme.
In the
bundlesfolder, you have the ability to globally override a template (for example, inbundles/EasyAdminBundle, thedefaulttemplate can overridelayout.html.twig, which is responsible for the overall panel layout and top menu).In the
panel/crudfolder, the approach is similar; however, here you can override templates only for a specific action within the PteroCA panel. For instance,panel/crud/product/edit.html.twigcontains code that extends the default EasyAdmin template with JavaScript.
When overriding EasyAdmin templates, be sure to follow the guidelines outlined above. If you encounter any issues, refer to the Twig or EasyAdmin documentation, or join our Discord server where we’re happy to help.
Last updated