It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

CSS used by Atlassian for their Confluence / Documentation?

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.

3 answers

1 accepted

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

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.

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! :)

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

Confluence Server & Data Center 7.0 is here!

Hello Community 👋🏼 I’m Makisa, a product manager on Confluence Server and Data Center. Confluence Server & Data Center 7.0, our latest platform release, is now available and we wanted to shar...

263 views 1 12
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you