Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

How can i use the div macro in Confluence and what are the different classes that i can use?

I would like to know what are the different classes you can use in the div macro. I have seen the home-banner class, is there any other class that i can use?

2 answers

2 accepted

1 vote
Answer accepted

You can use pretty much everything in div macro as long as you know the underlying structure of how the pages are built which you can find out if you know HTML analysis by the browsers inspection/source mode. 

You can look at the plugin vendor info as well for example for Adaptavists DIV macro: https://docs.adaptavist.com/cfm/confluence/server/latest/macros/div.html

Some example though since you asked

/* Control behavior of lefthand menu */
div[class*="pagetree_children_content"]  {    font-size: 12px    }

/* Control behavior of Tables */
/* Sets that table is configured differently sorting row will not work otherwise */ 
.wiki-content Table  {font-size: 1.0 em; 
/* Sets one color on sorting rows in table */
.wiki-content Th  {background-color: rgb(100,149,237) !important;    font-size: 1.5 em} 
/* Sets one color on even rows in a table */
.wiki-content tr:nth-child(even) {background-color: #CCCCCC;} 
/* Sets one color on odd rows in a table */
.wiki-content tr:nth-child(odd) {background-color: #FFFFFF;} 

/* Hides the byline until hovered over*/
.page-metadata ul {visibility: hidden;}
.page-metadata:hover ul {visibility: visible;}

0 votes
Answer accepted

@vanessa_dsouzaFurther to Krister's response, above, you need to know that the DIV macro is deprecated in Confluence Cloud. Atlassian is actively moving users to the Fabric Editor, which replaces the "legacy" editor, and the DIV macro has been deliberately omitted from the Fabric Editor on the basis that users were allegedly messing up their pages.

That being said, if you are still using the legacy editor, you can also use the Class field to provide a hook for styling PDF exports of your pages (see Space Settings > Look and Feel > PDF Export Stylesheet).

Atlassian provides a link to its default export stylesheet, here: https://confluence.atlassian.com/download/attachments/190480945/confluencedefaultpdf.css?version=1&modificationDate=1243580667083&_ga=2.28092283.672528023.1573493163-1307364796.1573493163

By inserting content into a DIV, you can apply a class and modify it by including extra styling in your PDF-export stylesheet.

Yes, totally correct with the depreciation which also applies to the Style Macro. I did not look at what version of Confluence we were discussing and though server (thus the server plugin) :-) 

We actually moved to server because of these changes, although I can see the use for some users, the new easy use interface is way to limiting for us.

For your information Vanessa, here is the news post in regards to what will be taken away (which is a lot): https://confluence.atlassian.com/confcloud/we-re-cleaning-up-the-macro-browser-946028471.html 

Like Kelvin Hill likes this

And here is the Confluence Cloud roadmap: https://confluence.atlassian.com/confcloud/confluence-cloud-editor-roadmap-967314556.html

Sadly, it isn't entirely accurate. For example, it suggests that the Page Tree macro converts completely. In reality, the Page Tree macro displays a text-wrapping bug in the new editor.

Like Gaynor Keane likes this

Thank you for your responses.

I am currently using the legacy editor and I do not have any access to Space Settings. I used the div class home-banner and liked the effect. What are the other classes that I can use for formatting my space?

You are not going to have legacy much longer so i would not put more time into this., the things you created will most likely soon be gone as well. 

If you need to change things i would suggest to go with one of the theme plugins such as refined: https://marketplace.atlassian.com/apps/1221322/refined-for-confluence-cloud?hosting=cloud&tab=overview

If you want to continue doing like you are now, you need to start looking at switching to server. 

Like Kelvin Hill likes this

Suggest an answer

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

Share your Confluence Cloud experience for a chance to win $500!

Take our 5-minute survey to win a $500 Visa gift card! Are you currently using Confluence Cloud? We want to hear from you! Fill out this quick survey about your Confluence Cloud experience so we ...

661 views 7 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