Smartphone

Goal

Change the Overlay (Parsys) border color in Touch UI. If websites 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;
}