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">
values="1 2.7 0 0 0
0 0 0 0 0
0 0 0 0 0
-1 0 0 1 0 "/>
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:
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:
- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...
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