Fabric Editor: how to customise Info, Success, Error, and Warning Panels in PDF Exports

[#1]

Anyone who has attempted to customise PDF-export output by including Fabric Editor classes in the PDF-export stylesheet will have discovered that the PDF-export process ignores the new classes.

It appears that a new step has been added into the PDF-export process during which the new classes are converted back to the legacy-editor classes before being submitted to the PDF engine.

By way of illustration, if you inspect the HTML tags used to display the Fabric Editor Success Panel, you'll find something like the following:

<div class="ak-editor-panel" data-panel-type="success" style="background: rgb(227, 252, 239);"> ... </div>

The new class "ak-editor-panel" is ignored by the PDF-export stylesheet, but you can reference the Panel using the legacy classes as follows:

• The Success Panel can be customised using the class "confluence-information-macro-tip"
• The Info Panel can be customised using the class "confluence-information-macro-information"
• The Error Panel can be customised using the class "confluence-information-macro-warning"
• The Warning Panel can be customised using the class "confluence-information-macro-note"

For example, you may change the font color, border, and background-color of a Success Panel in an exported PDF with the following CSS:

.confluence-information-macro-tip { 
    color: green;
    border: solid red 2px; 
    background-color: #F0F0F0; 
}

Note 1

The developers appear to have made a mistake in the new conversion process when legacy classes are applied to new Panels for export to PDF. As indicated above, the new Error Panel uses the old Warning Panel class, and the new Warning Panel uses the old Note Panel class.

The new Note Panel appears to have no corresponding legacy class and cannot therefore be customised (as far I can see at the moment).

Note 2

When exporting to PDF, the Panel icons are suppressed (as was the case with the legacy editor). That leaves an unsightly space to the left of the text in the Panel. It is possible to change the left margin for all Panels with the following CSS:

.confluence-information-macro-body { 
    margin-left: -20px; 
}

Alternatively, if you wish to change the left menu only for a specific Panel, you'll need to use the following approach. This example changes the left margin only for the Success Panel:

.confluence-information-macro-note .confluence-information-macro-body { 
    margin-left: -25px; 
}

Note 3

Unlike the legacy editor Panels, the Fabric Editor Panels have no title option. If you wish to include a Panel title in your PDF, customise the following example CSS:

.confluence-information-macro-information::before {
    content: "Note";
    font-weight: bold;
    color: red;
    margin-left: -20px;
}

The approach of using legacy classes for the Fabric Editor objects applies to other macros, too. For example, the Code Snippet can be customised using the CSS for the old Code Block macro.

The current situation hasn't been properly thought through. We can only hope that Atlassian will make this situation more accessible at some point.

[Bob Bergman]

I agree that the current situation hasn't been well thought through.  We have similar issues trying to display the same components (and more) in both static and dynamic content macros.  More and more of our customers are coming to us for support about these styling issues, particularly as the deployment of fabric gains momentum, yet we have very little we can do about it aside from attempt to reverse engineer and apply these same sorts of hacks.  It's particularly troubling because fabric content seems to be evolving quickly, so trying to keep up with the proper stylistic updates is an ongoing pain.  I would very much love to see Confluence publish official stylesheets for the various types of page content in each possible context and host it on a CDN.  That way we could simply reference the latest stylesheets for the appropriate context and let Confluence keep them all in sync for us, as it should be.