Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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 do you think is the most *delightful* Confluence feature? Comment for a prize!

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

415 views 23 8
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