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

Is there a way to manipulate section columns with CSS?

Florian Scheuer Jan 26, 2015

We are currently using sections to create two columns of our documents. I'd like to address each left column with a different CSS class than the sections on the right. However they do not seem to have those different classes (like "column-left" and "column-right"). Is there a way to accomplish this?

Thank you!

4 answers

1 accepted

2 votes
Answer accepted

In Confluence 5.5.2 the columns are displayed using div-elements. Means you should use something like

div.two-equal div:first-child {
Florian Scheuer Jan 26, 2015

Thanks, that worked in combination with CSS nth-child()!

Steffen Heller Jan 26, 2015

@Florian: Can you specify what kind of combination you are using? That interests me because nth-child() didn't work in my version.

1 vote
Maggie Modersohn Jan 26, 2015

Hi Florian, 

If you're looking for a way to do this that is built-in to the UI, check out our add-on Theme Press. Our columns, blocks and layers are macros to which you can add one or more CSS class names. You can also style columns and blocks without custom css (to make your next Confluence upgrade less of a headache) with our built-in designer tool. 

You can try it yourself or send us a note for a demo. 

Ricardo Martins Jan 26, 2015

Using Theme Press for column decoration you have two options: 1. Define an alternate block style and then check the box in the column in the Theme Press Designer to use that alternate styling 2. Add a CSS class to the column using the Theme Press Designer, then add custom CSS to target that. The first option is future proof, the second is not.

TtheB Jan 26, 2015

Please stop posting your advertising messages where they do not belong and also stop pushing them up with your buddy. No one here has asked for a commercial theme add-on.

0 votes
TtheB Jan 26, 2015

You could try and use

.columnMacro:first-child {


in your stylesheet.

0 votes
Steffen Heller Jan 26, 2015

I agree with TtheB: ":first-child" does work (unlike ":last-child" or ":nth-child(x)").

I am just not sure about the right class. Does the section macro not simply create normal tables? I think the right code would be something like this:

table.sectionMacro td:first-child {
Steffen Heller Jan 26, 2015

Okay, my answer refers to Version 4.3.7. Seems it is not the same for different versions.

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

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

1,071 views 7 18
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