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 do I format a UI Expand macro with colour

I added UI Expand macros to my page but the default colour is grey. I would either like to change the text colour or the background/fill colour. How do I change it to a colour of my choice?


2 answers

As you are on Confluence Server, you have access to global and space stylesheets.

You should be able to change the colours with a bit of simple CSS.

html .rwui_expandable_item {
background: #000;
border-top: 1px solid hotpink;
color: #fff;

html .rwui_expandable_item .rwui_icon {
color: #fff;

 This will give a black background and white text with a hotpink top border.


Hi @David Simpson _David Simpson Apps_ 

The snippet above worked perfectly, I was able to get my expand to white background w/lightgray top border.  The next step I'm trying to solve is the text color of the body.  Despite my attempts at body: solid black I'm clearly not formatting it correctly OR putting it in the right place.  The original body text is  gray and our standard is black on white.  Suggestions to get the body set to black?

Thanks in advance!

Hi @K Langford 

Sorry it's taken a while to reply, but I don't have Refined UI Toolkit installed, so I have to unarchive the installation jar to take a look at the code.

Talking a look at the whole of the macro, the html code is something similar to this...

<div class="rwui_expandable_item ...">
<a class="rwui_expandable_item_title rwui_expand" ...>
<div class="rwui_icon"></div>
<div class="rwui_expandable_item_body ...">

This means that we can style each part separately

/* the whole of the macro */
html .rwui_expandable_item
background: #fff;
border-top: 1px solid #000; /* black */
color: #000; /* black */

/* the expand ">" icon */
html .rwui_expandable_item .rwui_icon {
color: #000; /* black */

/* the title */
html .rwui_expandable_item .rwui_expandable_item_title {
color: #000; /* black */
background: #fff; /* white */

/* the body */
html .rwui_expandable_item .rwui_expandable_item_body {
color: #000; /* black */
background: #fff; /* white */

This should lay it out enough for you to get the idea of the separate parts and how to swap in hexadecimal colors - note that #fff is shorthand for #ffffff

Like K Langford likes this

This was outstanding!  I put the whole thing in an HTML macro at the top of m page and it worked great, though I did find to change the color of the icon, I had to put in 
html .rwui_expandable_item .rwui_expandable_item_title .rwui_icon


Any suggestions on how to change the hover color?  The color the expand title box changes to when the cursor passes over it? (She asks with big puppy eyes...)

I figured it out all by myself!  

html .rwui_expandable_item .rwui_expandable_item_title:hover{ background: #ffffff; /* white */ }
0 votes
Dominic Lagger Community Leader Mar 10, 2020

Hi @Honey_Haines 

Out of the box, you can't change the color of this macro. But since you are on confluence server, you could write your own user macro.

Are you familiar with programming? Are you the administrator of your confluence? 

These two conditions must be true for you to do this. If so and you have any further questions, please let me know. I will assist you.

Regards, Dominic

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Confluence

Lessons and Learnings: Six Months of Working Remote [Discussion]

Hey there, folks! For most of us, the past six months- yes, you read that right- have been a journey. More people than ever before have pivoted to working remotely, and navigating being on-scre...

7,070 views 6 6
Join discussion

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