Add Custom CSS to Magnolia Admincentral

In certain cases, you may want to integrate custom column renderer logic or other custom elements into Magnolia's Vaadin-based backend. In such scenarios, it can be useful to include an external CSS file. This brief step-by-step guide will show you how to set it up.

Notice

This tutorial shows you how to create and include your own CSS files in your codebase.
We are aware that there is also a module that might suit your needs: https://docs.magnolia-cms.com/custom-css/

However, this module is typically used for smaller CSS changes, such as visually marking a staging environment with specific colors.

Create a css loader class

CssLoader.java

Create a class in your java sources named CssLoader

package com.magnoliacentral;

import javax.inject.Inject;
import javax.inject.Singleton;

import com.vaadin.ui.UI;

@Singleton
public class CssLoader {

	@Inject
	public CssLoader() {
		this.initialize();
	}

	protected void initialize() {
		CustomCssComponent cssComponent = new CustomCssComponent();
		cssComponent.extend(UI.getCurrent());
	}
}

Create a CustomCssComponent

CustomCssComponent.java

Create the CustomCssComponent.java file in the same directory

package com.magnoliacentral;

import com.vaadin.annotations.StyleSheet;
import com.vaadin.server.AbstractClientConnector;
import com.vaadin.server.AbstractExtension;
import com.vaadin.server.ClientConnector;
import com.vaadin.ui.UI;

@StyleSheet({ "custom.css" })
public class CustomCssComponent extends AbstractExtension {

	@Override
	protected Class<? extends ClientConnector> getSupportedParentType() {
		return UI.class;
	}

	@Override
	public void extend(AbstractClientConnector target) {
		super.extend(target);
	}

}

Create a custom css

custom.css

Create the custom.css file in the same directory

body {
	background: red !important;
}

Change the module descriptor

Add the CssLoader.class in your module descriptor as a component within id = admincentral

...
  <components>
    <id>admincentral</id>

    <component>
      <type>com.magnoliacentral.CssLoader</type>
      <implementation>com.magnoliacentral.CssLoader</implementation>
    </component>
  </components>
...

About the author

Marvin Kerkhoff

Marvin Kerkhoff is a web developer since 2004. He started to work for Arvato Systems Schweiz 15 years ago. He did his Magnolia certification in 2010 and achieved the highest Magnolia certification in 2020. He has a strong background in broad E-Commerce and Digital Business projects with various customers.

Business contact