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?

Neal Culiner Mar 03, 2014

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

1 vote
Answer 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

0 votes
Matthew J. Horn Mar 03, 2014

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.

0 votes
mick davidson Mar 03, 2014

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
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

Confluence CVEs and common questions

Two vulnerabilities have been published for Confluence Server and Data Center recently: March 20, 2019 CVE-2019-3395 / CVE-2019-3396 April 17, 2019 CVE-2019-3398 The goal of this article is...

950 views 0 19
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