Use Confluence CSS in Forge Custom UI

We built a forge macro app for Confluence that includes a custom UI.

I would love to make the custom UI blend in with the surrounding page content as much as possible.
Ideally, I could reference the Confluence CSS for that, e.g. for table cells, simply set their classes to confluenceTh and confluenceTd etc.

However, because the custom UI is inside an iFrame, the parents CSS is not accessible to me of course.

@atlaskit/css-reset is included of course as per the standard app template. But the style defined therein stands out like a clown at a funeral next to the other content (well not as bad, but sort of).

Any hint would be greatly appreciated.

We use https://aui.atlassian.com/ .

2 Likes

Hi @j.bungartz , Atlassian Design System is a great place to start for creating an Atlassian themed app.

Thanks for getting involved @QuocLieu. I haven’t found that resource to be helpful though because the styles defined therein give a very different look for a Custom UI generated by a Confluence macro plugin compared to the surrounding page content.

Or am I missing something there?

Thanks again.

Joern

No worries @j.bungartz, do you have a screenshot example on the type of style you’re looking to bring into your Custom UI app? Our Confluence pages would be using components out of our design system

@QuocLieu for now, I am looking to create a very basic table, e.g. like this

When I look into the code for such a table, I see that Confluence uses classes like “confluenceTable”, “confluenceTh” etc. to style the table html elements.

I can’t find those in the styles provided by the design system or any other component that would have similar styles.

The table definition provided in the CSS reset package looks way different: https://atlassian.design/components/css-reset/examples#tables

Hi @j.bungartz , thanks for the screenshot. Unfortunately, the css for this version of our table isn’t publicly available. We encourage the usage of Atlassian Design System components to create apps with an Atlassian like theme. If you’re looking use this version of the table, you’ll need to copy over the relevant css into your own css file.