nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Accepted answers

SusanA

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

All comments

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.

Mick Davidson_o2ws6w

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!

SusanA

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

documentation

css

layout