AEM 6 SP2 - Change Parsys Border and Text Color in Classic UI

Goal

Change the color of parsys. In Classic UI, the parsys border color is #d3ea9a; if your website background happens to be of same color or site CSS cannot contrast CQ parsys, the following simple css override might help

For Touch UI check this post

For a better implementation check this post

Package Install


Product Parsys

Extension Parsys

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/classic-ui-change-parsys-color

2) Create clientlib (type cq:ClientLibraryFolder) /apps/classic-ui-change-parsys-color/clientlib and set a property categories of String type to cq.widgets

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

                         highlight.css

4) Create file ( type nt:file ) /apps/classic-ui-change-parsys-color/clientlib/highlight.css, add the following styles

#CQ .cq-editrollover-highlight-left {
     background-color: red !important;
}

#CQ .cq-editrollover-highlight-bottom {
    background-color: red !important;
}

#CQ .cq-editrollover-highlight-top {
    background-color: red !important;
}

#CQ .cq-editrollover-highlight-right {
    background-color: red !important;
}

#CQ .cq-editrollover-insert-message {
    color: red !important;
}