Adding Back End Assets
In some cases you might want to adjust the default back end stylesheets or add additional stylesheets or JavaScript for your back end modules. As outlined in the asset management framework article, you can inject additional assets for the back end via the following global arrays:
Array | Description |
---|---|
$GLOBALS['TL_CSS'] | Additional stylesheets for the <head> . |
$GLOBALS['TL_JAVASCRIPT'] | Additional JavaScript files for the <head> . |
$GLOBALS['TL_MOOTOOLS'] | Additional HTML code at the end of the <body> . |
Adding additional entries to these arrays can be done in many ways. This guide will outline two general use cases, in order to give an idea what is possible.
Info
Starting with version 4.11 global assets can now be added via the config/config.yaml
:
Additional back end settings
Adding Assets Globally
If you need assets globally in the back end, e.g. when customizing the back end
theme, then one way to ensure that your assets are inserted on every back end page
is to use a Symfony kernel event and then check for the Contao
back end scope there. The following example implements an event listener
for this purpose using the kernel.request
event.
// src/EventListener/AddBackendAssetsListener.php
namespace App\EventListener;
use Contao\CoreBundle\Routing\ScopeMatcher;
use Symfony\Component\EventDispatcher\Attribute\AsEventListener;
use Symfony\Component\HttpKernel\Event\RequestEvent;
#[AsEventListener]
class AddBackendAssetsListener
{
public function __construct(private readonly ScopeMatcher $scopeMatcher)
{
}
public function __invoke(RequestEvent $event): void
{
if (!$this->scopeMatcher->isBackendMainRequest($event)) {
return;
}
$GLOBALS['TL_CSS'][] = /* add your CSS asset here */;
$GLOBALS['TL_JAVASCRIPT'][] = /* add your JS asset here */;
}
}
Adding Assets for a DCA
In other cases it might be sufficient to add additional assets only for a specific
DataContainer view, e.g. when you created a custom content element
and want to style its appearance in the back end. In that case you can also use
the onload
DCA callback for the specific DCA.
// src/EventListener/DataContainer/ContentOnLoadCallbackListener.php
namespace App\EventListener\DataContainer;
use Contao\CoreBundle\DependencyInjection\Attribute\AsCallback;
#[AsCallback(target: 'config.onload', table: 'tl_content')]
class ContentOnLoadCallbackListener
{
public function __invoke(): void
{
$GLOBALS['TL_CSS'][] = 'files/path/to/my.css';
}
}