What should I do to change the color of th face of day-rating of the diaries?


Is there any way to change the color of the face image or the face image of day-rating of the projectdoc Developer Diaries?

I can choose 1 of 11 phases from zero-unrated to 10-perfect by Day-Rating macro. However, I want to change the color of the face because all of them are the same colors. Is there the method to  change the color of the face or to replace a face image?

1 answer

There is no configuration option to replace the icons within the plugin.

There are a number of workarounds, though. Here are three:

#1 Fork

You may fork the add-on project on Bitbucket (all our free doctype add-ons are available on Bitbucket), make your adjustments and create your own version of the plugin. This may be a valid step if there is a need to adjust other parts of the add-on as well (e.g. if you want to make changes to the templates, wizards, etc.). The code of the add-on is open source (APL 2).

#2 Fiddle with the JAR

The second option and easiest approach would be to exchange the images in the JAR. This approach would not demand development skills. But this is certainly a hack.

#3 Use CSS (recommended)

Third, you could use CSS to exchange the images. You would - for instance - attach your images to a Confluence page and adjust you Confluence CSS accordingly. This would be the recommended approach, but probably requires some CSS 3 features and you may have to test the results in the relevant browsers (and versions).

The code would look something like this (works in Chrome, but not yet in Firefox or IE, not tested in other browsers):

img.projectdoc-devdiary-rating[alt="10"] {  
  content: url("/confluence/download/attachments/123456/myicon.png") !important;  
  background-image: none;  

#property-panel a.aui-button.macro-property-panel-projectdoc-10-perfect span.icon {  
  content: url("/confluence/download/attachments/123456/myicon.png") !important;  
  background-image: none;  

img.editor-inline-macro[data-macro-parameters="value=10-perfect"] {  
  content: url("/confluence/download/attachments/123456/myicon.png") !important;  

It shows the adjustments for the three locations: view, editor and selection box for the image 10. You'll have to adjust the URL to your image (and add this set of CSS statements for each image you want to replace).

If you are interested we may share our solution (once we have it smile).

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,016 views 2 13
Read article

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you