It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

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. IconColor.PNG

1 answer

0 votes
Daniel_Eads Atlassian Team Sep 11, 2019

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.

 

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:

image.png

Cheers,
Daniel

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What project did you transition or start on Confluence with the shift to remote work?

It’s been great to hear from fellow users over the last few weeks about the best tips and fun moments you’ve had working on Confluence since the transition to working remote. I’d love to keep the c...

397 views 11 11
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you