Default track changes color in Web Author 19.1!

[mu258770]

Hi,

This is again related to oXygen Web Client 19.1 customization.

Could you please let me know how we can change the default track change colors. Currently for insert changes and delete changes, color is set as blue. We would like to keep different colors for insert and delete. In eclipse client, we have configured options.xml and we could achieve it.

But we can see that the track change color options are not supported in Web Author configurations.

Is this can be achieved using CSS?

Regards,
Shabeer

[mihaela]

Hi Shabeer,

Indeed the review colors from options are not aplicable in Web Author. We use 10 colors and assign them cyclically to authors (from CSS). A comment of the N-th author has a class "Nauthor". If you want to change the colors from CSS you have to take into account the fact that there are two places were a comment or change is rendered: in editor and in Review side panel (so your customization must match both cases).

Here are the two less files content that we use to define review colors:
- for editor:

Code: Select all

.marker-colors(@r, @g, @b) {

    &.oxy-marker[data-type="CHANGE_INSERT"]  .oxy-imgwrapper:before,

    &.oxy-marker[data-type="CHANGE_DELETE"]  .oxy-imgwrapper:before {

      background: linear-gradient(0deg, rgba(@r, @g, @b, 1) 2px, transparent 0px) repeat-x;

      background-size: 50% 50%;

    }

    &.oxy-marker[data-type="CHANGE_INSERT"]  .oxy-imgwrapper:before {

      background-position: 0 100%;

    }

    &.oxy-marker[data-type="CHANGE_DELETE"]  .oxy-imgwrapper:before {

      background-position: 100% 0;

    }



    &.oxy-sentinel-marker[data-subtype="split"].oxy-end-sentinel-marker,

    &.oxy-marker[data-type="CHANGE_INSERT"],

    &.oxy-marker[data-type="CHANGE_DELETE"] {

      color: rgba(@r, @g, @b, 1) ;

    }



    &.oxy-marker[data-type="COMMENT"],

    &.oxy-marker[data-type="CUSTOM_HIGHLIGHT"] {

      &, .oxy-imgwrapper:before {

        background-color: rgba(@r, @g, @b, 0.2);

      }

    }

}



[class*="0author"] { .marker-colors(0, 0, 255);     }

[class*="1author"] { .marker-colors(128, 0, 0);     }

[class*="2author"] { .marker-colors(154, 58, 168);  }

[class*="3author"] { .marker-colors(165, 197, 1);   }

[class*="4author"] { .marker-colors(200, 81, 0);    }

[class*="5author"] { .marker-colors(102, 102, 102); }

[class*="6author"] { .marker-colors(2, 110, 2);     }

[class*="7author"] { .marker-colors(164, 160, 0);   }

[class*="8author"] { .marker-colors(0, 204, 204);   }

[class*="9author"] { .marker-colors(40, 170, 255);  }





/**

 * Replies should have transparent background.

 */

.oxy-marker.oxy-marker[data-level] {

  background-color: transparent;

}

- for Review panel:

Code: Select all

@media only screen {

  .review-panel-content.done {

    color: #d0d0d0 !important;

  }



  // The same color is used in multiple places - use a mixin.

  .review-panel-colors(@r, @g, @b) {

    &.change_insert,

    &.change_delete,

    &.change_attribute_inserted,

    &.change_attribute_deleted,

    &.change_attribute_modified {

      &.review-panel-item > .review-panel-content {

        color: rgb(@r, @g, @b);

      }

    }

  }



  [class*="0author"] {

    .review-panel-colors(0, 0, 255);

  }



  [class*="1author"] {

    .review-panel-colors(128, 0, 0);

  }



  [class*="2author"] {

    .review-panel-colors(154, 58, 168);

  }



  [class*="3author"] {

    .review-panel-colors(165, 197, 1);

  }



  [class*="4author"] {

    .review-panel-colors(200, 81, 0);

  }



  [class*="5author"] {

    .review-panel-colors(102, 102, 102);

  }



  [class*="6author"] {

    .review-panel-colors(2, 110, 2);

  }



  [class*="7author"] {

    .review-panel-colors(164, 160, 0);

  }



  [class*="8author"] {

    .review-panel-colors(0, 204, 204);

  }



  [class*="9author"] {

    .review-panel-colors(40, 170, 255);

  }

}

Best Regards,
Mihaela

[mu258770]

Hi Mihaela,

Thank you for your quick response!

I tried to use the same code in my customized CSS but failed. I searched for this snippet also in the CSS folder under frameworks/dita, but could not find it.

Could you please provide me some hints on how I can make use of the snippet.

Regards,
Shabeer

[mihaela]

Hi Shabeer,

I think you tried to add the CSS customization inside a CSS file from your framework. The CSS from the framework is applied on the XML document.
To change the review colors you must match the nodes from the HTML document that is generated from the XML document and it is used for rendering your document in browser. For this you can add a plugin.js in the app folder [1] of the Oxygen XML Web Author deployment, containing the following code that imposes a CSS file to be applied on your html documents:

Code: Select all

    var cssFile;

    cssFile = goog.dom.createDom('link');

    cssFile.rel = "stylesheet";

    cssFile.type = "text/css";

    cssFile.href = "review_colors.css";

    goog.dom.appendChild(document.head, cssFile);

The review_colors.css file must also be added in the app folder.
To change the colors you can start from the sample less files that from my previous message (please note that it is less, not css).
Here is a small CSS sample that imposes different foreground colors (in editor) for insertions and deletions, for the first reviewer:

Code: Select all

[class *= "0author"].oxy-marker[data-type = CHANGE_DELETE] {

    color: red !important;

}



[class *= "0author"].oxy-marker[data-type = CHANGE_INSERT] {

    color: green !important;

}

[1] Customizing Web Author Using JavaScript Code

Best Regards,
Mihaela