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

Kentaro Iida

Hello.

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?

Robert Reiner _smartics_

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