Versions Compared

Old Version 10

changes.mady.by.user Elizabeth Tai

Saved on

compared with

New Version Current

changes.mady.by.user Smita Nair

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Summary

Note

This KB requires 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 are able to customize the Showcase macro by adding a HTML macro into the page and changing the variables for the following CSS classes:

  • .sr-showcase>.showcase-title (to format Showcase title)

  • .sr-showcase>.showcase-caption (to format Showcase description)

  • .sr-showcase  (to format Showcase)

Environment

  • Confluence Server

Diagnostics Steps

Not applicable.

Cause

You may want more customization options for the Showcase macro than what is available by default.

Workaround

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

Code Block
<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>

...

  • 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 has to have a link. 

Resolution

Not applicable

...

.

...