This video shows how to provide custom styles for AEM Sites' Page Difference functionality.

Customizing page difference styles


Note:

This video adds custom CSS to the we.Retail client library, where as these changes should be made to the customizer's AEM Sites project; in the  example code below: my-project.

AEM's page difference obtrains the OOTB CSS via a direct load of /libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css.

Because of this direct load of CSS rather than using a client library category, we must find another injecting point for the custom styles, and this custom injection point is the project's authoring clientlib.

This has the benefit of allowing these custom style overrides to be tenant specific.

Prepare the authoring clientlib

Ensure the extistence of an authoring clientlib for your project at /apps/my-project/clientlib/authoring.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        categories="[my-project.authoring]"/>

Provide the custom CSS

Add to the project's authoring clientlib a css.txt that points to the less file that will provide the overriding styles. Less is preferred due to its many convenient features, including class-wrapping which is leveraged in this example.

base=./css

htmldiff.less

Create the less file that contains the style overrides at /apps/my-project/clientlibs/authoring/css/htmldiff.less, and provide the overring styles as needed.

/* Wrap with body to gives these rules more specificity than the OOTB */
body {

    /* .html-XXXX are the styles that wrap text that has been added or removed */

    .html-added {
        background-color: transparent;
    	color: initial;
        text-decoration: none;
    	border-bottom: solid 2px limegreen;
    }

    .html-removed {
        background-color: transparent;
    	color: initial;
        text-decoration: none;
    	border-bottom: solid 2px red;
    }

    /* .cq-component-XXXX require !important as the class these are overriding uses it. */

    .cq-component-changed {
        border: 2px dashed #B9DAFF !important;
        border-radius: 8px;
    }
    
    .cq-component-moved {
        border: 2px solid #B9DAFF !important;
        border-radius: 8px;
    }

    .cq-component-added {
        border: 2px solid #CCEBB8 !important;
        border-radius: 8px;
    }

    .cq-component-removed {
        border: 2px solid #FFCCCC !important;
        border-radius: 8px;
    }
}

Include the authoring clientlib CSS via the page component

Include the authoring clientlibs category in the project's base page's /apps/my-project/components/structure/page/customheaderlibs.html directly before the </head> tag to ensure the styles get loaded.

These styles should be limited to edit and preview WCM modes.

<head>
  ...
  <sly data-sly-test="${wcmmode.preview || wcmmode.edit}" 
       data-sly-call="${clientLib.css @ categories='my-project.authoring'}"/>
</head>

The end result of a diff'd page with the above styles applied would look like this (HTML added and Component changed).

page-diff

Supporting materials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy