Developing for Page Difference developing-for-page-difference
This video shows how to provide custom styles for AEM Sites’ Page Difference functionality.
Customizing page difference styles customizing-page-difference-styles
my-project.AEM’s page difference obtains 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 prepare-the-authoring-clientlib
Ensure the existence 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 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-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).
