CSS used by Atlassian for their Confluence / Documentation?

[Neal Culiner]

Hello,

I'm about to start creating technical documentation and have reviewed the confluence docs. I really like the layout Confluence uses for their docs. Can someone tell me how/where/what to use in my site to get the same layout, i.e. fixed width centered as theirs is?

Thank you.

[SusanA · Accepted solution]

Hi Neal,

We use custom CSS for the documentation you see on CAC (confluence.atlassian.com). You can do this too, using the information here:

https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS

Just play around, like you would in any other HTML page, until you find something that works for your needs. Oh, and in terms of the Theme we use, we use the Documentation Theme, as described here:

https://confluence.atlassian.com/display/DOC/Configuring+the+Documentation+Theme

I hope this helps.

Cheers,

Susan

[Mick Davidson]

I think Atlassian use the Global Look and Feel theme, as opposed to the Documentation theme. If you're creating documentation, then you might be better off using the latter as you can customise it and therfore have more control over it.

One of the problems with the Global Look and Feel theme is that you sometimes end up forcing users to use scroll bars to move text and graphics so you can view them properly. This is caused because the graphics are too large for the theme, which causes the scroll bars to appear automatically. See here for an example:

https://confluence.atlassian.com/display/DOC/Confluence+5.0+Release+Notes#Confluence5.0ReleaseNotes-Updatedglobalnavigation

This might seem like a trivial problem, but to see all the text, you have to go to the scroll bar (which will be under everything else), then move it sidesways, then go back to the text you couldn't see.

This is a very poor user experience and one to be avoided. You can do this by making the graphics small enough to not warrant the scroll bar in the first place. You can click on the graphic to see the full size version.

Have fun! :)

[Matthew J. Horn]

It's likely done, like my company's documentation on Confluence, with a combination of custom style sheets, custom decorators, and modifying the default stylesheets.

Use your browser's built in tools. Right-click and view source or inspect element. In Chrome, view the network resources in the "Network" tab. CSS files are loaded just as any other network resource.