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 an hour ago in Confluence Cloud

Happy holidays from our team to yours!

Hi Community!  2018 was filled with changes for our team, both big and small, and we've taken a lot of time to both celebrate our wins and recognize areas of improvement. One thing that we're a...

58 views 0 7
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