AEM 6 SP2 - Change Overlay (Parsys) Border Color in Touch UI

Goal

Change the Overlay (Parsys) border color in Touch UI. If website's background has the same color as overlay or site CSS cannot contrast CQ parsys, the following simple css override might help

For Classic UI check this post

For detailed configuration, check this post

Package Install


Product Overlay

Extension Overlay

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-change-overlay-color

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-change-overlay-color/clientlib and set a property categories of String type to cq.authoring.editor

3) Create file ( type nt:file ) /apps/touchui-change-overlay-color/clientlib/css.txt, add the following

                         change-overlay-color.css

4) Create file ( type nt:file ) /apps/touchui-change-overlay-color/clientlib/change-overlay-color.css, add the following styles

.cq-Overlay.is-active,
.cq-Overlay.is-hover,
.cq-Overlay.is-selected {
    border-color:  red;
    color: red;
}