How to customize a showcase using the HTML macro

Summary

The steps on this page require the Confluence instance to enable the HTML macro. Enabling these macros will open your Confluence site to cross-site scripting attacks. Do not enable them unless you trust all your users!

You can customize the Showcase macro by adding an HTML macro to the page and changing the variables for the following CSS classes:

.sr-showcase>.showcase-title: format the showcase title
.sr-showcase>.showcase-caption to format the showcase description
.sr-showcase to format the showcase

For example, you can use the following syntax in the HTML macro to format the showcase title, description, button, and body:

<style>
/* customize Showcase Title */
.sr-showcase>.showcase-title {
background-color:black;
color: white; border-bottom: 2px solid black;
font-size: 30px;
}

/* customize Showcase Caption */
.sr-showcase>.showcase-caption {
background-color:lightblue; 
color: black; 
font-size: 20px;
}


/* customize Showcase Button color */
.showcase-action>.aui-button{ 
background-color:white;
}

/* customize Showcase Button color when hovered */
.showcase-action >.aui-button:hover{ 
background-color:cadetblue;
}


/* customize Showcase Size and color */
.sr-showcase {
height: 200px;
width : 400px; 
background-color: lightgreen;
}
</style>

Notes

Currently, it is not possible to customize the button's text color.
For the button to appear in preview or in the page, the Button Link property must have a link.