CSS Linked from SharePOint Asset Library Does Not Render Correctly

[Charisma Riley]

So, I have the weirdest thing happening! When I link to a css file hosted from within SharePoint Online for our Intranet, the page is rendered super wonky. But when I place the CSS directly in the page with a Style macro or link to it via raw BitBucket, GitHub, or via CDN, it works just fine. Anyone else experienced this? Any thoughts?

[Shannon S]

Charisma,

When you say SharePoint Online are you referring to a specific add-on in Confluence? I see SharePoint Online Connector is available but only for Server. As your issue is tagged as a Cloud issue, I wasn't sure if this is what you are referring to.

Can you let us know exactly where you are inserting the CSS when it doesn't work properly? If you're not using Confluence Cloud can you tell me your Server version?

Regards,

Shannon

[Charisma Riley]

I see the confusion. No, we are using Confluence Cloud and SharePoint Online. We create links to files on SharePoint for all of our images and documents we place in Confluence. It works flawlessly. Except when I import a CSS file via the Style macro. This does not work; it renders the page bizarrely. However, when I import a CSS file using the same macro from raw BitBucket or Github code—or via CDN—everything renders properly. The SharePoint Connector would allow SP and Confluence to talk to each other but I’m not wanting that. I just want SharePoint to host a file, like we do for our documents and images that we link to in our Confluence pages all the time.

My question, then, is wanting to understand why CSS files specifically do not import properly from SP. Is it that SharePoint does not deliver the raw file in some way, but adds something to it en route? Does Confluence misunderstand a CSS file when SPO delivers it? There’s no real way for me to tell, so I thought I’d ask the experts! :D

[Shannon S]

Hi Charisma,

It's not possible to customize CSS in Confluence Cloud. Have a look at Functional Differences in Confluence Cloud:

On Atlassian Cloud, Confluence uses a custom theme, which cannot be modified or updated using custom HTML or CSS (not supported). For more information on custom themes in Confluence Cloud, refer to  Working with Themes . Confluence Cloud Developer community: You can also create your own theme for Confluence Cloud. Check out the  Theme page  in our Confluence Cloud Developer documentation.

Additionally, I believe you might have been importing them the following way, but it appears there is a known issue that is causing the import feature to not work anymore. 

• CONFCLOUD-53669
• CONFCLOUD-53128

Can you have a look and confirm that?

Regards,

Shannon

[Charisma Riley]

CSS is completely allowed in Confluence Cloud via the Style macro (and many third-party macros, which we do not use). It also has an import function—and it works properly. But not when I import from our SharePoint Library. So I am wondering if anyone knows if there is an issue with SPO adding in metadata or something when delivering the file, because BItBucket, github, and CDN CSS files work just fine.

[Shannon S]

Hi Charisma,

My apologies; without an example it's hard to tell exactly what you were looking to format with your CSS. Since the {style} macro in Confluence formats only the page itself (by use of iFrame) it gets around the restriction of not being able to format Confluence itself with CSS. So if you were looking to only format a single page then this is a good use for that macro. The bug I sent you was in regards to formatting Confluence as a whole, or an entire space.

As for the issue with SharePoint and sending CSS to Confluence, I am unable to find any known issues regarding this. They have not been reported as a support ticket, or as a bug.

However, I wanted to let you know that due to our improvements in the new editor we're rolling out, the style macro has been deprecated and has already been removed from a few instances.

There are a few other macros that will be obsolete or deprecated, so have a look below for more information on what those are:

• We're cleaning up the macro browser

If you have any feedback regarding these changes, please feel free to send it by using the Send Feedback menu item when clicking your avatar in the bottom left-hand corner of Confluence.

Kind regards,

Shannon