How do you change the color of the page icon in the recently updated macro?

[Joe Caruso]

I would like to change the color of the icon from blue to red which fits the look and feel of the rest of my site space. 

[Daniel Eads]

Hey Joe, welcome to the Community!

On the backend, these icons are stored as SVG files in Confluence's installation directory. You could modify these files directly on your server's filesystem, but when it comes time to upgrade any changes you made would be reverted unless you remembered to copy your new files back in after the upgrade completes.

Instead, I'd recommend a modification using some CSS. Vector files can have transformations applied to them without actually modifying the source file, and changes you make via the Confluence web interface will stay with your instance even after a Confluence upgrade!

The specific type of transformation we're going to use is called a Color Matrix. Specifically, the feColorMatrix filter. Here's some resources to help you learn the particulars on how these work - you'll need to play with the matrix to get the right shade of red that you want.

• Shorter explanation of color matrix
• Longer explanation of color matrix (with more examples)
• Color Filter Playground - useful for making live changes to try out different colors

Alright, now you'll need to apply these changes to Confluence. To make the filter available for use in CSS, we'll need to add it on the Custom HTML page in Confluence's administration. I've put the following code in the section that says "At end of the HEAD":

<svg viewBox="0 0 600 400" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="red-page-icon"> 
<feColorMatrix 
type="matrix" 
values="1 2.7 0 0 0 
0 0 0 0 0 
0 0 0 0 0 
-1 0 0 1 0 "/> 
</filter> 
</filter>
</defs>
</svg>

This makes a particular filter ready to be called. You can use multiple filters with different color matrixes here if you want to modify multiple icons - just make sure they have unique id tags. I called this one "red-page-icon".

The Global Stylesheet will need to be modified next (just called "Stylesheet" in Confluence's global administration links). Using Chrome's Inspect option, I saw that there was a class on the page icon called "content-type-page". I'm using that selector here for this CSS:

.content-type-page {
filter: url(#red-page-icon);
}

The red-page-icon item here is the id I gave my filter in the HTML. If you want to change multiple things on the page, make sure you've targeted unique CSS classes for those items (using your browser's developer tools to help you out), use different ids in your HTML matrixes, and make sure your CSS filters have the right ids.

After making sure both the HTML and CSS saved, I refresh my Confluence dashboard and see a re-colored page icon:

Cheers,
Daniel