Page tree
Skip to end of metadata
Go to start of metadata


Most of the CSS files are not located in the UI (admincentral). One can bring additional css easily for server side components via annotation. Unfortunatelly, the CSS for the age editor needs to be explicitly injected in the page editor inner frame


Make the CSS for the variant selector part of personalization module so the changes can be done independently from the UI.

Investigated solutions

Resource bundle

public interface PageEditorClientBundle extends ClientBundle {
    public static final PageEditorClientBundle INSTANCE =  GWT.create(PageEditorClientBundle.class);
    public CssResource css();

(plus) This is probably "how it should be done"

(minus) CSS is parsed and our page-editor.css fails when parsing (all the rules would have to  be marked as @external and there are still some parsing errors)


DataResource css()

(minus) Interfaces can't be overridden by deferred binding?

GWT public folder

Based on the GWT public folder (/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/page-editor.css).

    private void injectEditorStyles(final Document document) {
        cssLink.setHref(GWT.getModuleBaseForStaticFiles() + PAGE_EDITOR_CSS);

(plus) the page editor css would be moved to the pages module where it belongs

(minus) Needs to be pre-compiled

(plus) No need to override a method, the custom CSS would be brought by different public folder (/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaProWidgetSet/page-editor.css)

To not duplicate the original page editor CSS, import the original one and add custom ones:

@import "/VAADIN/widgetsets/info.magnolia.widgetset.MagnoliaWidgetSet/page-editor.css";
div.editorIcon.icon-has-variants {

Does not work since we have MagnoliaWidgetSetPro and the original CSS is not available at runtime. Try to import scss and precompile:

@import "info/magnolia/ui/vaadin/gwt/public/page-editor.scss";

div.editorIcon.icon-has-variants {

(minus) We need to import a SCSS file, since CSS files are not eagerly imported. The results contains wrong paths to magnolia icons (due to the different public URL)

Deferred binding

Provide custom page editor connector which injects additional CSS. Adjust the default connector.

(plus) minimal changes

(minus) doesn't solve the page editor CSS separation in general

Custom theme?

(plus) global solution

(minus) doesn't solve additional CSS injection

  • No labels