How do I format a UI Expand macro with colour

[Honey_Haines]

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?

[David at David Simpson Apps]

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.

Documentation:

• Styling Confluence with CSS

[K Langford]

Hi @David at 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!

[David at David Simpson Apps]

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>
    __TITLE_GOES_HERE__
  </a>
  <div class="rwui_expandable_item_body ...">
    __BODY_GOES_HERE__
  </div>
</div>

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

[Nancy Bonanno]

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...)

[Nancy Bonanno]

I figured it out all by myself!  

html .rwui_expandable_item .rwui_expandable_item_title:hover{ background: #ffffff; /* white */ }

[Dominic Lagger]

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