Custom Formatting in Confluence - Columns Within a Column?

[Sean Duff]

Basically this is what we're trying to achieve as a Confluence page:



I mocked this up before getting very familiar with Confluence. So now I'm wondering - Is it even possible? 

I had the entire thing written up in HTML, but when pasting the code as Markup, it did not translate into Confluence very well. 

It looks like when it comes to Page Layout, these are the following options:



But I do not see a way to insert any of these layouts within an existing column. 

I will need the initial layout to be 'two columns with left sidebar'. And then within the right column, I will need 'two columns with right sidebar'. Is it possible to create columns within a column in Confluence?


Please help if possible. Thanks!

[Brant Schroeder · Accepted solution]

@Sean Duff I think you will be able to get the layout you have above to work in Confluence.  you can not have a layout within a layout but you can have multiple layouts on a page.  https://support.atlassian.com/confluence-cloud/docs/add-formatting-to-your-page/

You can add tables within a layout but for what you have above I do not think you will need it.  See what I did below.

[Sean Duff]

What you have above is perfect for the inner-content, but how can we get that + the sidebar on the left? 

[Brant Schroeder]

The side bar is there I just did not screenshot it.  New example below.

[Sean Duff]

I did not realize that the sidebar shows up after you've created your page and published it - thanks. I have some more questions about formatting but yes this answers my question about layout / columns in Confluence. 

[Sean Duff]

Is there any way to create a borderless table? Tables may be very useful for me but I need them to be borderless or transparent. 

Also, is there a way to give each section a style? Like a border radius and box shadow? 

[Brant Schroeder]

@Sean Duff 

Formating in the new editor is limited but they are adding to it regularly.  

Table borders can not be hidden in the new editor.  Vote for the feature request here: https://jira.atlassian.com/browse/CONFCLOUD-59956

As far as styling goes there are some macros that allow you to format content and I would suggest that you learn about them here: https://support.atlassian.com/confluence-cloud/docs/what-are-macros/

To answer your other questions:

- I'd like to declare the headings as H1, H2, etc Text formatting provides normal text and headers H1 through H6.
- I'd like to create buttons with custom wording the new editor does not have a button macro and I am not sure you can create them anymore.  
- I'd like to create 4 columns for the product images. Or figure out a way to do that as is shown in my mockup above. You can use the table macro but it will have outlines.

[Sean Duff]

Thanks. Heading and button issues have been solved (I also realized that I could just create custom buttons with the HTML macro). And I might look into the 4 column layout issue later because for now - I'm actually still trying to figure out how to create a borderless table. 

In the comments section for the feature request link that you sent me, there's a comment which claims there's a workaround for the borderless table issue via the CSS Stylesheet Macro:

https://jira.atlassian.com/browse/CONFCLOUD-59956

So I'll just need to enter this code in the CSS:

td.confluenceTd {
  border: none;
}

How do I access the CSS Stylesheet Macro?

Doing a search for 'CSS' in All macros shows nothing:



And I do not see a Gear icon as is suggested here:

https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html 

In order to access General Configuration > Security Configuration > Custom Stylesheets for Spaces.

Or a 'Stylesheet' option as is suggested here:

https://confluence.atlassian.com/doc/basic-styling-tutorial-170000548.html 

Again, my options in Confluence look like this:



And unfortunately I do not see a gear or 'stylesheet' option anywhere on this page. 

[Brant Schroeder]

@Sean Duff Looks like you are on Confluence server.  You could just use the HTML macro to add the table and make it borderless.  I would suggest just doing that.

[Sean Duff]

So then the issue with that is - How do I find out what the src for an image is that I've uploaded? 

Because I'll need to declare the source or path in the HTML for an image:

<table>
  <tr>
    <th>Product 1</th>
  </tr>
  <tr>
    <td>
      <img src="https://?"/>
    </td>
  </tr>
</table>

EDIT* Found a solution to this. Go to Space Tools > Content Tools > Attachments
    

[Bill Bailey]

Are you on the server or cloud version? Because you have many more options if you are on server/data center.

[Sean Duff]

I do not know. The screenshot at the end of my post shows the options that I currently have available. How can I find out whether I'm on the server or the cloud? 

In general, there do not seem to be many options here i.e.

- I'd like to declare the headings as H1, H2, etc
- I'd like to create buttons with custom wording
- I'd like to create 4 columns for the product images. Or figure out a way to do that as is shown in my mockup above.

Those questions are not related to this post, though, so I might have to ask a separate question for that.