Styling a Macro

Charisma Riley_exj4sv

I am curious how I would go about styling a property of a formatting macro. For example, with the Expand macro, when I try to style the link with:

a {
 color: red;
}

nothing happens. I get the default blue for the link. Also, I can't get it to respond to any of the hover, visited, or active states. Any thoughts?

Bill Bailey

The key is to use the inspect function in a browser to determine the HTML, and attributes of the element.

For the text display in the expand macro, the actual HTML is the following:

<div id="expander-2064343605" class="expand-container conf-macro output-block" data-hasbody="true" data-macro-name="expand">
<div id="expander-control-2064343605" class="expand-control">
<span class="expand-control-icon icon">&nbsp;</span><span class="expand-control-text">Click here to expand...</span></div>

{more stuff]

</div>

 

So the actual expand text is not a link (a tag), but a span tag. In this case, you need a rule to style span.expand-control-text. Then add this new styling to your Confluence space or global CSS.