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.
1
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());
}
}
2
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);
}
}
3
Create a custom css
custom.css
Create the custom.css file in the same directory
body {
background: red !important;
}
4
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>
...